<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > |
<html> |
<head> |
<title>动态增删表格</title> |
</head> |
<body> |
<table border=1 id= "Table1" style= "text-align:center" > |
<tr> |
<td width= "84" >姓名</td> |
<td width= "35" >年龄</td> |
<td width= "44" >性别</td> |
<td width= "84" >电话</td> |
<td width= "84" >学历</td> |
<td width= "68" > </td> |
</tr> |
</table> |
<br/> |
<input type= "button" value= "增加一行" onclick= "javascript:addRow()" > |
<script language= "javascript" > |
var row_index=0; |
//建立一个函数addRow()用于建立新的一行 |
function addRow(){ |
row_index++; |
//新增一行赋给变量new_row,表示建立了一个tr |
var new_row=Table1.insertRow(Table1.rows.length); |
//给tr元素设置属性,参数1表示属性名(id),参数2表示该属性的值 |
new_row.setAttribute( "id" , "row" +row_index); |
//新增一列赋给变量new_col,表示建立了一个td |
var new_col=new_row.insertCell(0); |
//给列里赋值 |
new_col.innerHTML= "<input type='text'name='name" +row_index+ "'size=10>" ; |
var new_col=new_row.insertCell(1); |
new_col.innerHTML= "<input type='text'name='age" +row_index+ "'size=2>" ; |
var new_col=new_row.insertCell(2); |
new_col.innerHTML= "<select name=‘sex" +row_index+ "'><option value='男'>男</option><option value='女'>女</option></select>" ; |
var new_col=new_row.insertCell(3); |
new_col.innerHTML= "<input type='text' name='phone" +row_index+ "' size=10>" ; |
var new_col=new_row.insertCell(4); |
new_col.innerHTML= "<input type='text' name='spec" +row_index+ "' size=10>" ; |
var new_col=new_row.insertCell(5); |
new_col.innerHTML= "<input type='button' value='删除此行' onclick=\"delete_row('row" +row_index+ "')\">" ; |
} |
function delete_row(rname){ |
//函数delete_row用于删除一行 |
var i; |
i=Table1.rows(rname).rowIndex; |
if (confirm( '确定删除第' +i+ '行?' )) |
Table1.deleteRow(i); |
} |
</script> |
</body> |
</html> |