这样的表格怎么动态添加,删除行啊?
我有下面这样的表格,但我想在添加时表格都像第一二行那样.删除时,只删除右边的行,前面的只要不是右边的两行全删了,就保留.(就像下面的代码,删除时按钮的位置不变,被删的那行呈空白),谢了啊!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<script language="javascript">
<!--
var theRowOfTheDynamicTable=null;
function addRow(the_table){
if(the_table==null)
return;
var i=0;
var the_row,the_cell;
var row_index=-1;
if(theRowOfTheDynamicTable==null){
theRowOfTheDynamicTable=new Array();
var baseTr=the_table.rows[0];//插入倒数第二行的内容
for(i=0;i<baseTr.cells.length;i++){
the_cell=baseTr.cells[i];
theRowOfTheDynamicTable[i]=the_cell.innerHTML;
}
}
row_index=the_table.rows.length-1;//在第二行后面插入
var newrow=the_table.insertRow(row_index);
for(i=0;i<theRowOfTheDynamicTable.length;i++){
the_cell=newrow.insertCell(i);
the_cell.align="center";
the_cell.className="TdLeftBg";
the_cell.innerHTML=theRowOfTheDynamicTable[i];
}
theRowOfTheDynamicTable=null;
}
function get_Element(the_ele,the_tag){
the_tag = the_tag.toLowerCase();
if(the_ele.tagName.toLowerCase()==the_tag)
return the_ele;
while(the_ele=the_ele.offsetParent){
if(the_ele.tagName.toLowerCase()==the_tag)
return the_ele;
}
return(null);
}
function del_row(the_table){
if(the_table.rows.length<3){
alert("此行为保留行，不允许删除!");
return false;
}
var the_cell,the_row;
var i=0;
the_cell=get_Element(event.srcElement,"td");
if(the_cell==null) return;
the_row=the_cell.parentElement.rowIndex;
the_table.deleteRow(the_row);
}
-->
</script>
<body>
<table id="myTable"width="800" align="center" border="1" >
<tr>
<td width="21%" rowspan="2"><input type="text" ></td>
<td width="23%"><input type="text" ></td>
<td width="18%"><input type="text"></td>
<td width="18%"><input type="text"></td>
<td width="20%" align="center"><input type="button" class="buttonstyle"value="删除" onClick="del_row(myTable)"></td>
</tr>
<tr >
<td ><input type="text" ></td>
<td ><input type="text" ></td>
<td ><input type="text" ></td>
<td align="center" ><input type="button" value="删除" onClick="del_row(myTable)"></td>
</tr>
<tr class="TdContent">
<td align="center" colspan="7"><input type="button" value="添加一行" onClick="addRow(myTable)"></td>
</tr>
</table>
</body>
</html>
问题点数：100、回复次数：5Top
1 楼meizz（梅花雪）回复于 2005-03-01 11:42:54 得分 25
tr.removeNode(true); //删除
tab.insertRow(tab.rows.length); //添加行Top
2 楼yeyu710（叶雨）回复于 2005-03-01 11:59:40 得分 0
梅花雪高手,小弟愚笨,不知道该把你写的两行代码放在那儿啊?能不能详细点?我在
function del_row(the_table)最后加了这句:the_cell.removeNode(true);可是我的删除按钮还是跑到上面去了啊,我要那里空行啊!Top
3 楼vivianfdlpw（）回复于 2005-03-01 12:54:03 得分 25
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<script language="javascript">
<!--
var theRowOfTheDynamicTable=null;
function addRow(the_table){
if(the_table==null)
return;
var i=0;
var the_row,the_cell;
var row_index=-1;
if(theRowOfTheDynamicTable==null){
theRowOfTheDynamicTable=new Array();
var baseTr=the_table.rows[0];//插入倒数第二行的内容
for(i=0;i<baseTr.cells.length;i++){
the_cell=baseTr.cells[i];
theRowOfTheDynamicTable[i]=the_cell.innerHTML;
}
}
row_index=the_table.rows.length-1;//在第二行后面插入
var newrow=the_table.insertRow(row_index);
for(i=0;i<theRowOfTheDynamicTable.length;i++){
the_cell=newrow.insertCell(i);
the_cell.align="center";
the_cell.className="TdLeftBg";
the_cell.innerHTML=theRowOfTheDynamicTable[i];
}
newrow.cells[theRowOfTheDynamicTable.length-2].removeNode(true);
theRowOfTheDynamicTable=null;
the_table.rows[0].childNodes[0].rowSpan=the_table.rows.length-1;
}
function get_Element(the_ele,the_tag){
the_tag = the_tag.toLowerCase();
if(the_ele.tagName.toLowerCase()==the_tag)
return the_ele;
while(the_ele=the_ele.offsetParent){
if(the_ele.tagName.toLowerCase()==the_tag)
return the_ele;
}
return(null);
}
function del_row(the_table){
if(the_table.rows.length<3){
alert("此行为保留行，不允许删除!");
return false;
}
var the_cell,the_row;
var i=0;
the_cell=get_Element(event.srcElement,"td");
if(the_cell==null) return;
the_row=the_cell.parentElement.rowIndex;
the_table.deleteRow(the_row);
the_table.rows[0].childNodes[0].rowSpan=the_table.rows.length-1;
}
-->
</script>
<body>
<table id="myTable"width="800" align="center" border="1" >
<tr>
<td width="21%" rowspan="2"><input type="text" ></td>
<td width="23%"><input type="text" ></td>
<td width="18%"><input type="text"></td>
<td width="18%"><input type="text"></td>
<td width="20%" align="center"><input type="button" class="buttonstyle"value="删除" onClick="del_row(myTable)"></td>
</tr>
<tr >
<td ><input type="text" ></td>
<td ><input type="text" ></td>
<td ><input type="text" ></td>
<td align="center" ><input type="button" value="删除" onClick="del_row(myTable)"></td>
</tr>
<tr class="TdContent">
<td align="center" colspan="7"><input type="button" value="添加一行" onClick="addRow(myTable)"></td>
</tr>
</table>
</body>
</html>
Top
4 楼micker（希望下一代别再贫穷）回复于 2005-03-01 13:18:32 得分 50
这应该是一个合并单元格的啊。
添加行后，在设置rowSpan，删除单元格。
the_td.rowSpan=2;
the_td.colSpan=2;Top
5 楼yeyu710（叶雨）回复于 2005-03-01 13:20:44 得分 0
哈, 明白了!多谢了!结贴了!Top
