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

1<!DOCTYPE html>
2<html>
3<head lang="en">
4    <meta charset="UTF-8">
5    <title></title>
6    <link rel="stylesheet" href="css/mian.css"/>
7    <script src="js/jquery-1.9.1.min.js"></script>
8    <script>
9        function add(more) {
10            $("#salesman-list").clone().insertBefore($(more)).css("display", "inline-block");
11            $("#salesman-list").change(function () {
12                var selected = $("#salesman-list").children("option:selected").text();
13                $(more).parents("tr").after("<tr><td></td><td>" + selected + "</td><td><a onclick='add(this)'>新增</a><a onclick='reduce(this)'>删除</a></td></tr>>");
14                $(this).remove();
15                rowIndex();
16            });
17        }
18        function reduce(less) {
19            $(less).parents("tr").remove();
20            rowIndex();
21        }
22        function rowIndex() {
23            var table=document.getElementById("mantable");
24            var rownum = table.rows.length;
25            for (var i = 0; i <= rownum; i++) {
26               table.rows[i].cells[0].innerHTML = (i+1) + '.';
27            }
28        }
29    </script>
30</head>
31<body>
32<div class="section">
33    <fieldset>
34        <legend>表格选择增删</legend>
35        <table id="mantable" cellspacing="0" cellpadding="0">
36            <tr>
37                <td>1.</td>
38                <td>业务员A</td>
39                <td><a class="more" onclick="add(this)">新增</a><a class="reduce" onclick="reduce(this)">删除</a></td>
40            </tr>
41            <tr>
42                <td>2.</td>
43                <td>业务员A</td>
44                <td><a class="more" onclick="add(this)">新增</a><a class="reduce" onclick="reduce(this)">删除</a></td>
45            </tr>
46            <tr>
47                <td>3.</td>
48                <td>业务员A</td>
49                <td><a class="more" onclick="add(this)">新增</a><a class="reduce" onclick="reduce(this)">删除</a></td>
50            </tr>
51            <tr>
52                <td>4.</td>
53                <td>业务员A</td>
54                <td><a class="more" onclick="add(this)">新增</a><a class="reduce" onclick="reduce(this)">删除</a></td>
55            </tr>
56            <tr>
57                <td>5.</td>
58                <td>业务员A</td>
59                <td><a class="more" onclick="add(this)">新增</a><a class="reduce" onclick="reduce(this)">删除</a></td>
60            </tr>
61        </table>
62        <select id="salesman-list">
63            <option value="-1">业务员列表</option>
64            <option value="0">业务员B</option>
65            <option value="1">业务员C</option>
66            <option value="2">业务员D</option>
67            <option value="3">业务员E</option>
68            <option value="4">业务员F</option>
69        </select>
70    </fieldset>
71</div>
72</body>
73</html>
74
75* {
76    padding: 0;
77    margin: 0;
78    font-family: "Microsoft YaHei";
79    box-sizing: border-box;
80}
81
82fieldset {
83    width: 500px;
84    margin: 0 auto;
85}
86
87fieldset legend {
88    font-size: 14px;
89    margin: 0 auto;
90    color: #686868;
91}
92
93fieldset table {
94    margin: 0 auto;
95    margin-top: 20px;
96    width: 300px;
97}
98
99table tr {
100    height: 30px;
101}
102
103table td {
104    font-size: 14px;
105    line-height: 150%;
106    height: 30px;
107}
108
109table td a {
110    cursor: pointer;
111    display: inline-block;
112    font-size: 14px;
113    text-align: center;
114    vertical-align: middle;
115    padding: 0 5px;
116    border-radius: 3px;
117}
118
119table td a.more {
120    background: #e4393c;
121    color: #FFFFFF;
122    margin-right: 5px;
123}
124
125table td a.reduce {
126    background: #ed8a47;
127    color: #FFFFFF;
128}
129
130table td a.more {
131    margin-left: 10px;
132}
133
134#salesman-list {
135    display: none;
136    font-size: 14px;
137    line-height: 150%;
138}

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

评论区

相关推荐