Question

我有一个有两个按钮的表（添加和删除）。该表包含三列（一个复选框，一个文本字段和一个下拉框。）因此，当我单击“添加”按钮时，插入一个新复选框，一个文本字段和一个下拉框。我想要做的是添加一个包含Serial-No的列。 serial-No应该随着每一个新行而增加。喜欢...... 1,2,3,4等。然后，当我想要删除一行时，我会勾选复选框上的标记，然后按删除按钮，该特定行将被删除。 serial-No应该重新安排。我的代码如下：

HTML

<div class="container">
  <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
  <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

<TABLE id="dataTable" width="350px" border="1">
    <TR>
        <TD><INPUT type="checkbox" name="chk"/></TD>
        <TD><INPUT type="text" name="txt"/></TD>
        <TD>
            <SELECT name="country">
                <OPTION value="in">India</OPTION>
                <OPTION value="de">Germany</OPTION>
                <OPTION value="fr">France</OPTION>
                <OPTION value="us">United States</OPTION>
                <OPTION value="ch">Switzerland</OPTION>
            </SELECT>
        </TD>
    </TR>
</TABLE>

的Javascript

 <SCRIPT language="javascript">
       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;
            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);
        }
    }
</SCRIPT>

Answer 1

＆＃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);
            if(i==1){newcell.innerHTML = (rowCount+1)}
            else{
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
               }
            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 regroup(i,rc,ti)
{
  for(j = (i+1);j<rc;j++)
    {
      document.getElementById(ti).rows[j].cells[1].innerHTML = j+1;
      }
}
function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var current = '';
        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--;
              regroup(i,rowCount,tableID);
            }
        }
        }catch(e) {
            alert(e);
        }
    }

＆＃13;

<div class="container">
  <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
  <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

<TABLE id="dataTable" width="350px" border="1">
    <TR>
        <TD><INPUT type="checkbox" name="chk"/></TD>
      <TD><span name = "num">1</span></TD>
        <TD><INPUT type="text" name="txt"/></TD>
        <TD>
            <SELECT name="country">
                <OPTION value="in">India</OPTION>
                <OPTION value="de">Germany</OPTION>
                <OPTION value="fr">France</OPTION>
                <OPTION value="us">United States</OPTION>
                <OPTION value="ch">Switzerland</OPTION>
            </SELECT>
        </TD>
    </TR>
</TABLE>

＆＃13;

尝试上述方法，看看它是否适合您，我刚才和一个数字的单元格，然后当创建一个新行时，新列中该单元格的值由新创建的行添加的行数1给出我也有包括一个函数来更新删除列之后每行的序列号单元格的值。

如何在Javascript表

1 个答案: