时间戳

首页 > 解决方案 > 通过单击复选框动态更改表格中的文本

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

问题描述

我有一个 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);

这是这样的结果：输出

标签： javascriptjqueryjsonajax

解决方案

为了实现您的要求，您需要使用委托的事件处理程序，因为您在页面加载后动态附加行，以挂钩到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。在上面的示例中，我将它们改为类。

推荐阅读