Question

我有表，我正在动态输入值，因为我输入了3个值，2个图像用于删除，1个用于每行编辑，所以现在如果单击删除图像，我怎么能编写删除代码？我尝试使用动态添加的行ID。这是我的代码..

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">
<html>
 <head>
 <title>Display rows dynamically </title>
 <script type="text/javascript">
 var sname=new Array();
 var sage=new Array();
 var sclass=new Array();
 var j=1;
 var cellref;
 var idnum=1;
 var prev=0;
 var i=0;
 var count=1;
function goSave()
{
sname.push(document.f1.tname.value);
sage.push(document.f1.tage.value);
sclass.push(document.f1.tclass.value);
document.getElementsByTagName('input')[0].value="";
document.getElementsByTagName('input')[1].value="";
document.getElementsByTagName('input')[2].value="";
document.f1.tname.focus();
}
function show()
{
if(sname.length==0)
{
alert("There are no items to display..");
return ;
}
if(sname.length!=0)
{
 document.getElementById('mytable').style.visibility ='visible' ;
 var table=document.getElementById('mytable');

 var rowcount=table.rows.length;
 for (var rnum=0;rnum<sname.length;rnum++ )
 {
 var row=table.insertRow(i+1);
 i++;
 row.id=idnum;
 idnum++;
 var cell1=row.insertCell(0);
 var cell2=row.insertCell(1);
 var cell3=row.insertCell(2);
 var cell4=row.insertCell(3);
 var cell5=row.insertCell(4);
 //alert(table.rows.length);

 cell1.innerHTML=sname[rnum];
 cell2.innerHTML=sage[rnum];
 cell3.innerHTML=sclass[rnum];
 var elm1=document.createElement('img');
 elm1.src="icondelete.gif";
 elm1.title="delete this";
 elm1.style.cursor="hand";
 cell4.appendChild(elm1);
 //cell4.onclick=function(){ alert("Clicked"); }
 row.onclick=function(){ 
          rowdel(this.id);
          }; 

 var elm2=document.createElement('img');
 elm2.src="edit.gif";
 elm2.title="Edit this";
 elm2.style.cursor="hand";
 cell5.appendChild(elm2);

 }
 //alert(table.rows[1].cells[3].innerText);
 sname.splice(0,sname.length);
 sage.splice(0,sage.length);
 sclass.splice(0,sclass.length);
 }

}
function rowdel(id)
{
 //alert("id is this is **** :" +id);
 var tabid=document.getElementById('mytable');
 alert(tabid.rows[1].cells[3].isclicked)
 /*if(tabid.rows[1].cells[3].click())
  alert("working");
 else
  alert("Not working");*/



}

 </script>
 </head>
 <body>
  <form name="f1"> <!-- onload="hidetable(),document.f1.tname.focus()"> -->
  <table>
<tr><th>Name:</th><td><input type="text" name="tname" size="15"></td></tr>
<tr><th>Age:</th><td><input type="text" name="tage" size="15"></td></tr>
<tr><th>Class:</th><td><input type="text" name="tclass" size="15"></td></tr>
<tr><td><input type="button" value="Save" onClick="goSave()"></td>
<td><input type="button" value="show" onClick="show()"></td></tr>
</table>
<table border=1 name="stable" id="mytable" style="visibility:hidden">
<tr><th>Name</th><th>Age</th><th>Class</th><th>Delete</th><th>Edit</th></tr>
</table>
</form>
</body>
</html>

Answer 1

这是一个纯javaScript版本。

javaScript：

<script type="text/javascript">

    function removeObject(element) {
        element.parentNode.removeChild(element);
    }

</script>

HTML：

<div onclick="removeObject(this)">Click to remove me</div>

我是一个真实世界的部署，你应该检查函数的输入，因为如果你没有传入DOM元素，你会得到错误，但我认为这是出于学术目的......

它适用于任何元素，使用您的表格示例，您可以选择上移并删除行以及单元格或其他任何您想要执行的操作。

您仍然可以访问函数中所有元素的所有属性/属性，因此您可以使用window.alert(element.id);或类似的东西。

Answer 2

您是否考虑过使用jQuery库？它为这种事情提供了一些非常干净的语法。这是一个非常类似于你所追求的东西的演示：

http://api.jquery.com/remove/

您可以使用关键字this来表示当前元素，这意味着您可以编写类似$(this).remove();的内容来删除当前元素。

关于表格单元格点击

2 个答案: