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

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

效果大体如下：

分享一下代码吧！

html

<div class="table-responsive" id="Bk_table" style="display:none;">
                    <table class="table table-hover table-bordered">
                        <thead>
                            <tr>
                                <th>
                        <div class="out"> 
                            <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 class="hovershow"><span class="font_zs" style="display:none">中弘西岸3</span>' +
                    '<input type="text" class="form-control getPrevalue" placeholder="填写板块名称" />' +
                    '<a class="glyphicon glyphicon-remove bkdelete delete_lie"></a></th>';
            $(".table>thead>tr").eq(0).append(firstLie);
            var otherLie = '<td><input type="text" class="form-control" 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" class="hovershow">' +
                    '<span class="font_zs t1" style="display:none">维度三</span>' +
                    '<input type="text" class="form-control getPrevalue" placeholder="填写维度名称"  />' +
                    '<a class="glyphicon glyphicon-remove bkdelete deleteoneline"></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" class="form-control" 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);
}

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