JavaScript selectテーブルから取得データテーブルに行を追加
4672 ワード
<!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%;
}