您的位置：首页 > Web前端 > JavaScript

JavaScript 从select表中获取数据在表格中添加行

2015-12-17 00:00 676 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/mian.css"/>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
function add(more) {
$("#salesman-list").clone().insertBefore($(more)).css("display", "inline-block");
$("#salesman-list").change(function () {
var selected = $("#salesman-list").children("option:selected").text();
$(more).parents("tr").after("<tr><td></td><td>" + selected + "</td><td><a onclick='add(this)'>新增</a><a onclick='reduce(this)'>删除</a></td></tr>>");
$(this).remove();
rowIndex();
});
}
function reduce(less) {
$(less).parents("tr").remove();
rowIndex();
}
function rowIndex() {
var table=document.getElementById("mantable");
var rownum = table.rows.length;
for (var i = 0; i <= rownum; i++) {
table.rows[i].cells[0].innerHTML = (i+1) + '.';
}
}
</script>
</head>
<body>
<div class="section">
<fieldset>
<legend>表格选择增删</legend>
<table id="mantable" cellspacing="0" cellpadding="0">
<tr>
<td>1.</td>
<td>业务员A</td>
<td><a class="more" onclick="add(this)">新增</a><a class="reduce" onclick="reduce(this)">删除</a></td>
</tr>
<tr>
<td>2.</td>
<td>业务员A</td>
<td><a class="more" onclick="add(this)">新增</a><a class="reduce" onclick="reduce(this)">删除</a></td>
</tr>
<tr>
<td>3.</td>
<td>业务员A</td>
<td><a class="more" onclick="add(this)">新增</a><a class="reduce" onclick="reduce(this)">删除</a></td>
</tr>
<tr>
<td>4.</td>
<td>业务员A</td>
<td><a class="more" onclick="add(this)">新增</a><a class="reduce" onclick="reduce(this)">删除</a></td>
</tr>
<tr>
<td>5.</td>
<td>业务员A</td>
<td><a class="more" onclick="add(this)">新增</a><a class="reduce" onclick="reduce(this)">删除</a></td>
</tr>
</table>
<select id="salesman-list">
<option value="-1">业务员列表</option>
<option value="0">业务员B</option>
<option value="1">业务员C</option>
<option value="2">业务员D</option>
<option value="3">业务员E</option>
<option value="4">业务员F</option>
</select>
</fieldset>
</div>
</body>
</html>

* {
padding: 0;
margin: 0;
font-family: "Microsoft YaHei";
box-sizing: border-box;
}

fieldset {
width: 500px;
margin: 0 auto;
}

fieldset legend {
font-size: 14px;
margin: 0 auto;
color: #686868;
}

fieldset table {
margin: 0 auto;
margin-top: 20px;
width: 300px;
}

table tr {
height: 30px;
}

table td {
font-size: 14px;
line-height: 150%;
height: 30px;
}

table td a {
cursor: pointer;
display: inline-block;
font-size: 14px;
text-align: center;
vertical-align: middle;
padding: 0 5px;
border-radius: 3px;
}

table td a.more {
background: #e4393c;
color: #FFFFFF;
margin-right: 5px;
}

table td a.reduce {
background: #ed8a47;
color: #FFFFFF;
}

table td a.more {
margin-left: 10px;
}

#salesman-list {
display: none;
font-size: 14px;
line-height: 150%;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript select table 增加删除

相关文章推荐

新的分享

章节导航