使用jquery设置td的值 [英] Set the value of a td using jquery

问题描述

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

From the check box which is in each row, if it is checked I want to update the table data value for that row. I tried with:

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

但它不起作用。我通过以下方式访问ID：

But it is not working. I access the ID by:

            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>

推荐答案

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

Use classes instead of IDs for the elements that are repeated on each row. Then make the selector look for the class in the selected row.

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

这篇关于使用jquery设置td的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！