shychotc shychotc - 1 month ago 11
Javascript Question

Append data-id to href using js or jQuery

Suppose I have a table that looks like this:

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


Is it possible to get the data-id of the table row which have are checked then append these to the url?

I tried using this code in 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);
});
});


and got this

<a href="http://www.test.nl/card-id=1card-id=2"></a>


but I was hoping for something like

<a href="http://www.test.nl/result?card_id=1&card_id=2">Card 1</a>

Answer

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