javascript表格操作

最新推荐文章于 2023-02-06 19:13:34 发布

十一路客

最新推荐文章于 2023-02-06 19:13:34 发布

阅读量326

点赞数

分类专栏： JS 文章标签： javascript table

本文链接：https://blog.csdn.net/xyr05288/article/details/77244286

版权

JS 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

一. 表格追加行

var row1 = "<tr><td></td></tr><tr><td></td></tr>";
var o=document.createElement("div"),ol; 
o.innerHTML="<table>"+row1+"</table>"; 
ol=o.childNodes[0].tBodies[0].rows; 
while(ol.length>0){ 
      //console.log(ol[0]);
      //console.log(table.tBodies[0]);
      //table.tBodies[0].appendChild(ol[0]); //在表格的最后一行添加
      //alert("table.rows.length: " + table.rows.length);
      //在第一行加
      if(table.rows.length>1){
        table.tBodies[0].insertBefore(ol[0],table.rows[1]); 

      }else{
         table.tBodies[0].appendChild(ol[0]);
      }
}

二. 表格删除行，将表格行数保持在固定值

var multipleTableRowLen = 6; //表格行数的初始值
var table = document.getElementById(tableId);
var rowsLength = table.rows.length;
if(rowsLength > multipleTableRowLen){
    //删除在表头添加的几行
    /*for(var i=1; i<1+rowsLength-6; i++){
        //console.log(table.rows[i].rowIndex);
        table.deleteRow(i);
    }*/
    //注意每删除一行 表格长度rows.length也会减一 但rowsLength大小一直不变
    for(var i=0; i<rowsLength-multipleTableRowLen; i++){
        table.deleteRow(multipleTableRowLen);
    }
}

三.编辑表格单元格input内容同步放大文本框（类似excel）
HTML：

<div style="margin-bottom:5px;">
    <input id="bigTextInput" placeHolder="放大输入框" type="text" class="form-control inputCls" />
 </div>

<table id="inputInfoTab" class="inputTableCls table-condensed table-bordered" style="width:100%;border:1px solid #ddd;">               
    <tr>
        <td><input type="text" class="form-control inputCls" /></td>
        <td><input type="text" class="form-control inputCls" /></td>
        <td><input type="text" class="form-control inputCls" /></td>
        <td><input type="text" class="form-control inputCls" /></td>
        <td><input type="text" class="form-control inputCls" /></td>
        <td><input type="text" class="form-control inputCls" /></td>
     </tr>
</table>

javascript:

//放大文本框
$("#bigTextInput").on("keyup",function(e){
     $("input.editingCls").val($(this).val());
});

$("#inputInfoTab input").on("keyup",function(e){
    $("#bigTextInput").val($(this).val());
});

$("#inputInfoTab input").on("focus",function(e){
    $("#bigTextInput").val($(this).val());
    if(!$(this).hasClass("editingCls")){
            $("#inputInfoTab")
                .find("input.editingCls")
                .removeClass("editingCls");
            $(this).addClass("editingCls");
    }
});