使用js或jQuery将data-id附加到href

Append data-id to href using js or jQuery

本文关键字：href data-id js jQuery 使用      更新时间：2023-09-26

假设我有一个这样的表:

<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，然后将这些附加到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>


$(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>

您可以在复选框

的更改事件中执行以下操作
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>

根据我的理解，您只是想获得"data-id"。如果是，那么你可以用下面列出的两种方法来做:

1: 

<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"]')

这将为您提供表的完整"TR"行。

如果你想获得data-id的值那么你必须使用

var value = test.attr("data-id");

希望这对你有帮助。

相关文章：