Question

我在计算行模块时遇到问题。我制作了2个模块，模块1和2.当我删除模块2，然后添加另一个模块，而不是添加模块2（就像它应该），它继续计数模块3，跳过现在删除的模块2。 /> 这是我的代码：

 <html>
<head>
<style type="text/css">
table {border-collapse:collapse;}
.tf{border-bottom:0;}
</style>
<SCRIPT TYPE="text/javascript">
var num=1;
  function addmodule(in_tbl_name)
  {
    var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
var row1 = document.createElement("TR");
// create table cell 1
var td = document.createElement("TD")
td.setAttribute('colspan',5);
td.bgColor="#A7B8D4";
td.innerHTML = "<label style=\"width:570; background-color:#A7B8D4; color:white;\">"+"Module "+num+"</label>";
row1.appendChild(td);
// add to count variable
num = parseInt(num) + 1;
// append row to table
tbody.appendChild(row1);
  }
    var count=1;
  function addRow(in_tbl_name)
  {
var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
// create row
var row = document.createElement("TR");
var td1 = document.createElement("TD")
var strHtml1 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"5\" MAXLENGTH=\"255\" class=\"textborder\';\">";
td1.innerHTML=strHtml1 ;
var td2 = document.createElement("TD")
var strHtml2 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"30\" MAXLENGTH=\"255\" class=\"textbordersmall\';\">";
td2.innerHTML=strHtml2;
var td3 = document.createElement("TD")
var strHtml3 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"5\" MAXLENGTH=\"255\" class=\"textbordersmall\';\">";
td3.innerHTML=strHtml3 ;
var td4 = document.createElement("TD")
var strHtml4 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"5\" MAXLENGTH=\"255\" class=\"textbordersmall\';\">";
td4.innerHTML=strHtml4 ;
// append data to row
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
// add to count variable
count = parseInt(count) + 1;
// append row to table
tbody.appendChild(row);
  }
  function deleterow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount==1) {return false;
}
else{
table.deleteRow(rowCount -1);
}}
</SCRIPT> 
</head>
<body>
<TABLE ID="tbl" width="570" border="1" cellspacing="0" cellpadding="0" align="center" class="st">
<TH WIDTH="400">Content</TH><TH WIDTH="57">CLO</TH><TH WIDTH="57">PLO</TH>        <TH WIDTH="56">Week</TH>
<p align="center">
<input type="button" onClick="addmodule('tbl')" VALUE="Add Module"> &nbsp;&nbsp;
<INPUT TYPE="Button" onClick="addRow('tbl')" VALUE="Add Row">&nbsp;&nbsp;
<INPUT TYPE="Button" onClick="deleterow('tbl')" VALUE="delete Row">    </p>&nbsp;&nbsp;
</TABLE>
</body>
</html>

enter image description here

Answer 1

您正在使用num变量来跟踪模块的数量。每次添加新模块但从不递减时，Num会递增。尝试添加num--;到删除函数的末尾。

Answer 2

我加了num--;在删除功能的最后但是还有另一个问题，它会添加一个错误的数字应该增加的数量，请参阅图像以获取更多描述。 enter image description here

Answer 3

一个明智的解决方案是将类“模块”添加到“模块”行。然后，当您添加模块时，您将计算“模块”行的数量。

function createRow(content) {
    var new_row = document.createElement('tr'), 
        new_cell = document.createElement('td');

    if (typeof content === 'string') {
      new_cell.innerHTML = content;
    } else {
      new_cell.appendChild(content);
    }
    new_row.appendChild(new_cell);  
    return new_row;
}

function addModule(table_id) {
    var label = document.createElement('label'),
        row,
        table = document.getElementById(table_id),
        tbody = table.getElementsByTagName('tbody')[0],
        count;
    
    // A lot going on here:
    // We get all the elements with the class "module"
    // and count them - we then drop the leading zero by turning it into an integer.
    count = parseInt(tbody.getElementsByClassName('module').length + 1);
    label.innerText = 'Module ' + count;
    row = createRow(label);
    row.className = 'module';
    tbody.appendChild(row);
    return row;
}

// Handle when the user clicks button
document.getElementById('addModule').onclick = function(){ addModule('tbl'); };

#tbl {}

#tbl .module {
    background-color: #A7B8D4;
}

#tbl .module label {
    width: 570px; 
    background-color:#A7B8D4; 
    color:white;
}

<table id="tbl">
    
    <tbody>
        <tr><td>Hello</td></tr>
        <tr><td>Hello</td></tr>
    </tbody>
</table>

<p align="center">
    <input type="button" id="addModule" value="Add Module" /> 
</p>

请注意，为简洁起见，这不包括不支持getElementsByClassName的旧版浏览器的回退。

删除后编辑已添加行的计数

3 个答案: