javascript 动态表格 可新增删除表格行 移动行
javascript 动态表格 可新增删除表格行 移动行
注释少了点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>new document</title>
</head><body>
<table id="data" style="border: 2px solid rgb(255, 255, 255); width: 300px; background-color: #FFFFCC;" >
<tbody>
<tr value="text"onmouseover="this.style.background='#CDE7FF';" onmouseout="this.style.background='';"><td>text:</td><td>text</td><td><input type="button" value="删除" onclick="d()" style="cursor:pointer;"><input type="button" value="↑" onclick="mu()" style="cursor:pointer;"><input type="button" value="↓" onclick="md()" style="cursor:pointer;"></td></tr>
<tr value="link" onmouseover="this.style.background='#CDE7FF';" onmouseout="this.style.background='';"><td>link:</td><td><a href="#" onclick="return false;">linkName</a></td><td><input type="button" onclick="d()" value="删除" style="cursor:pointer;"><input type="button" value="↑" onclick="mu()" style="cursor:pointer;"><input type="button" value="↓" onclick="md()" style="cursor:pointer;"></td></tr>
</tbody>
</table>
<input type="button" value="增加文本" onclick="iT();" />
<input type="button" value="增加链接" onclick="iL();" />
<input type="button" value="获取值" onclick="s();" />
<SCRIPT LANGUAGE="JavaScript">
<!--
/*
*/
var tb = document.getElementById("data").tBodies[0];
var len = tb.rows.length;
function s(){
var tt = tb.rows;
var temp = '';
for(var i = 0 ;i<tt.length;i++)
{
//alert(tt[i].value);
temp += tt[i].value+":"
}
alert(temp);
}
function d()
{
var s = event.srcElement;
var _tr = s.parentNode.parentNode;
//alert(_tr.rowIndex);
tb.deleteRow(_tr.rowIndex);
//tb.removeChild(_tr);
}
function md()
{
var s = event.srcElement;
var _tr = s.parentNode.parentNode;
var index = _tr.rowIndex
if(index!=tb.rows.length-1)
{
tb.moveRow(index,index+1);
}else{
alert("已经是最下面了")
}
}
function mu()
{
var s = event.srcElement;
var _tr = s.parentNode.parentNode;
var index = _tr.rowIndex
if(index!=0)
{
tb.moveRow(index,index-1);
}else{
alert("已经是最上面了")
}
}
function iT()
{
len++;
var _tr = document.createElement("tr");
_tr.onmouseover = function(){ this.style.background="#CDE7FF";};
_tr.onmouseout = function(){ this.style.background="";};
_tr.value = "test"+len;
//_tr.setAttribute('value',"test");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var text1 = document.createTextNode("text:");
var text2 = document.createTextNode("test "+len);
var bTxt = document.createElement("input");
bTxt.type = "button";
bTxt.value = "删除";
bTxt.onclick = function ()
{
var s = event.srcElement;
var _tr = s.parentNode.parentNode;
//alert(_tr.rowIndex);
tb.deleteRow(_tr.rowIndex);
}
var mdb = document.createElement("input");
mdb.type = "button";
mdb.value = "↓";
mdb.onclick = function ()
{
var s = event.srcElement;
var _tr = s.parentNode.parentNode;
var index = _tr.rowIndex
if(index!=tb.rows.length-1)
{
tb.moveRow(index,index+1);
}else{
alert("已经是最下面了")
}
}
var mub = document.createElement("input");
mub.type = "button";
mub.value = "↑";
mub.onclick = function ()
{
var s = event.srcElement;
var _tr = s.parentNode.parentNode;
var index = _tr.rowIndex
if(index!=0)
{
tb.moveRow(index,index-1);
}else{
alert("已经是最上面了")
}
}
tb.insertBefore(_tr,null);
_tr.insertBefore(td1,null);
td1.insertBefore(text1,null);
_tr.insertBefore(td2,null);
td2.insertBefore(text2,null);
_tr.insertBefore(td3,null);
td3.insertBefore(bTxt,null);
td3.insertBefore(mub,null);
td3.insertBefore(mdb,null);
//alert(_tr.innerHTML);
//alert(tb.innerHTML);
}
function iL()
{
len++;
var _tr = document.createElement("tr");
_tr.onmouseover = function(){ this.style.background="#CDE7FF";};
_tr.onmouseout = function(){ this.style.background="";};
_tr.value = "testlink"+len;
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var _a = document.createElement("a");
_a.href= "#";
_a.onclick = function (){return false;};
_a.innerHTML = ("linknametest "+len);
var text1 = document.createTextNode("link:");
var bTxt = document.createElement("input");
bTxt.type = "button";
bTxt.value = "删除";
bTxt.onclick = function ()
{
var s = event.srcElement;
var _tr = s.parentNode.parentNode;
//alert(_tr.rowIndex);
tb.deleteRow(_tr.rowIndex);
}
var mdb = document.createElement("input");
mdb.type = "button";
mdb.value = "↓";
mdb.onclick = function ()
{
var s = event.srcElement;
var _tr = s.parentNode.parentNode;
var index = _tr.rowIndex
if(index!=tb.rows.length-1)
{
tb.moveRow(index,index+1);
}else{
alert("已经是最下面了")
}
}
var mub = document.createElement("input");
mub.type = "button";
mub.value = "↑";
mub.onclick = function ()
{
var s = event.srcElement;
var _tr = s.parentNode.parentNode;
var index = _tr.rowIndex
if(index!=0)
{
tb.moveRow(index,index-1);
}else{
alert("已经是最上面了")
}
}
tb.insertBefore(_tr,null);
_tr.insertBefore(td1,null);
td1.insertBefore(text1,null);
_tr.insertBefore(td2,null);
td2.insertBefore(_a,null);
_tr.insertBefore(td3,null);
td3.insertBefore(bTxt,null);
td3.insertBefore(mub,null);
td3.insertBefore(mdb,null);
//alert(_tr.innerHTML);
//alert(tb.innerHTML);
}
//-->
</SCRIPT>
</body></html>