当前位置:Gxlcms > JavaScript > JavaScript实现表中行的增加和删除

JavaScript实现表中行的增加和删除

时间:2021-07-01 10:21:17 帮助过:13人阅读

<%@ page pageEncoding="UTF-8"%>
<%@ 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();"> &nbsp;&nbsp;
<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>&nbsp;</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>

人气教程排行