在动态表中提交行数据

时间:2016-10-07 20:21:46

标签: javascript html dom

我用复选框创建了一个动态表。我只想将选中行中的数据提交给表单。我尝试使用复选框数组索引,但这不起作用。如何仅在选中的行中提交数据?



function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  if (rowCount < 5) {
    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;
    }
  } else {
    alert("Maximum number of extra data is 5.");
  }
}


function deleteRow(tableID) {
  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 remove all.");
        break;
      }
      table.deleteRow(i);
      rowCount--;
      i--;
    }
  }
}
&#13;
<p>
  <input type="button" value="Add Option" onClick="addRow('dataTable')" />
  <input type="button" value="Remove Option" onClick="deleteRow('dataTable')" />
  <table id="dataTable">
    <tbody>
      <tr>
        <p>
          <td>
            <input type="checkbox" required="required" name="chk[]" checked="checked" />
          </td>
          <td>
            <label>Name of Data:</label>
            <input type="text" name="dataName">
          </td>
          <td>
            <label>Data:</label>
            <input type="text" name="data">
          </td>
        </p>
      </tr>
    </tbody>
  </table>
&#13;
&#13;
&#13;

0 个答案:

没有答案