JS动态添加表格
点击+的时候下面增加一行，增加的那行操作按钮变成+，第一行的按钮变成－，输入金额，总金额那里会统计输入的金额...
点击+的时候下面增加一行，增加的那行操作按钮变成+，第一行的按钮变成－，输入金额，总金额那里会统计输入的金额
展开
1个回答
展开全部
<!DOCTYPE HTML>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
margin: 20px auto;
width: 600px;
}
table {
width: 600px;
border: 1px solid black;
border-collapse: collapse;
}
table input[type=button] {
width: 50px;
height: 25px;
border: 0;
cursor: pointer;
}
table input[type=button]:hover {
background-color: #fd3;
}
table input[type=text] {
border-color: black;
border-width: 0 0 1px 0;
text-align: center;
}
table textarea {
width: 90%;
height: 100px;
resize: none;
}
th,td {
border: 1px solid black;
text-align: center;
}
</style>
<script>
var addRow = function(btn) {
var tbody = table.tBodies[0];
var row = btn.parentElement.parentElement.rowIndex;
if (btn.value == '-') {
tbody.deleteRow(row);
} else {
var tr = tbody.insertRow(tbody.rows.length - 1);
var arr = [
"<select><option>城际交通费</option></select>",
"<input type='text' onkeyup='calc(this)' name='je' />",
"<input type='text' />",
"<input type='button' value='+' onclick='addRow(this)' />"
];
for (var i = 0; i < 4; i++) {
var td = tr.insertCell(tr.cells.length);
td.innerHTML = arr[i];
}
btn.value = '-';
}
}
var calc = function (txt){
if(!/^[+-]?((\d+(\.\d*)?)|(\d*\.\d+))$/.test(txt.value)) {
txt.value = txt.value.replace(/[^\+\-\.\d]/g, "");
}
var jes = document.getElementsByName("je");
var sum = 0;
for(var i = 0; i < jes.length; i++) {
sum += parseFloat(jes[i].value);
}
zje.value = sum;
}
onload = function (){
dt.value = new Date().toLocaleString();
}
</script>
</head>
<body>
<div class="wrap">
<table id="table">
<tbody>
<tr>
<td>填写人：</td>
<td>
<input type="text" value="双枪将" />
</td>
<td>填报时间：</td>
<td>
<input type="text" value="" id="dt" readonly />
</span>
</td>
</tr>
<tr>
<td>总金额：</td>
<td>￥
<input type="text" id="zje" readonly />
</td>
<td>状态：</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<th>项目</th>
<th>金额</th>
<th>费用说明</th>
<th>操作</th>
</tr>
<tr>
<td>
<select>
<option>城际交通费</option>
</select>
</td>
<td>
<input type="text" onkeyup="calc(this)" name="je" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="button" value="+" onclick="addRow(this)" />
</td>
</tr>
<tr>
<td>事由：</td>
<td colspan=3>
<textarea></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
更多追问追答
追问
如果点击－的时候总金额不会变，要求点击－或＋总金额要根据输入的金额变换
追答
右键你的浏览器页面，修改编码
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />改为gbk
复制一份出来，粘贴内容到新文件里面
以上方法每种都适应，采纳即可。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
