JS table行列增删

JSP:

<div class="form-actions">
                                                        
                                                        <button id="addR" type="button" class="btn btn-sm btn-primary">
                                                             <i class="icon-filter"></i> 添加行
                                                        </button>
                                                        <button id="addC" type="button" class="btn btn-sm btn-primary">
                                                             <i class="icon-filter"></i> 添加列
                                                        </button>
                                                        <button id="delR" type="button" class="btn btn-sm btn-primary">
                                                             <i class="icon-filter"></i> 删除行
                                                        </button>
                                                        <button id="delC" type="button" class="btn btn-sm btn-primary">
                                                             <i class="icon-filter"></i> 删除列
                                                        </button>
                                                    </div>
<div>

<table id="sample-table-1"
                                            class="table table-striped table-bordered table-hover">
    
                                        </table>

</div>

JS:

//添加行
$("#addR").click(function() {
                     var tb = document.getElementById("sample-table-1");
                       var len = tb.rows.length;
                       var r =tb.insertRow(len);
                       for (var int = 0; int < tb.rows[0].cells.length; int++) {
                        var c = r.insertCell(int);
                        c.innerHTML = "XXXX";
                    }
                });

//添加列
                $("#addC").click(function() {
                    var tb = document.getElementById("sample-table-1");
                    for (var int = 0; int < tb.rows.length; int++) {
                        var cs =tb.rows[int];
                        var c = cs.insertCell(0);
                        c.innerHTML = "XXXX";
                    } 
                });

//删除最后行
                $("#delR").click(function() {
                    var tb = document.getElementById("sample-table-1");
                    tb.deleteRow(tb.rows.length-1);
                });

//删除最后列
                $("#delC").click(function() {
                    var tb = document.getElementById("sample-table-1");
                    for (var int = 0; int < tb.rows.length; int++) {
                        tb.rows[int].deleteCell(tb.rows[0].cells.length-1);
                    }
                });


//获取table行数
 var table =document.getElementById("sample-table-1");
 var rows = table.rows.length;
 alert('行数'+rows);
//获取第一行列数
 var colums = table.rows[0].cells.length;
 alert('列数'+colums);



table相当于一个二维数组element类

Table{

rows = Rows[]();

}

Rows{

cells = Cells[]();

}

//获取table中的值     table.rows[0].cells[0].innerText   或者 innerHTML
//删除指定行列，传入相应index即可

 

转载于:https://www.cnblogs.com/Mr-xy/p/10916605.html