- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style type="text/CSS">
- table {
- border-collapse: collapse;
- width: 300px;
- }
- table td,
- th {
- border: solid 1px black;
- }
- </style>
- </head>
- <body>
- <table id="table">
- <tr>
- <th> 书名 </th>
- <th> 价格 </th>
- </tr>
- <tr>
- <td> 看得见风景的房间 </td>
- <td>30</td>
- </tr>
- <tr>
- <td> 幸福从天而降 </td>
- <td>30</td>
- </tr>
- <tr>
- <td>60 个瞬间 </td>
- <td>30</td>
- </tr>
- <tr>
- <td> 合计 </td>
- <td>0</td>
- </tr>
- </table><br />
- <button onclick="addRow()"> 表格最后新增一行 </button>
- <button onclick="delRow()"> 删除表格最后一行 </button>
- <button onclick="copyRow()"> 复制表格最后一行 </button>
- <button onclick="getSum()"> 求和 </button>
- <script type="text/javascript">
- var table = document.getElementById("table");
- window.onload = function() {
- getSum();
- }
- function addRow() {
- var name = prompt("请输入书名");
- var newTr = table.insertRow(table.rows.length - 1);
- newTr.insertCell(0).innerText = name;
- var price = prompt("请输入价格");
- newTr.insertCell(1).innerText = price;
- }
- function delRow() {
- // table.deleteRow(table.rows.length-2);
- if(table.rows.length> 2)
- table.deleteRow(table.rows.length - 2);
- else
- alert("没啦! 憋删了!");
- getSum();
- }
- function copyRow() {
- if(table.rows.length> 2) {
- var td = table.rows[table.rows.length - 2];
- var newTr = table.insertRow(table.rows.length - 1);
- newTr.insertCell(0).innerText = td.cells[0].innerText;
- newTr.insertCell(1).innerText = td.cells[1].innerText;
- } else {
- alert("没有可复制的行!");
- }
- getSum();
- }
- function getSum() {
- var rows = table.rows;
- var sum = 0;
- for(var i = 1; i <rows.length - 1; i++) {
- var price = parseFloat(rows[i].cells[1].innerText);
- sum += price;
- }
- rows[rows.length - 1].cells[1].innerText = sum + "元";
}
- </script>
- </body>
- </html>
来源: https://www.cnblogs.com/gcywj/p/8994005.html