0
我有一張表,我在其中動態添加和刪除行。這是我寫的代碼從表中刪除最後一行時顯示警報窗口
<SCRIPT TYPE="text/javascript">
var count = "2";
function addRow(in_tbl_name)
{
var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
// create row
var row = document.createElement("TR");
// create first col
var td1 = document.createElement("TD")
var strHtml1 = "This is the line number " + count;
td1.innerHTML = strHtml1.replace(/!count!/g,count);
// create second col
var td2 = document.createElement("TD")
var strHtml2 = "<INPUT TYPE='Button' CLASS='Button' onClick='delRow()' VALUE='Delete Row'>";
td2.innerHTML = strHtml2.replace(/!count!/g,count);
// append data to row
row.appendChild(td1);
row.appendChild(td2);
// add to count variable
count = parseInt(count) + 1;
// append row to table
tbody.appendChild(row);
}
function delRow()
{
var current = window.event.srcElement;
//here we will delete the line
while ((current = current.parentElement) && current.tagName !="TR");
current.parentElement.removeChild(current);
}
</SCRIPT>
這裏是HTML元素的代碼。
<div id="container">
<INPUT TYPE="Button" onClick="addRow('tblPets')" VALUE="Add Row">
<TABLE ID="tblPets" border="1" STYLE="border width:1 orange dashed;background color:#F0E68C;table-row width:2;">
<TR><TD>Frist col</TD><TD>Second col</TD></TR>
<TR><TD>This is the line number 1.</TD><TD><INPUT TYPE="Button" CLASS="Button" onClick="delRow()" VALUE="Delete Row"></TD></TR>
</TABLE>
</div>
到目前爲止一切工作正常。我想不出如何完成的最後一步是,當我從表格中刪除每一行時,將出現一條警告消息,說明alert("Table is empty");
。
我怎麼能這樣做?如何讓我的delRow()
函數了解表何時完全清空?
任何幫助將不勝感激。
如果(current.parentElement.rows.length == o)... – mplungjan