jquery - 使用jquery设置td的值

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

你根本不需要类或 ID。您只需找到最接近已更改元素的行，然后直接访问它的 td 即可:

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