javascript动态给Table添加删除行_javascript table 插入行-优快云博客

本文链接：https://blog.youkuaiyun.com/wangzg30/article/details/4173080

本文介绍了一种使用DOM操作HTML表格的方法，重点讲解了如何通过JavaScript动态地为表格添加和删除行，并提供了一个简单的示例代码。同时，文章还讨论了解决浏览器兼容性问题的策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给Table添加行，用标准的DOM来操作的时候，老是添加不上。虽然用gelElementsByTagName("tr")能得到我加的行。但是在页面上面却没有动态的显示。郁闷的不行，最后才发现，给Table添加行用的是insertRow(),然而删除要用deleteRow(index);

下面这个列子不兼容FF。想在FF下实现这个，也不是很难少许改动就好。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<table id="asp" border="1" celllspacing="0" width="65%" bgcolor="#efefef">
   <tbody>
    <tr>
     <td colspan="2" style="font-weight:bold">当前设置范围列表:</td>
    </tr>
    <tr>
     <td style="font-weight:bold;text-align:center">设置范围</td>
     <td style="font-weight:bold;text-align:center;">是否删除</td>
    </tr>
   </tbody>
</table>
<input type="button" value="add" onclick="addTr('新加上的')" />
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>

弄了一个删除有点问题在FF下面：

<input type="button" value=" 提交 " id="tt" onclick="checkPort(event)">
</form>
<table id="asp" border="1" celllspacing="0" width="65%" bgcolor="#efefef">
<tbody>
<tr>
<td colspan="2" style="font-weight:bold">当前设置范围列表:</td>
</tr>
<tr>
<td style="font-weight:bold;text-align:center">设置范围</td>
<td style="font-weight:bold;text-align:center;">是否删除</td>
</tr>
</tbody>
</table>
<SCRIPT LANGUAGE="JavaScript">
<!--
var si=1;
function addTr(event,s){
if(event.srcElement)
{
var tab=document.getElementById("asp");
var tr=tab.insertRow();
var td1=document.createElement("td");
td1.innerHTML=s;
td1.style.textAlign="center";
var td2=document.createElement("td");
td2.innerHTML="<input type=/"button/" value=/"删除/" onclick=/"document.getElementById('asp').deleteRow(event.srcElement.parentElement.parentElement.rowIndex)/"/>";
td2.style.textAlign="center";
tr.appendChild(td1);
tr.appendChild(td2);
}
else{
var tab=document.getElementById("asp");
var tr=tab.insertRow(-1);
tr.id="t"+si;
si++;
var td1=document.createElement("td");
td1.innerHTML=s;
td1.style.textAlign="center";
var td2=document.createElement("td");
alert(event.target.tagName);
alert(event.target.parentNode.tagName);
alert(event.target.parentNode.parentNode.tagName);
td2.innerHTML="<input type=/"button/" value=/"删除/" onclick=/"document.getElementById('asp').deleteRow("+DOMUtil.getAttribute(document.getElementById(tr.id),"rowindex")+")/"/>";
td2.style.textAlign="center";
tr.appendChild(td1);
tr.appendChild(td2);
}
}
var DOMUtil={};
DOMUtil.getAttribute = function(node, attrName) {
var attributes = node.attributes;
for(var i=0;i<attributes[i].length;i++){
var attr = attributes[i];
    if(attr.nodeName == attrName) {
      return attr.nodeValue;
    }
}
return null;
}
function checkPort(event){
var aa_value=document.getElementById('aa').value;
var bb_value=document.getElementById('bb').value;

if(isNaN(aa_value)||isNaN(bb_value)){
alert("对不起，你输入的范围必须全是数字！");
return;
}else if(aa_value==""||bb_value==""){
alert("对不起，您输入的范围不能有空值！");
return;
}else if(aa_value < 2||aa_value >= 25||bb_value < 2||bb_value >= 25){
alert("对不起，你输入的数字必须是1~25之间的数字,不包括1和25！");
return;
}else if(parseInt(aa_value) < parseInt(bb_value)){
addTr(event,aa_value+"~"+bb_value);
return;
}else{
alert("对不起，左边数字必须小于右边数字");
return;
}
}
//-->
</SCRIPT>
</BODY>
</HTML>