表格内容右键动态添加删除行

最近有个需求，需要在页面上右键动态增加表格的行数。

得用jquery-1.7以下版本，因为1.7以上版本不支持.live事件，如用1.7以上版本得把.live改成.on，不过会有bug，添加的行不能右键

js代码：

 1 <script>
 2     $(function () {
 3       var clickedTrIndex = -1;
 4       var headCount = tbAdd.querySelector("thead").childElementCount;
 5       //绑定鼠标移入移出事件到表格的行
 6       $("#tbAdd tr:has(td)").live("mouseover", function () {
 7         $(this).css("cursor", "pointer").css("background", "#bcc7d8");
 8       }).live("mouseleave", function () {
 9         var trIndex = $(this).index();
10         if (trIndex % 2 == 0) {
11           $(this).css("background", "#ebebeb");
12         }
13         else {
14           $(this).css("background", "");
15         }
16       }).live("mousedown", function (event) {
17         if (event.button == 2) {
18           x = event.clientX;
19           y = event.clientY;
20           $("#contextMenu").css("display", "block").css("left", x).css("top", y);
21           clickedTrIndex = $(this).index();
22         }
23       });
24       $("#contextMenu").mouseover(function () {
25         $(this).css("cursor", "pointer");
26       });
27       $("body").live("mouseup", function (event) {
28         if (event.button == 0) {
29           $("#contextMenu").css("display", "none");
30         }
31       });
32       $("#contextMenu li").mouseover(function () {
33         $(this).css("background", "#C1D7EE");
34       })
35       .mouseout(function () {
36         $(this).css("background", "");
37       })
38       .click(function () {
39         var deleteStr = $(this).children("a").attr("title");
40         if (deleteStr == "add") {
41           var colCount = 0;
42           for (j = 0; j < tbAdd.rows.item(0).cells.length; j++) {
43             colCount++;
44             var col = tbAdd.rows.item(0).cells[j];
45             if (col.colSpan > 1) {
46               colCount+=col.colSpan-1;
47             }
48           }
49           //添加一行
50           var newTr = tbAdd.insertRow(clickedTrIndex + headCount + 1);
51           newTr.setAttribute('name', 'aa');
52           for (i = 0; i < colCount; i++){
53             var newTd = newTr.insertCell();
54             //设置列内容和属性
55             newTd.innerHTML = '<input type=text id="box'+ i +'">';
56           }
57         }
58         else {
59           var index = clickedTrIndex + headCount
60           $("#tbAdd tr:has(td):eq(" + index + ")").remove();
61         }
62       });
63     });
64   </script>

html代码

<body onContextmenu="return false;">
<div>
  <table id="tbAdd" style="width:90%;">
   <thead>
    <tr align="center">
     <td style="background:#E2F4FC;" rowspan="2"><p>苹果</p></td>
     <td style="background:#E2F4FC;" colspan="2"><p>今年收成 至2019年12月31日</p></td>
     <td style="background:#E2F4FC;" colspan="2"><p>明年收成 2018年1月1日 至2018年12月31日</p></td>
    </tr>
    <tr align="center">
     <td style="background:#E2F4FC;"><p>收入</p></td>
     <td style="background:#E2F4FC;"><p></p></td>
     <td style="background:#E2F4FC;"><p>支出</p></td>
     <td style="background:#E2F4FC;"><p></p></td>
    </tr>
   </thead>
   <tbody>
    <tr name="a99007" prefix="">
     <td><input id="a16001" name="a16001" context="ThisYear" prefix="" /></td>
     <td><input id="a16002" name="a16002" context="ThisYear" prefix="" /></td>
     <td><input id="a16003" name="a16003" context="ThisYear" prefix="" /></td>
     <td><input id="a16004" name="a16004" context="LastYear" prefix="" /></td>
     <td><input id="a16005" name="a16005" context="LastYear" prefix="" /></td>
    </tr>
   </tbody>
  </table>
  <br />
  <div id="contextMenu">
    <ul>
      <li><a href="#" title="add">添加行</a></li>
      <li><a href="#" title="delete">删除行</a></li>
    </ul>
  </div>
</div>
</body>

 

posted @ 2020-09-10 16:13  Mr_Sun  阅读(248)  评论(0)  编辑  收藏  举报