JavaScript实现表中行的增加和删除
<%@ include file="/common/import.jsp" %>
<html>
<head>
<%@ include file="/common/header.jsp" %>
</head>
<body leftmargin=0 topmargin=0>
<table width="100%" border="0" cellpadding="0" cellspacing="0"
align=center border=0>
<tr>
<td height=30></td>
</tr>
<tr>
<td height=10 align=center>
<input type=button name="add" value="新增股东" onclick="addRow();">
<input type=button name="del" value="减少股东" onclick="delRow();">
</td>
</tr>
<tr>
<td valign=top>
<!--<form id="form1" name="form1" action="" method="post">-->
<table width="95%" border="1" align="center" cellpadding="1" id="tbl_gd" name="tbl_gd" cellspacing="0" bordercolor="#0099cc" style="line-height: 1.4; border-collapse: collapse" bgcolor="#ffffcc">
<tr>
<td align=center width=30%>股东名称</td>
<td align=center width=30%>证照号码</td>
<td align=center width=20%>出资额</td>
<td align=center width=20%>出资比例(%)</td>
</tr>
<tr>
<td align=left%>
<input name="name1" id="name1" value="">
</td>
<td align=left%>
<input name="cardNo1" id="cardNo1" value="">
</td>
<td align=left%>
<input name="moneyInvested1" id="moneyInvested1" value="">
</td>
<td align=left%>
<input name="percentage1" id="percentage1" value="">
</td>
</tr>
</table>
<!-- </form>-->
</td>
</tr>
<tr>
<td height=20></td>
</tr>
<tr>
<td align="center" width="100%"><input type="button"
onClick="save()" value="保存&转入下一步"></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
<script language=javascript>
function save(){
if(!confirm("确实要保存并转入下一步吗？")){
return;
}
getInfo();
//qy_info.submit();
}
function addRow(){
//添加一行
var newTr = document.getElementById("tbl_gd").insertRow(-1);
var index=newTr.rowIndex;
//alert(index);
//添加四列
var newTd0 = newTr.insertCell(-1);
var newTd1 = newTr.insertCell(-1);
var newTd2 = newTr.insertCell(-1);
var newTd3 = newTr.insertCell(-1);
//设置列内容和属性
newTd0.innerHTML ="<input name=\"name"+index+"\" id=\"name"+index+"\" value=\"\">";
newTd1.innerHTML = "<input name=\"cardNo"+index+"\" id=\"cardNo"+index+"\" value=\"\">";
newTd2.innerHTML = "<input name=\"moneyInvested"+index+"\" id=\"moneyInvested"+index+"\" value=\"\">";
newTd3.innerHTML = "<input name=\"percentage"+index+"\" id=\"percentage"+index+"\" value=\"\">";
}
function delRow(){
if(document.getElementById("tbl_gd").rows.length>2){
document.getElementById("tbl_gd").deleteRow(-1);
}
}
function getInfo(){
var infoStr="";
alert(name2.value);
alert(tbl_gd.rows.length);
for(var i=1;i<=tbl_gd.rows.length-1;i++){
infoStr+=document.all.item("name"+i).value+"::";
infoStr+=document.all.item("cardNo"+i).value+"::";
infoStr+=document.all.item("moneyInvested"+i).value+"::";
infoStr+=document.all.item("percentage"+i).value+";;";
}
alert(infoStr);
}
</script>
</html>
下一篇： rows的10篇内容推荐