Question

我坚持使用javascript工作。我想动态添加更多字段，我的问题是我希望能够添加带输入框的行。在添加的行中，第一列包含复选框，第二列包含增量编号，第三列包含输入txtbox，第四列为checkbox1，第五列包含输入txtbox1，第六列包含输入txtbox3。现在我的问题是，我如何在第四列checkbox1，第五列txtbox1和第六列txtbox3下添加dynamicaly第二行，同时保持与checkbox，txtbox的对齐？在添加的行中，如果可能的话，它必须有两个按钮，添加行和删除行。这是运行但不希望我想要的片段：

    <HTML>
<HEAD>
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
    <SCRIPT language="javascript">
        function addRow(tableID) {
            var i=0;
            i++;

            var table = document.getElementById(tableID);           

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

            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "checkbox";
            element1.name="chkbox[]";
            cell1.appendChild(element1);


            var cell2 = row.insertCell(1);
            cell2.innerHTML = rowCount + 0;

            var cell3 = row.insertCell(2);
            var element2 = document.createElement("input");
            element2.type = "text";
            element2.name = "txtbox[]";
            cell3.appendChild(element2);


            var cell4 = row.insertCell(3);
            var element4 = document.createElement("input");
            element4.type = "checkbox";
            element4.name="chkbox[]";
            cell4.appendChild(element4);



            var cell5 = row.insertCell(4);
            cell5.innerHTML = rowCount -1;

            var cell6 = row.insertCell(5);
            var element5 = document.createElement("input");
            element5.type = "text";
            element5.name = "txtbox1[]";
            cell6.appendChild(element5);            


            var cell7 = row.insertCell(6);
            var element6 = document.createElement("input");
            element6.type = "text";
            element6.name = "txtbox2[]";
            cell7.appendChild(element6);

            var cell8 = row.insertCell(7);
            var element7 = document.createElement("input");
            element7.type = "text";
            element7.name = "txtbox3[]";
            cell8.appendChild(element7);

        }

        function addVillageNames()
        {

            }

        function removeVillageNames()
        {

            }

        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) {
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }


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



    </SCRIPT>
</HEAD>
<BODY>
<form action="Untitled-2.php" name="Untitled-2" method="post">
<table width="760" id="dataTable" border="1">
    <tr>
            <TD width="22" rowspan="2"><INPUT type="checkbox" name="chk"/></TD>
            <TD width="12" rowspan="2"> 1 </TD>
            <TD width="149" rowspan="2"> <INPUT type="text" name="txtbox[]" /> </TD>

            <TD width="20"><INPUT type="checkbox" name="chk1"/></TD>
            <TD width="12"> 1 </TD>
            <TD width="200"> <INPUT type="text" name="txtbox1[]" /></TD>
            <TD width="146"> <INPUT type="text" name="txtbox2[]" /> </TD>
            <TD width="188"> <INPUT type="text" name="txtbox3[]" /> </TD>

  </TR>
    <tr>
      <TD width="20">&nbsp;</TD>
      <TD width="12">&nbsp;</TD>
      <TD><input type="button" value="Add Row1" onClick="addRow1('dataTable')" />&nbsp;<input type="button" value="Delete Row1" onClick="deleteRow1('dataTable')" /></TD>
      <TD width="146">&nbsp;</TD>
      <TD width="188">&nbsp;</TD>
    </TR>

    </TABLE>
    <tr>
    <td>
   <input type="button" value="Add Row" onClick="addRow('dataTable')" />

<input type="button" value="Delete Row" onClick="deleteRow('dataTable')" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
</form>
</BODY>
</HTML>

Answer 1

尽管我喜欢普通/普通javascript，但我还是要为你的下一个项目推荐jQuery。这是仅使用普通/普通javascript的jsfiddle代码。

这是您需要的JavaScript功能

function hasClass(el, cssClass) {
  return el.className && new RegExp("(^|\\s)" + cssClass + "(\\s|$)").test(el.className);
}

var rowNumber = 1;

function addRow(tableID) {
  var counter = document.getElementById(tableID).rows.length-1;
  var row = document.getElementById(tableID);
  var newRow0 = row.rows[1].cloneNode(true);
  var newRow1 = row.rows[counter].cloneNode(true);

  // Increment
  rowNumber ++;
  newRow0.getElementsByTagName('td')[1].innerHTML = rowNumber;

  // Update the child Names
  var items = newRow0.getElementsByTagName("input");
  for (var i = 0; i < items.length; i++) {
    items[i].value = null;
    items[i].name = counter + '_' + items[i].name;
  }

  var refRow = row.getElementsByTagName('tbody')[0];
  refRow.insertBefore(newRow0, refRow.nextSibling);
  refRow.insertBefore(newRow1, refRow.nextSibling);
}

function deleteRow(tableID) {
  var table =  document.getElementById(tableID);
  var i = table.rows.length - 1;

  while (2 < i && !hasClass(table.rows[i], 'row-parent')) {
    table.deleteRow(i)
    i--;
  }
  if (2 < i) {
    table.deleteRow(i)
    rowNumber --;
  }
}

function addChildRow(e, tableID) {
  var table = document.getElementById(tableID);
  var newRow = table.rows[0].cloneNode(true);

  // Increment
  if (e > 0)

  if (!isNaN(table.rows[e-1].getElementsByTagName('td')[4].innerHTML)) 
    var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[4].innerHTML)
  else
    var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[1].innerHTML)

  newRow.getElementsByTagName('td')[1].innerHTML = counter + 1;

  // Update the child Names
  var items = newRow.getElementsByTagName("input");
  for (var i = 0; i < items.length; i++) {
    items[i].value = null;
    items[i].name = counter + '_' + items[i].name;
  }

  var i = e;
  while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
    i--;

  var parent = table.rows[i].getElementsByTagName('td');
  parent[0].rowSpan = counter+2;
  parent[1].rowSpan = counter+2;
  parent[2].rowSpan = counter+2;

  var refRow = table.getElementsByTagName('tr')[e-1];
  refRow.parentNode.insertBefore(newRow, refRow.nextSibling);
}


function deleteChildRow(e, tableID) {
  var table =  document.getElementById(tableID);
  var i = e;

  while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
    i--;

  if (e-1 > i)
    table.deleteRow(e-1)
}

这是HTML

<form action="Untitled-2.php" name="dataTable" method="post">
  <table width="760" id="dataTable" border="1">
    <tr>
      <td width="20">
        <input type="checkbox" name="chk1" />
      </td>
      <td width="12">1</td>
      <td width="200">
        <input type="text" name="txtbox1[]" />
      </td>
      <td width="146">
        <input type="text" name="txtbox2[]" />
      </td>
      <td width="188">
        <input type="text" name="txtbox3[]" />
      </td>
    </tr>

    <tr class="row-parent">
      <td width="22" rowspan="2">
        <input type="checkbox" name="chk" />
      </td>
      <td width="12" rowspan="2">1</td>
      <td width="149" rowspan="2">
        <input type="text" name="txtbox[]" />
      </td>
      <td width="20">
        <input type="checkbox" name="chk1" />
      </td>
      <td width="12">1</td>
      <td width="200">
        <input type="text" name="txtbox1[]" />
      </td>
      <td width="146">
        <input type="text" name="txtbox2[]" />
      </td>
      <td width="188">
        <input type="text" name="txtbox3[]" />
      </td>
    </tr>
    <tr>
      <td width="20">&nbsp;</td>
      <td width="12">&nbsp;</td>
      <td>
        <input type="button" value="+ Child Row" onClick="addChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
        <input type="button" value="- Child Row" onClick="deleteChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
      </td>
      <td width="146">&nbsp;</td>
      <td width="188">&nbsp;</td>
    </tr>
  </table>
  <input type="button" value="Add Row" onClick="addRow('dataTable')" />
  <input type="button" value="Delete Row" onClick="deleteRow('dataTable')" />
</form>

这是隐藏第一行的CSS：

table tr:first-child {
  display: none;
}

使用带有javascript的复选框添加/删除多行

1 个答案: