使用 jquery 设置 td 的值

Question

从每行的复选框中，如果选中，我想更新该行的 table 数据值。我试过：

$('#'+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

对每行重复的元素使用 classes 而不是 ID。然后让选择器在所选行中查找 class。

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

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

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

使用 jquery 设置 td 的值

Set the value of a td using jquery

jquery

html-table