javascript实现动态增加删除表格行,利用js动态添加删除table行的示例代码

javascript实现动态增加删除表格行,利用js动态添加删除table行的示例代码

function removeLine(){

var newTr = testTbl.insertRow();
//添加列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
//设置列内容和属性

objCell=objRow.insertCell(1);
objCell.innerHTML=objSourceRow.cells[1].innerHTML;

<html>
<head>
<title></title>
</head>
<body>
<table id=”testTbl” border=1>
<tr>
<td>
产品名称
</td>
<td>
产品数量
</td>
<td>
产品单价
</td>
</tr>
<tr>
<td>
<select name=”a”>
   <option value=”电子”>电子</option>
   <option value=”电器”>电器</option>
</select></td>
<td>
javascript实现动态增加删除表格行,利用js动态添加删除table行的示例代码。    <input type=”text” name=”b”>
     </td>
<td>
    <input type=”text” name=”c”>
     </td>
</td>
</table>
<input type=”button” name=”Submit2″ value=”添加”
onclick=”addRow()”>
<script>
function addRow(){
//添加行

}

正如所示:

//–>
</script>
</head>
<body bgcolor=”#ffffff”>
<form name=”form1″ method=”post”>
<table width=”400″ border=”0″>
<tr>
<td>基本音讯</td>
<td><select name=”select”>
<option value=”” selected>选择</option>
<option value=”1″>第一</option>
<option value=”2″>第二</option>
</select></td>
<td><input name=”basicinfo” type=”text” id=”basicinfo”>
<input name=”add” type=”button” id=”add” value=”增加” onClick=”addLine(this)”></td>
</tr>
<tr>
<td>别的音讯</td>
<td> </td>
<td><input type=”text” name=”textfield”></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>

//动态删除行 function deleteRow(){
   var rowIndex =
event.srcElement.parentElement.parentElement.rowIndex;
   var styles = document.getElementById(“tableID”);
   styles.deleteRow(rowIndex);
}

objCell=objRow.insertCell(0);
objCell.innerHTML=” “; 

复制代码 代码如下:

admin

网站地图xml地图