使用 js 或 jQuery 将 data-id 附加到 href
Append data-id to href using js or jQuery
假设我有一个 table 看起来像这样:
<table>
<tbody>
<tr class="card-id" data-id="1">
<td>
<a href="http://www.test.nl/">Card 1</a>
<input class="option" type="checkbox" />
</td>
</tr>
<tr class="card-id" data-id="2">
<td>
<a href="http://www.test.nl/">Card 2</a>
<input class="option" type="checkbox" />
</td>
</tr>
<tr class="card-id" data-id="3">
<td>
<a href="http://www.test.nl/">Card 3</a>
<input class="option" type="checkbox" />
</td>
</tr>
</tbody>
</table>
是否可以获取已检查的 table 行的数据 ID,然后将其附加到 url?
我尝试在 js 中使用此代码
$(".option").click(function () {
var id = $(this).closest('.card-id').data('id');
$(".options-count a").each(function () {
var $this = $(this);
var _href = $this.attr("href");
$this.attr("href", _href + 'card-id=' + id);
});
});
得到这个
<a href="http://www.test.nl/card-id=1card-id=2"></a>
但我希望有类似
的东西
<a href="http://www.test.nl/result?card_id=1&card_id=2">Card 1</a>
据我了解,您只想获得 "data-id"。如果是,那么您可以通过以下两种方式进行操作:
第一名:
<table id=tbl1><tbody>
<tr class="card-id" data-id="1">
<td>
<a href="http://www.test.nl/">Card 1</a>
<input class="option" type="checkbox" />
</td>
</tr>
<tr class="card-id" data-id="2">
<td>
<a href="http://www.test.nl/">Card 2</a>
<input class="option" type="checkbox" />
</td>
</tr>
<tr class="card-id" data-id="3">
<td>
<a href="http://www.test.nl/">Card 3</a>
<input class="option" type="checkbox" />
</td>
</tr>
var test= $("#tbl1");
test.find('[data-id="qty"]')
这将为您提供 table 的完整 "TR" 行。
如果你想获得"data-id"的值,那么你必须使用
var value = test.attr("data-id");
希望对您有所帮助。
您可以在复选框的更改事件中执行以下操作
var id = [];//create a empty list of ids
var href = "http://www.test.nl/result?card_id=";//create the start of the url
$('input:checked').each(function(){
id.push($(this).closest('.card-id').attr('data-id'));//push the id of the selected to the array
})
href = href+id.join('&card_id=');//join the array to a string
console.log(href)//append the formed link to a link tag or in this case to the console
演示:
$(document).ready(function() {
$('[type=checkbox].option').change(function(ev) {
var id = []; //create a empty list of ids
var href = "http://www.test.nl/result?card_id="; //create the start of the url
$('input:checked').each(function() {
id.push($(this).closest('.card-id').attr('data-id')); //push the id of the selected to the array
})
href = href + id.join('&card_id='); //join the array to a string
console.log(href);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tbody>
<tr class="card-id" data-id="1">
<td>
<a href="http://www.test.nl/">Card 1</a>
<input class="option" type="checkbox" />
</td>
</tr>
<tr class="card-id" data-id="2">
<td>
<a href="http://www.test.nl/">Card 2</a>
<input class="option" type="checkbox" />
</td>
</tr>
<tr class="card-id" data-id="3">
<td>
<a href="http://www.test.nl/">Card 3</a>
<input class="option" type="checkbox" />
</td>
</tr>
</tbody>
</table>
或更好地使用单个命名变量并在后端拆分 ID:
$(document).ready(function() {
$('[type=checkbox].option').change(function(ev) {
var id = []; //create a empty list of ids
var href = "http://www.test.nl/result?card_id="; //create the start of the url
$('input:checked').each(function() {
id.push($(this).closest('.card-id').attr('data-id')); //push the id of the selected to the array
})
href = href + id.join(','); //join the array to a string
console.log(href);
});
$(document).ready(function() {
$('[type=checkbox].option').change(function(ev) {
var id = []; //create a empty list of ids
var href = "http://www.test.nl/result?card_id="; //create the start of the url
$('input:checked').each(function() {
id.push($(this).closest('.card-id').attr('data-id')); //push the id of the selected to the array
})
href = href + id.join(','); //join the array to a string
console.log(href);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tbody>
<tr class="card-id" data-id="1">
<td>
<a href="http://www.test.nl/">Card 1</a>
<input class="option" type="checkbox" />
</td>
</tr>
<tr class="card-id" data-id="2">
<td>
<a href="http://www.test.nl/">Card 2</a>
<input class="option" type="checkbox" />
</td>
</tr>
<tr class="card-id" data-id="3">
<td>
<a href="http://www.test.nl/">Card 3</a>
<input class="option" type="checkbox" />
</td>
</tr>
</tbody>
</table>
$(document).ready(function(){
$('[type=checkbox].option').change(function(ev){
var anchor = $(this).parent('td').first('a')
var url = "http://www.test.nl/result?";
var queryString = '';
$(this).parents('tbody').find('[type=checkbox]:checked').each(function(n,cb){
queryString += 'card_id=' + $(cb).parents('tr.card-id').attr('data-id') + '&';
});
url += queryString.slice(0, -1);;
anchor.attr('href',url);
console.log(url);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tbody>
<tr class="card-id" data-id="1">
<td>
<a href="http://www.test.nl/">Card 1</a>
<input class="option" type="checkbox" />
</td>
</tr>
<tr class="card-id" data-id="2">
<td>
<a href="http://www.test.nl/">Card 2</a>
<input class="option" type="checkbox" />
</td>
</tr>
<tr class="card-id" data-id="3">
<td>
<a href="http://www.test.nl/">Card 3</a>
<input class="option" type="checkbox" />
</td>
</tr>
</tbody>
</table>
假设我有一个 table 看起来像这样:
<table>
<tbody>
<tr class="card-id" data-id="1">
<td>
<a href="http://www.test.nl/">Card 1</a>
<input class="option" type="checkbox" />
</td>
</tr>
<tr class="card-id" data-id="2">
<td>
<a href="http://www.test.nl/">Card 2</a>
<input class="option" type="checkbox" />
</td>
</tr>
<tr class="card-id" data-id="3">
<td>
<a href="http://www.test.nl/">Card 3</a>
<input class="option" type="checkbox" />
</td>
</tr>
</tbody>
</table>
是否可以获取已检查的 table 行的数据 ID,然后将其附加到 url?
我尝试在 js 中使用此代码
$(".option").click(function () {
var id = $(this).closest('.card-id').data('id');
$(".options-count a").each(function () {
var $this = $(this);
var _href = $this.attr("href");
$this.attr("href", _href + 'card-id=' + id);
});
});
得到这个
<a href="http://www.test.nl/card-id=1card-id=2"></a>
但我希望有类似
的东西<a href="http://www.test.nl/result?card_id=1&card_id=2">Card 1</a>
据我了解,您只想获得 "data-id"。如果是,那么您可以通过以下两种方式进行操作:
第一名:
<table id=tbl1><tbody>
<tr class="card-id" data-id="1">
<td>
<a href="http://www.test.nl/">Card 1</a>
<input class="option" type="checkbox" />
</td>
</tr>
<tr class="card-id" data-id="2">
<td>
<a href="http://www.test.nl/">Card 2</a>
<input class="option" type="checkbox" />
</td>
</tr>
<tr class="card-id" data-id="3">
<td>
<a href="http://www.test.nl/">Card 3</a>
<input class="option" type="checkbox" />
</td>
</tr>
var test= $("#tbl1");
test.find('[data-id="qty"]')
这将为您提供 table 的完整 "TR" 行。
如果你想获得"data-id"的值,那么你必须使用
var value = test.attr("data-id");
希望对您有所帮助。
您可以在复选框的更改事件中执行以下操作
var id = [];//create a empty list of ids
var href = "http://www.test.nl/result?card_id=";//create the start of the url
$('input:checked').each(function(){
id.push($(this).closest('.card-id').attr('data-id'));//push the id of the selected to the array
})
href = href+id.join('&card_id=');//join the array to a string
console.log(href)//append the formed link to a link tag or in this case to the console
演示:
$(document).ready(function() {
$('[type=checkbox].option').change(function(ev) {
var id = []; //create a empty list of ids
var href = "http://www.test.nl/result?card_id="; //create the start of the url
$('input:checked').each(function() {
id.push($(this).closest('.card-id').attr('data-id')); //push the id of the selected to the array
})
href = href + id.join('&card_id='); //join the array to a string
console.log(href);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tbody>
<tr class="card-id" data-id="1">
<td>
<a href="http://www.test.nl/">Card 1</a>
<input class="option" type="checkbox" />
</td>
</tr>
<tr class="card-id" data-id="2">
<td>
<a href="http://www.test.nl/">Card 2</a>
<input class="option" type="checkbox" />
</td>
</tr>
<tr class="card-id" data-id="3">
<td>
<a href="http://www.test.nl/">Card 3</a>
<input class="option" type="checkbox" />
</td>
</tr>
</tbody>
</table>
或更好地使用单个命名变量并在后端拆分 ID:
$(document).ready(function() {
$('[type=checkbox].option').change(function(ev) {
var id = []; //create a empty list of ids
var href = "http://www.test.nl/result?card_id="; //create the start of the url
$('input:checked').each(function() {
id.push($(this).closest('.card-id').attr('data-id')); //push the id of the selected to the array
})
href = href + id.join(','); //join the array to a string
console.log(href);
});
$(document).ready(function() {
$('[type=checkbox].option').change(function(ev) {
var id = []; //create a empty list of ids
var href = "http://www.test.nl/result?card_id="; //create the start of the url
$('input:checked').each(function() {
id.push($(this).closest('.card-id').attr('data-id')); //push the id of the selected to the array
})
href = href + id.join(','); //join the array to a string
console.log(href);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tbody>
<tr class="card-id" data-id="1">
<td>
<a href="http://www.test.nl/">Card 1</a>
<input class="option" type="checkbox" />
</td>
</tr>
<tr class="card-id" data-id="2">
<td>
<a href="http://www.test.nl/">Card 2</a>
<input class="option" type="checkbox" />
</td>
</tr>
<tr class="card-id" data-id="3">
<td>
<a href="http://www.test.nl/">Card 3</a>
<input class="option" type="checkbox" />
</td>
</tr>
</tbody>
</table>
$(document).ready(function(){
$('[type=checkbox].option').change(function(ev){
var anchor = $(this).parent('td').first('a')
var url = "http://www.test.nl/result?";
var queryString = '';
$(this).parents('tbody').find('[type=checkbox]:checked').each(function(n,cb){
queryString += 'card_id=' + $(cb).parents('tr.card-id').attr('data-id') + '&';
});
url += queryString.slice(0, -1);;
anchor.attr('href',url);
console.log(url);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tbody>
<tr class="card-id" data-id="1">
<td>
<a href="http://www.test.nl/">Card 1</a>
<input class="option" type="checkbox" />
</td>
</tr>
<tr class="card-id" data-id="2">
<td>
<a href="http://www.test.nl/">Card 2</a>
<input class="option" type="checkbox" />
</td>
</tr>
<tr class="card-id" data-id="3">
<td>
<a href="http://www.test.nl/">Card 3</a>
<input class="option" type="checkbox" />
</td>
</tr>
</tbody>
</table>