Question

我正在尝试找出最好的方法来生成每行生成的当前隐藏的div，只显示框是否勾选（这些是第二方名称，第二方姓氏和手机号码）

我尝试过的事情：

我最初尝试将它们拆分成单独的行，但是我无法将其用于工作，因为尝试将框检查绑定到唯一的ID是很困难的，因为它们是自动生成的。

我也试过

if ($('input.checkboxAC').prop('checked')) {
          removeAttr( 'hidetopline' );

（hidetopline是div的名称，但是我试图找出如何单独执行此操作，我想删除显示样式：无法正常工作）

我使用的是：bootstrap，jquery

Jquery的

  function displayResult()
  {
      document.getElementById("tableAc").insertRow(-1).innerHTML = '<td class="style1" style="border-color: #FFFFFF"><input type="text" style="width: 150px"/><div class="divhidden" style="display:none"><i><br />2nd Party First Name<i/><br /><input type="text" style="width: 150px" /></div></td><td class="style1" style="border-color: #FFFFFF"><input type="text" style="width: 150px"/><div class="divhidden" style="display:none"><i><br />2nd Party Surname<i/><br /><input type="text" style="width: 150px" /></div></td><td class="style1" style="border-color: #FFFFFF"><input type="text" style="width: 150px"/><div class="divhidden" style="display:none"><i><br />Mobile<i/><br /><input type="text" style="width: 150px" /></div><td class="style1" style="border-color: #FFFFFF"><input type="checkbox" style="width: 150px"/></td></td>';

  }

HTML

<h2>COA Table</h2>
  <table class="table" id="tableAc">
    <thead>
      <tr>
        <th class="style2">Product Type</th>
        <th class="style2">NSC</th>
        <th class="style2">Account Number</th>
        <th class="style2">Joint A/c</th>
      </tr>
    </thead>
    <tbody>
      <tr id="acRow" class="first">
        <td class="style1" style="border-color: #FFFFFF"><input type="text" style="width: 150px"/><div class="divhidden" ><i><br />2nd Party First Name<i/><br /><input type="text" style="width: 150px" /></div></td>
        <td class="style1" style="border-color: #FFFFFF"><input type="text" style="width: 150px"/><div class="divhidden" ><i><br />2nd Party First Name<i/><br /><input type="text" style="width: 150px" /></div></td>
        <td class="style1" style="border-color: #FFFFFF"><input type="text" style="width: 150px"/><div class="divhidden" ><i><br />2nd Party First Name<i/><br /><input type="text" style="width: 150px" /></div></td>
        <td class="style1" style="border-color: #FFFFFF"><input type="checkbox" style="width: 150px" class="checkboxAC"/></td>

      </tr>
    </tbody>
  </table>
          <button type="button" onclick="displayResult()">Add A/c</button>            

</div>

</body>
</html>

Answer 1

当你说你尝试过的时候：

if ($('input.checkboxAC').prop('checked')) {
    removeAttr( 'hidetopline' );

您可以尝试将其替换为：

if ($('input.checkboxAC').prop('checked')) {
    $('#hidetopline')attr( 'display', 'block' );
} else {
    $('#hidetopline')attr( 'display', 'none' );
}

Answer 2

var checkboxfunction = function(){
    var $this = $(this); // this is the checkbox
    var $row = $this.closest("tr") //this is the row
    var $fields = $row.find(".divhidden") // these are the fields
    //if you can't add a class, just build a jQuery collection manually 
    //with the required fields

    //For debug purposes:
    //console.log("I've clicked the checkbox ", $this, " for the row: ", $row, " to ", $this.is(':checked')?"show":"hide", " these fields: ", $fields);

    if ($this.is(':checked')) {
      $fields.show();
    }else{
      $fields.hide();
    }
}

理想情况下，处理程序的绑定方式如下：

$("#tableAc").on("click", "input.checkboxAC", checkboxfunction);

我将该函数绑定到容器，以便不为每个复选框绑定一个函数。这也适用于容器内的dinamically生成的复选框。

如果选中复选框，如何显示每个表格行的div？

Jquery的

HTML

2 个答案: