javascript - add/remove multiple rows using checkbox with javascript

Question

I'm stuck with javascript I working on. I want to add more fields dynamically, my problem is I want to be able to add a row with input boxes. Within the added row, first column contain checkbox, second column contain an increment number, third column contain input txtbox, fourth column checkbox1, fifth column contain input txtbox1 and sixth column contain input txtbox3. Now my question is, how would I add dynamicaly second row under fourth column checkbox1, fifth column txtbox1 and sixth column txtbox3 while maintaing alignment with checkbox,txtbox? And within the added row, if possible it have to have two button, add row and delete row. Here is snippet which runs but doesn't do want I expecting:

    <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>

score 0 · Accepted Answer

尽管我很喜欢普通/香草 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 - add/remove multiple rows using checkbox with javascript

1 回答 1

Related

Reference