Задайте значение td с помощью jquery

Question

Из флажка, который находится в каждой строке, если он установлен, я хочу обновить значение данных таблицы для этой строки. Я пробовал с:

$('#'+id).each(function(index, cell){ 
     $('#data2').html("New Value"); 
    }); 

Но он не работает. Я доступ к ID по:

  if ($('.cbox1:checked').length) { 
         var id = ''; 
         $('.cbox1:checked').each(function() { 
         id = $(this).val(); 
         }); 
       } 

Мой Html является

 <table class="mytable" id="tableid" > 
     <tr> 
      <th style="width: 10px;"> </th> 
      <th> DATA1</th> 
      <th>DATA2</th> 
      <th>DATA3 </th> 
     </tr> 
     <tr contenteditable="false" class="content193" id="193"> 
      <td> <input class="cbox1" type="checkbox" value="193"></td> 
      <td id="data1">45</td> 
      <td id="data2">566</td> 
      <td id="data3"> 12.12.2016</td> 
     </tr> 
     <tr contenteditable="false" class="content194" id="194"> 
      <td><input class="cbox1" type="checkbox" value="194"></td> 
      <td id="data1">456</td> 
      <td id="data2">6745</td> 
      <td id="data3"> 11.10.2016</td> 
     </tr> 
     <tr contenteditable="false" class="content199" id="199"> 
      <td><input class="cbox1" type="checkbox" value="199"></td> 
      <td id="data1">tr</td> 
      <td id="data2">24</td> 
      <td id="data3"> 20.01.2015</td> 
     </tr> 
     <tr contenteditable="false" class="content201" id="201"> 
      <td><input class="cbox1" type="checkbox" value="201"></td> 
      <td id="data1">tr</td> 
      <td id="data2">24</td> 
      <td id="data3"> 20.01.2015</td> 
     </tr> 
    </table> 

Answer 1

Используйте классы вместо идентификаторы для элементов, которые повторяются на каждой строке. Затем заставьте селектор искать класс в выбранной строке.

$("#doit").click(function() { 
 
    $('.cbox1:checked').each(function() { 
 
    var id = $(this).val(); 
 
    $('#' + id + ' .data2').html("New Value"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="mytable" id="tableid"> 
 
    <tr> 
 
    <th style="width: 10px;"></th> 
 
    <th>DATA1</th> 
 
    <th>DATA2</th> 
 
    <th>DATA3</th> 
 
    </tr> 
 
    <tr contenteditable="false" class="content193" id="193"> 
 
    <td> 
 
     <input class="cbox1" type="checkbox" value="193"> 
 
    </td> 
 
    <td class="data1">45</td> 
 
    <td class="data2">566</td> 
 
    <td class="data3">12.12.2016</td> 
 
    </tr> 
 
    <tr contenteditable="false" class="content194" id="194"> 
 
    <td> 
 
     <input class="cbox1" type="checkbox" value="194"> 
 
    </td> 
 
    <td class="data1">456</td> 
 
    <td class="data2">6745</td> 
 
    <td class="data3">11.10.2016</td> 
 
    </tr> 
 
    <tr contenteditable="false" class="content199" id="199"> 
 
    <td> 
 
     <input class="cbox1" type="checkbox" value="199"> 
 
    </td> 
 
    <td class="data1">tr</td> 
 
    <td class="data2">24</td> 
 
    <td class="data3">20.01.2015</td> 
 
    </tr> 
 
    <tr contenteditable="false" class="content201" id="201"> 
 
    <td> 
 
     <input class="cbox1" type="checkbox" value="201"> 
 
    </td> 
 
    <td class="data1">tr</td> 
 
    <td class="data2">24</td> 
 
    <td class="data3">20.01.2015</td> 
 
    </tr> 
 
</table> 
 
<button id="doit">Click me</button>

Answer 2

Вы действительно не нужны классы или идентификаторы вообще. Вы можете просто найти строку ближе к измененному элементу и просто получить доступ к его td s непосредственно:

$('.cbox1').change(function(){ 
 
    
 
    var $row = $(this).closest('tr'); //get the current row 
 
    
 
    $row.find('td').eq(1).text('new value'); // change first cell 
 
    $row.find('td').eq(2).text('new value'); // change second cell 
 
    $row.find('td').eq(3).text('new value'); // change third cell 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="mytable" id="tableid" > 
 
     <tr> 
 
      <th style="width: 10px;"> </th> 
 
      <th> DATA1</th> 
 
      <th>DATA2</th> 
 
      <th>DATA3 </th> 
 
     </tr> 
 
     <tr contenteditable="false" class="content193" id="193"> 
 
      <td> <input class="cbox1" type="checkbox" value="193"></td> 
 
      <td>45</td> 
 
      <td>566</td> 
 
      <td> 12.12.2016</td> 
 
     </tr> 
 
     <tr contenteditable="false" class="content194" id="194"> 
 
      <td><input class="cbox1" type="checkbox" value="194"></td> 
 
      <td>456</td> 
 
      <td>6745</td> 
 
      <td> 11.10.2016</td> 
 
     </tr> 
 
     <tr contenteditable="false" class="content199" id="199"> 
 
      <td><input class="cbox1" type="checkbox" value="199"></td> 
 
      <td>19</td> 
 
      <td>24</td> 
 
      <td> 20.01.2015</td> 
 
     </tr> 
 
     <tr contenteditable="false" class="content201" id="201"> 
 
      <td><input class="cbox1" type="checkbox" value="201"></td> 
 
      <td>15</td> 
 
      <td>24</td> 
 
      <td> 20.01.2015</td> 
 
     </tr> 
 
    </table>