本文介绍了一个简单的HTML页面，该页面通过JavaScript实现了表格行的动态增加与删除功能。用户可以通过按钮添加新行，并能选择特定行进行删除。代码中包含了具体的实现逻辑及界面布局。
<html>
<script type="text/javascript">
var rowid=1;
function $(id){
return document.getElementById(id);
}
function addRow(){
var _tab=$( "test");
//表格行数
var rows = _tab.rows.length ;
var _row=_tab.insertRow();
rowid+=1;
var _col1=_row.insertCell();
_col1.innerText=rowid;
_col1.align= "center";
var _col2=_row.insertCell();
_col2.innerHTML= "<input type='checkbox' value='rowid'/>";
_col2.align= "center";
var _col3=_row.insertCell();
_col3.innerHTML= " <input type= 'text '> ";
_col3.align= "center";
var _col4=_row.insertCell();
_col4.innerHTML= " <input type= 'text '> ";
_col4.align= "center";
var _col5=_row.insertCell();
_col5.innerHTML= " <input type= 'text '> ";
_col5.align= "center";
var _col6=_row.insertCell();
_col6.innerHTML= " <input type='button' value='删除本行' onClick='deleteBenhang(this);' > ";
}
function deleteBenhang(r){
var i=r.parentNode.parentNode.rowIndex;
$( "test").deleteRow(i)
}
function deleteRows(){
var myArray=new Array()
var rowids=document.getElementById("test").getElementsByTagName("input");
for(var i=0;i<rowids.length;i++){
if(rowids[i].type=='checkbox'&&rowids[i].checked){
var rows=rowids[i].parentNode.parentNode.rowIndex;
$( "test").deleteRow(rows);
}
}
deleteRows();
//for(var j=0;j<myArray.length;j++){
// alert(myArray[j]);
// $( "test").deleteRow(myArray[j]);
// }
}
</script>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gbk">
<title> 增加行 </title>
</head>
<body>
<table>
<tr>
<td align= "center " valign= "top ">
<table width= "200 " border= "1 " align= "center ">
<tr>
<td> <input type= "button " name= "addBtn " value= " add " onClick= "addRow();"> </td>
</tr>
<tr>
<td> <input type= "button " name= "addBtn " onClick= "deleteRows();" value="deleteRows"> </td>
</tr>
</table>
</td>
<td> <table id= "test" border= "1 ">
<tr>
<td> </td><td align= "center "> 选择</td> <td align= "center "> ID </td> <td align= "center "> Name </td> <td align= "center "> Desc </td>
<td align= "center "> 删除 </td>
</tr>
<tr>
<td align= "center " width= "50 "> 1 </td>
<td><input type="checkbox" value="1" /></td>
<td> <input type= "text " name= "id " id= "testId "> </td>
<td> <input type= "text " name= "name " id= "testName "> </td>
<td> <input type= "text " name= "desc " id= "testDesc "> </td>
<td> <input type="button" value="删除本行" onClick="deleteBenhang(this);" ></td>
</tr>
</table> </td>
</tr>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
