JS 动态增加删除表格

最新推荐文章于 2023-03-27 15:57:49 发布

最新推荐文章于 2023-03-27 15:57:49 发布 · 156 阅读

文章标签：

#J# #ASP #JavaScript #C #C++ #ViewUI

<HTML>

<HEAD>

//--------------------------删除行开始--------------------------------------

function DeleteRow(obj)

{

//删除行

//index插入的位置

alert("Table1的行数:"+obj.rows.length+"\n"+"Table1的列数:"+obj.rows(0).cells.length);

if(obj.rows.length>1)

{

obj.deleteRow(obj.rows.length-1);

}

//--------------------------删除行结束--------------------------------------

//--------------------------插入行开始--------------------------------------

function InsertRow(obj)

{

//插入行

//index插入的位置

alert("Table1的行数:"+obj.rows.length+"\n"+"Table1的列数:"+obj.rows(0).cells.length);

var oTr=obj.insertRow(obj.rows.length);

oTr.style.height=21

var oTd

for (j=0;j<obj.rows(0).cells.length;j++)

{

oTd=oTr.insertCell(j)

oTd.innerText=" " //" "

}

//--------------------------插入行结束--------------------------------------

//--------------------------插入列开始--------------------------------------

function InsertCol(obj)

{

var oTd

for(j=0;j<obj.rows.length;j++)

{

oTd=obj.rows(j).insertCell(obj.rows(j).cells.length);

oTd.innerText=" " //" "

}

//--------------------------插入列结束--------------------------------------

//--------------------------删除列开始--------------------------------------

function DeleteCol(obj)

{

alert(Table1.rows(0).cells.length);

for(j=0;j<Table1.rows.length;j++)

{

if(Table1.rows(j).cells.length>1)

{

Table1.rows(j).deleteCell(Table1.rows(j).cells.length-1);

}

//--------------------------删除列结束--------------------------------------

//--------------------------更改表格文字开始--------------------------------------

function showinput()

{

elm = event.srcElement;

if (elm.tagName != "TD") return;

elm.innerHTML = "<input onblur='hide()' value='"+elm.innerText+"' style='text-align:center;width:100%;border-width: 0px;' name='input1' id='input1'></input>";

document.all.item("input1").focus();

document.all.item("input1").select();

}

function hide()

{

elm = event.srcElement;

elm.parentNode.innerHTML = elm.value

}

//--------------------------更改表格文字结束--------------------------------------

//function document.onmousedown(){

// alert(event.keyCode);

//}

</script>

<TITLE>Lion互动网络=》动态添加修改表格（行、列、内容）</TITLE>

</HEAD>

<BODY>

<P><asp:datagrid id="ID_Grid" onclick="showinput()" runat="server" Width="100%" AutoGenerateColumns="False"></asp:datagrid>Table1:

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>