javascript - javascriptでチェックボックスを使用して複数の行を追加/削除する

Question

私が取り組んでいるjavascriptに行き詰まっています。フィールドを動的に追加したいのですが、私の問題は、入力ボックスで行を追加できるようにしたいということです。追加された行内で、最初の列にはチェックボックスが含まれ、2 番目の列にはインクリメント番号が含まれ、3 番目の列には入力 txtbox が含まれ、4 番目の列はcheckbox1、5 番目の列には入力 txtbox1 が含まれ、6 番目の列には入力 txtbox3 が含まれます。ここで私の質問は、チェックボックス、txtboxとの位置合わせを維持しながら、4列目checkbox1、5列目txtbox1、6列目txtbox3の下に2行目を動的に追加するにはどうすればよいですか? また、追加された行内に、可能であれば、行の追加と行の削除の 2 つのボタンが必要です。これは実行されますが、私が期待したくないスニペットです:

    <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 - javascriptでチェックボックスを使用して複数の行を追加/削除する

1 に答える 1

Related

Reference