我如何添加一个复选框，在选中时打开textarea，单击添加按钮时会出现一个新行

Question

我想构建一个按钮，在单击时打开一个具有相同输入字段的新行。还有一个复选框，用于打开textarea以在单击时写入备注。添加行有效，但复选框可以正常工作。

我希望textarea出现在行的下方，并且每行的工作方式应该相同。

这是我的代码：

＆＃13;

＆＃13;

function addRow(tableID) {

  var table = document.getElementById(tableID);

  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);

  var colCount = table.rows[0].cells.length;

  for (var i = 0; i < colCount; i++) {

    var newcell = row.insertCell(i);

    newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    //alert(newcell.childNodes);
    switch (newcell.childNodes[0].type) {
      case "text":
        newcell.childNodes[0].value = "";
        break;
      case "checkbox":
        newcell.childNodes[0].checked = false;
        break;
      case "select-one":
        newcell.childNodes[0].selectedIndex = 0;
        break;

    }
  }
}

function deleteRow(tableID) {
  try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for (var i = 0; i < rowCount; i++) {
      var row = table.rows[i];
      var chkbox = row.cells[0].childNodes[0];
      if (null != chkbox && true == chkbox.checked) {
        if (rowCount <= 1) {
          alert("Cannot delete all the rows.");
          break;
        }
        table.deleteRow(i);
        rowCount--;
        i--;
      }


    }
  } catch (e) {
    alert(e);
  }
}

function ShowHideDiv(chkPassport) {
  var dvPassport = document.getElementById("dvPassport");
  dvPassport.style.display = chkPassport.checked ? "block" : "none";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-primary">
  <div class="panel-body">
    <input type="button" value="Add Row" onclick="addRow('dataTable')" />

    <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
    <table id="dataTable" width="100%" border="0">

      <tr>
        <td style="padding-top: 20px;"><input type="checkbox" name="chk" /></td>
        <td><label>Product Type</label><br /><input class="form-control" type="text" name="ProType" placeholder="Product Type" /></td>
        <td><label>Handled By</label><br /><input class="form-control" type="text" name="HandledBy" placeholder="Handled By" /></td>
        <td><label>Completion Date</label><br /><input class="form-control" type="date" name="ComDate" placceholder="Completion Date" /></td>
        <td><label>Amount</label><br /><input class="form-control" type="text" name="Amount" placeholder="Amount" /></td>
        <td><label>Remarks</label><br /><input class="form-control" type="checkbox" name="chk2" /></td>
        <td><label for="chkPassport">
                                        <input type="checkbox" id="chkPassport" onclick="ShowHideDiv(this)" />
                                        Do you have Passport?
                                    </label>
        </td>
        <td id="dvPassport" style="display: none"><input type="text" id="txtPassportNumber" /></td>



      </tr>
    </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;