js table 相关操作的总结

         最近做个点击table单元格能变成编辑状态的页面，顺便总结js table的相关操作。

          示例表格html

            <table id="table-1" class="table table-striped table-bbilled table-hover" aria-describedby="sample-table-2-info">
                <thead style="background: #F7FAFE">
                    <tr class="ui-jqgrid-labels" role="rowheader">
                        <th序号</th>
                        <th>仓库编码</th>
                        <th>仓库名称</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody role="alert" aria-live="polite" aria-relevant="all">

 <span style="white-space:pre">		</span>     <tr >
                                <td >1</td>
                                <td class="edt" >code </td>
                                <td class="edt">
                                     WarehouseText[index]
                                </td>
                                <td aria-describedby="grid-table_myac" title="" style="" role="gridcell">
                                    <center>
                                        <div id="btndel-1" itemid="1" class="ui-pg-div ui-inline-del" data-original-title="Delete selcted row"
                                             style="float:left;margin-left:10px; cursor:pointer;" title="删除" οnclick='deleteRow(this)'>
                                            <i class="ace-icon fa fa-trash-o bigger-120 red"></i>
                                        </div> 
                                    </center>
                                </td>
                            </tr>

•  查找table 有多少行

 <span style="white-space:pre">	</span> var tableLength = $("#table-1").find("tr").length; //注意如果表格只有表头那长度是1 

•  查找表格最后一行

                   var lastRow1 =   $("#table-1").find("tr:last");

•  将最后一行非表头行复制然后插入到最后行

        

<span style="white-space:pre">	</span>    var tb = $("#table-1");
            var firstRow = tb.find("tr:last");
            var cloneRow = firstRow.clone(true);
            var cells = cloneRow[0].cells;
            cells[0].innerText = index;   //这里是赋值了行号，序号
            cells[1].innerText = "";      //复制之后的内容清空
            cells[2].innerText = "";      
            cloneRow.appendTo(tb);

•  如果只有表头那插入一个新行 只能拼html了

           

<pre name="code" class="javascript">var tableLength = $("#table-1").find("tr").length; //获得当前行数

if (<span style="font-family: Arial, Helvetica, sans-serif;">tableLength </span><span style="font-family: Arial, Helvetica, sans-serif;">== 1) //只有表头 插入第一行</span>
        {
            var str = "<tr><td>1</td><td  class='edt' ></td><td  class='edt'></td><td aria-describedby='grid-table_myac'  title='' style='' role='gridcell'>"
                        + " <center> "
                        + "<div id='btndel-1' itemid='1' class='ui-pg-div ui-inline-del' data-original-title='Delete selcted row'"
                        + "style='float:left;margin-left:10px; cursor:pointer;' title='删除' οnclick='deleteRow(this)'> "
                        + "<i class='ace-icon fa fa-trash-o bigger-120 red'></i>"
                        + "</div>"
                        + "</center>"
                        + "</td>"
                        + "</tr>";
            $("#table-1").append(str);
        }

• 点击删除图标后删除所在行，并且重新排列行号

        

 <span style="white-space:pre">	</span>function deleteRow(div) {
        <span style="white-space:pre">	</span>var tr = div.parentNode.parentNode.parentNode;
<span style="white-space:pre">	</span>        $("#table-1").find(tr).remove();
        <span style="white-space:pre">	</span>//删除之后重新设置index
<span style="white-space:pre">	</span>        var tableLength = $("#table-1").find("tr").length;
        <span style="white-space:pre">	</span>if (tableLength > 1)
<span style="white-space:pre">	</span>        {
        <span style="white-space:pre">	</span>    var rows =  $("#table-1").find("tr");
	            var i =1;
        <span style="white-space:pre">	</span>    for (i = 1; i < rows.length; i++)
<span style="white-space:pre">	</span>            {
        <span style="white-space:pre">	</span>        rows[i].cells[0].innerText = i ;
<span style="white-space:pre">	</span>            }
        <span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>    };

• 点击对应class 的单元格变成可编辑状态的js方法(借鉴了网上的一段代码，后面要自己实现)

           

 $("#table-1").on('click', '.edt', function () {
        var clickObj = $(this);
        content = clickObj.html();
        changeToEdit(clickObj, content);
    });
    
     function changeToEdit(node, content) {
         node.html("");
         var inputObj = $("<input type='text'   />");
         inputObj.css("width", 100).val(content).appendTo(node)
         .get(0).select();
         inputObj.click(function () {
             return false;
         }).keyup(function (event) {
             var keyvalue = event.which;
             if (keyvalue == 13) {
                 node.html(node.children("input").val());
             }
             if (keyvalue == 27) {
                 node.html(content);
             }
         }).blur(function () {
             if (node.children("input").val() != content) {
                 if (confirm("是否保存修改的内容？", "Yes", "No")) {
                     node.html(node.children("input").val());
                 } else {
                     node.html(content);
                 }
             } else {
                 node.html(content);
             }
         });
     }