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);
}
以上贴出的是部分代码,有问题可以交流!

时间: 2024-10-30 21:17:49

jquery动态增加表格行或者列的例子的相关文章

js动态修改表格行colspan列跨度的方法

 这篇文章主要介绍了js动态修改表格行colspan列跨度的方法,实例分析了javascript动态修改html中table属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了js动态修改表格行colspan列跨度的方法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <!DOCTYPE h

js动态修改表格行colspan列跨度的方法_javascript技巧

本文实例讲述了js动态修改表格行colspan列跨度的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script> function setColSpan() { var x=document.getElementById('myTable').rows[0].cells; x[0].colSpan="2"; x[1].colSpan="6"; } </sc

jquery动态增加删减表格行特效_jquery

基于jQuery表格增加删除代码是一款动态增加删减表格行特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: html代码: <div style="width:720px;margin:20px auto;"> <table id="tab11" style="display: none"> <tbody> <tr> <td height="30"

c# winform 怎么动态生成4行3列的lable 当lable大于12个进行翻页显示,并且lable动态增加与减少

问题描述 c#winform怎么动态生成4行3列的lable当lable大于12个进行翻页显示,并且lable动态增加与减少(举例:当数量为9时lable数量是9当数量为10是lable数量为10如何数量减少lable数量也随之减少静态更新) 解决方案 解决方案二: flowLayoutPanel试试这个控件解决方案三: 怎么实现静态刷新啊,每次刷新都是一闪一闪的解决方案四: 还不如直接说你的需求解决方案五: 真心没看懂你的需求解决方案六: 以下代码在vs2013下调试通过.新建一个Window

基于JavaScript实现动态创建表格和增加表格行数_javascript技巧

在工作,项目需求中,有时候表格的行数不能够满足我们的需求,这时需要我们动态的增加表格的行数,下面小编通过一段代码实例给大家介绍js创建表格和增加表格的行数的方法,并且还实现了隔行变色功能.对此感兴趣的朋友可以参考一下代码: js代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态操作表格</title> </head>

jquery 动态增加删除行的简单实例(推荐)_jquery

最近写程序,碰巧有动态增加删除行,下面就记录一下 html就不写了,也没有什么,直接上核心了 新增行 function addRow(obj){ //获得table一共有多少行,方便追加的时候给序号赋值 var length = $("#grid tr").length; //获得当前是第几行,以便追加的时候,在该行下进行新增,我这里跨的级别比较多,根据实际层级去定义 var current = $(obj).parent().parent().parent().prevAll().l

JS动态增删表格行的方法_javascript技巧

本文实例讲述了JS动态增删表格行的方法.分享给大家供大家参考,具体如下: function insertRow(tableName,className,bgcolor, cellContentArray){ var t = document.getElementByIdx(tableName); //取得table表 var tr = t.insertRow(); //插入一行 tr.className=className; //设置行的css tr.bgcolor=bgcolor; //设置行

javascript 动态添加表格行

javascript|动态 介绍如何使用javascript动态添加表格行,并对其中的方法做详细的说明 动态添加表格行 文/Ray  表格部分代码如下: <table id="testTbl" border=1> <tr id="tr1"> <td width=6%><input type=checkbox id="box1"></td> <td id="b"&

jquery动态增加text元素以及删除文本内容实例代码

这段代码是通过jquery动态增加限定数额的text(本例为5个) ,以及清除文本内容,用到了after()方法追加元素. <!--以下为script代码开始--> 复制代码 代码如下: <script> $(document).ready(function(){ var spotMax = 5;//限定添加text元素的总个数 var afterId = 0;//要追加元素的id var newId=1;//新生成text的id if($('table#vote').size()