zoukankan      html  css  js  c++  java
  • js动态添加和删除table的行例子

    <table id="table_report" class="table table-striped table-bordered table-hover">
                    
                    <thead>
                        <tr>
                            <th>编码</th>
                            <th>名称</th>
                            <th>排序</th>
                            <th>备注</th>
                            <th  style=" 80px;" class="center"><a class="btn btn-mini btn-success" onclick="insertTableRow();" >新增</a></th>
                        </tr>
                    </thead>
                                            
                    <tbody>
                            
                                <tr>
                                    <td>
                                        <input type="text" name="subCode" />
                                    </td>
                                    <td><input type="text" name="subName" /></td>
                                    <td><input type="text" name="orderNum" /></td>
                                    <td><textarea rows="1" cols="10" name="subMemo" ></textarea></td>
                                    <td style=" 80px;" class="center">
                                        <div >
                                            <a class='btn btn-mini btn-danger' title="删除" onclick="deleteTableRow()" >删除</a>
                                        </div>
                                    </td>
                                </tr>
    
                    </tbody>
                </table>
    
    <script>
    function insertTableRow(){
        var tableId = "table_report";
        var table = document.getElementById(tableId);
        var row = table.insertRow();//默认-1从最后一行插入,insertRow(0)的话就是从第一行插入
        
        var cell1 = row.insertCell();
        var cell2 = row.insertCell();
        var cell3 = row.insertCell();
        var cell4 = row.insertCell();
        var cell5 = row.insertCell();
        
        cell1.innerHTML = "<input type="text" name="subCode" />";
        cell2.innerHTML = "<input type="text" name="subName" />";
        cell3.innerHTML = "<input type="text" name="orderNum" />";
        cell4.innerHTML = "<textarea rows="1" cols="10" name="subMemo" ></textarea>";
        cell5.innerHTML = "<div ><a class='btn btn-mini btn-danger' title="删除" onclick="deleteTableRow()" >删除</a></div>";
        
        cell5.className="center";
        cell5.style.width="80px";
        
    }
    
    function deleteTableRow(){
        var tableId = "table_report";
        //因为a标签的上级还有个div,所以多一层parentNode
        var index = event.srcElement.parentNode.parentNode.parentNode.rowIndex;
        var table = document.getElementById(tableId);
        table.deleteRow(index);
    }
    </script>
  • 相关阅读:
    Android开机自启动应用
    扫码登录原理
    前端性能优化
    关于android推送的一些心得
    抓包工具Fiddler及iphone设置
    Node.js介绍、优势、用途
    Yapi本地化部署及接口调试(亲测)
    前后端分离,几个常用的API管理系统
    WebGL之Threejs概述
    Eclipse汉化
  • 原文地址:https://www.cnblogs.com/jinzhiming/p/7007474.html
Copyright © 2011-2022 走看看