Question

我有一个JSON格式的数据，并将其转换为HTML table。现在我想如果选中此复选框，则将文本从False更改为True。我该怎么办？

以下是用于创建HTML表的代码：

$.each(result, function (index, value) { 
  var Data = "<tr>" +
    "<td class='' id='stdID' >" + value.StudentID + "</td>" +
    "<td class='' id='stdRol'>" + value.RollNo + "</td>" +
    "<td class='' id='stdName'>" + value.FirstName + "</td>" +
    "<td class='cbx' value='1'><input  type='checkbox' id='cc"+index+"'><span id='checkbox-value'> False</span></td>" +
    "</tr>";
  SetData.append(Data);

这是由于以下原因造成的：output

Answer 1

要实现所需的功能，需要在页面加载后动态附加行时使用委托事件处理程序，以挂接到复选框的change事件。然后，您可以基于span属性设置同级checked元素的文本。像这样：

$('table').on('change', ':checkbox', function() {
  $(this).next('span').text(this.checked);
});

span.checkbox-value { text-transform: capitalize; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="stdID">value.StudentID</td>
    <td class="stdRol">value.RollNo</td>
    <td class="stdName">value.FirstName</td>
    <td class="cbx" value="1">
      <input type="checkbox" id="cc1">
      <span class="checkbox-value">False</span>
    </td>
  </tr>
  <tr>
    <td class="stdID">value.StudentID</td>
    <td class="stdRol">value.RollNo</td>
    <td class="stdName">value.FirstName</td>
    <td class="cbx" value="1">
      <input type="checkbox" id="cc2">
      <span class="checkbox-value">False</span>
    </td>
  </tr>
</table>

您应注意，您的循环正在创建多个具有相同id的元素，这是无效的HTML。在上面的示例中，我将其更改为类。

Answer 2

另一种实现所需输出的方法

$(document).on('change', '.changeStatus', function() {
  var row = $(this).closest('tr');
  if($(this). prop("checked") == true){
    row.find('.changeValue').html('True');
  } else {
  	row.find('.changeValue').html('False');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Id</td>
      <td>Roll_no</td>
      <td><input type="checkbox" class="changeStatus"></td>
      <td class="changeValue">False</td>
    </tr>
    <tr>
      <td>Id</td>
      <td>Roll_no</td>
      <td><input type="checkbox" class="changeStatus"></td>
      <td class="changeValue">False</td>
    </tr>
    <tr>
      <td>Id</td>
      <td>Roll_no</td>
      <td><input type="checkbox" class="changeStatus"></td>
      <td class="changeValue">False</td>
    </tr>
  </tbody>
</table>

通过单击复选框动态更改表中的文本

2 个答案: