Regarding table cells clicking_问答_开发者_运维开发者技术经验分享

I have table and I am entering the values dynamically, in that I entered 3 values and 2 images one for delete and one for edit per row, so now if I click the delete image how I can write the code for delete? I tried by using the row id which is dynamically added. Here is my code..

 <!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);

 开发者_Go百科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>

Here you go, a pure javaScript version.

The javaScript:

<script type="text/javascript">

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

</script>

The HTML:

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

I a real-world deployment you should check the input to the function, because if you don't pass in a DOM element you'll get errors, but I figured this is for academic purposes...

It'll work with any element, with your table example you may choose to go up and delete the row as well as the cell, or whatever else you want to do.

You still have access to all the properties/attributes of whatever element it is within your function, so you could so something like window.alert(element.id); or whatever.

Have you considered using the jQuery library? It provides some very clean syntax for this kind of thing. Here is a demo of something very similar to what you're after:

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

You can use the keyword this to represent the current element, which means you can write something like $(this).remove(); to remove the current element.