用javascript向table中插入行和删除行
<SCRIPT>
var cInput
function fnAppend(obj)
{
var arr = new Array(5);
arr[0] = "txtA";
arr[1] = "txtB";
arr[2] = "txtC";
arr[3] = "txtD";
arr[4] = "txtE";
//alert(obj.value);
for(var i=0;i<parseInt(obj.value);i++)
{
var trHeader = tbl1.insertRow();
for(var j=1;j<4;j++){
var tdHeader =trHeader.insertCell();
var obj1 = document.createElement("INPUT");
obj1.type = "text";
obj1.name = arr[j]+i;
obj1.onfocus=function(){cInput=this}
tdHeader.appendChild(obj1);
}
var tdHeader2 = trHeader.insertCell();
var obj2 = document.createElement("select");
for(var j=1;j<4;j++){
var objOption = document.createElement("option");
objOption.value = j;
objOption.innerText = "Item " + j;
obj2.insertBefore(objOption,null);
}
obj2.name = "test"+i;
obj2.onfocus=function(){cInput=this}
tdHeader2.appendChild(obj2);
}
}
function document.onmousemove()
{
window.status = "控件 name : "+ event.srcElement.name;
}
//function
function delRow(){
if (cInput!=undefined){
var myTr=getParent(cInput,"TR")
if (myTr!=false){
myTr.parentElement.removeChild(myTr)
cInput=undefined
}
}
}
function getParent(myElement,myTagName){
if (myElement.tagName=="BODY") {return false}
if (myElement.tagName==myTagName){
return myElement;
}
else{return getParent(myElement.parentElement,myTagName)}
}
</SCRIPT>
<BODY>
<INPUT TYPE = "button" VALUE = "5" onclick = "fnAppend(this)" name="button1">
<input type="button" value="点击某一行的任何一个INPUT，然后删除该行" onclick="delRow()">
<form name="form1">
<table id="tbl1" border="1">
</table>
</form>
没有评论:
发表评论