<html> |
<head> |
<meta http-equiv= "Content-Type" content= "text/html; charset=GB2312" /> |
<title>测试文档</title> |
<link rel= "stylesheet" href= "./test.css" type= "text/css" > |
</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()" > |
</body> |
<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){ |
var j=0; |
var row = document.getElementById( 'Table1' ).rows; |
for ( var i=1;i<=row.length;i++){ |
j++; |
if (row[i].getAttribute( 'id' )==rname){ |
break ; |
} |
} |
var node=document.getElementById(rname); |
if (confirm( '确定删除第' +j+ '行?' )){ |
node.parentNode.removeChild(node); |
} |
} |
</script> |
</html> |