jquery对表格行列的操作-jquery动态增加表格行或者列

jquery对表格的操作是老生常谈的问题。最近项目中用到了,今天在这里分享一下!

效果大体如下:

enter image description here

分享一下代码吧!

html

<div>
<table>
<thead>
<tr>
<th>
<div>
<b>板块</b>
<em>维度</em>
</div>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>

js操作如下:

 deleteLie: function () { //删除一列
var index = $(this).parent().index();
for (var i = 0; i < $(".table tr").length; i++) {
$($(".table tr")[i]).children().eq(index).remove();
}
if ($(".table tr").length == 1 && $(".table tr").eq(0).children().length == 1) {
$("#Bk_table").hide();
$(".blankShow").show();
}
},
deleteOneline: function () { //删除一行
$(this).parent().parent().remove();
if ($(".table tr").length == 1 && $(".table tr").eq(0).children().length == 1) {
$("#Bk_table").hide();
$(".blankShow").show();
}
},
addOneBk: function () { //增加一列
if ($("#Bk_table").is(":hidden")) {
$("#Bk_table").show();
}
if ($(".blankShow").is(":visible")) {
$(".blankShow").hide();
}
var firstLie = ' <th><span>中弘西岸3</span>' +
'<input type="text" placeholder="填写板块名称" />' +
'<a></a></th>';
$(".table>thead>tr").eq(0).append(firstLie);
var otherLie = '<td><input type="text" value="" placeholder="1-5之间数字" ' +
'onkeyup="if(isNaN(value)||parseFloat(value)>5||parseFloat(value)<1)execCommand(\'undo\')"' +
'onafterpaste="if(isNaN(value)||parseFloat(value)>5||parseFloat(value)<1)execCommand(\'undo\')" /></td>';
$(".table>tbody>tr").append(otherLie);
},
addWd: function () { //增加一行
if ($("#Bk_table").is(":hidden")) {
$("#Bk_table").show();
}
if ($(".blankShow").is(":visible")) {
$(".blankShow").hide();
}
var Wdhtml_1 = '<tr>' +
' <th scope="row">' +
'<span>维度三</span>' +
'<input type="text" placeholder="填写维度名称"  />' +
'<a></a>' +
'</th>';
var Wdhtml_2 = "";
var LieLength = $(".table>thead>tr").children().length - 1;
if (LieLength > 0) {
for (var i = 0; i < LieLength; i++) {
Wdhtml_2 = Wdhtml_2 + ' <td><input type="text" value="" placeholder="1-5之间数字" onkeyup="if(isNaN(value)||parseFloat(value)>5||parseFloat(value)<1)execCommand(\'undo\')" onafterpaste="if(isNaN(value)||parseFloat(value)>5||parseFloat(value)<1)execCommand(\'undo\')" /></td>';
}
}
var Wdhtml_3 = '</tr>';
var allWd = Wdhtml_1 + Wdhtml_2 + Wdhtml_3;
$(".table>tbody").append(allWd);
}

以上贴出的是部分代码,有问题可以交流!

以上是jquery对表格行列的操作-jquery动态增加表格行或者列的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>