0
私はテーブルを持っていると私は3値と2つの1つの行を編集するための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>
私はjqueryを使いたいと思っていますが、javascriptのみで削除するだけですが、削除するだけで編集することもできます。どのセルをクリックしたのかわかりにくいです。助けを求めています – Sowri
jQueryはjavascriptのみです...一般的なタスクを簡単にするためのjavascript関数のライブラリです。同じことをすることなく、最も簡単な方法はthisキーワードを使用して、現在の要素またはそのプロパティの1つ、つまりonclick = "removeElement（this）"を関数に渡し、関数が渡された要素で機能するようにすることですid値よりもむしろ。サードパーティのライブラリを使用するだけで、ホイールの再発明を回避できます。 – RichardW1001
しかし、私の先生はjavascriptでのみ行うこのタスクを与えました.. :( – Sowri