最近有个需求，需要在页面上右键动态增加表格的行数。
得用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="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>