javascsript 动态的添加和删除。-优快云博客

<!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=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var j_1 = 1;
function add_row(){
newRow =document.all.row.insertRow(-1);
newCell =newRow.insertCell();
newCell.className="STYLE3";
newCell.align="center";
newCell.innerHTML="<select name='thesistogether"+j_1+"'>"+
"<option value='请选择'>"+
"请选择"+
"</option>"+
"<option value='1'>"+
"1111"+
"</option>"+
"<option value='2'>"+
"2222"+
"</option>"+
"<option value='3'>"+
"3333"+
"</option>"+
"<option value='4'>"+
"44444"+
"</option>"+
"</select>";
for(var i=0;i<10;i++){
newCell=newRow.insertCell();
newCell.className="STYLE3";
newCell.align="center";
newCell.innerHTML="<input type='text' name='familyrelation"+j_1+"' style='WIDTH: 60px; font-size:9pt; color:#000000' />";
}

newCell=newRow.insertCell();
newCell.className="STYLE3";
newCell.align="center";

newCell.innerHTML="<input type='button' value='删除' onClick='deleteRow();'>";
j_1++;
document.all.row.focus();
}

//删除当前行。
function deleteRow(){
var cuerrentRowIndex = event.srcElement.parentNode.parentNode.RowIndex;
document.all.row.deleteRow(cuerrentRowIndex);
}

</script>
</head>
<body bgcolor="#F5F1F5">
<form action="#" id="f" name="fo">
<table border="2" bordercolor="23">
<tr>
<td align="right">
<input type="button" name="bt" οnclick="add_row();" value="添加">
</td>
</tr>
<tr>
<td>
<table id="row" style="widht:100%" border="1" cellpadding="2" cellspacing="1">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>