首页 > Web开发 > 详细

js 表格动态增加行通用函数

时间:2015-04-10 15:45:09      阅读:248      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
    <style>
        td{height:30px;border:1px solid #000;}
    </style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse; " id="modifytable1">
    <tbody>
    <tr>
        <td>日期</td><td>时间</td><td>登记人</td>
    </tr>
    <tr>
        <td>日期</td><td>时间</td><td>登记人</td>
    </tr>
    <tr>
        <td>日期1</td><td>时间</td><td>登记人</td>
    </tr>
    </tbody>
    </table>
    <button onclick="addRow(this)" >添加1</button>
    <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse; " id="modifytable2">
    <tbody>
    <tr>
        <td>日期</td><td>时间</td><td>登记人</td>
    </tr>
    <tr>
        <td>日期</td><td>时间</td><td>登记人</td>
    </tr>
    <tr>
        <td>日期2</td><td>时间</td><td>登记人</td>
    </tr>
    </tbody>
    </table>
    <button onclick="addRow(this)" >添加2</button>
    <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse; " id="modifytable3">
    <tbody>
    <tr>
        <td>日期</td><td>时间</td><td>登记人</td>
    </tr>
    <tr>
        <td>日期</td><td>时间</td><td>登记人</td>
    </tr>
    <tr>
        <td>日期3</td><td>时间</td><td>登记人</td>
    </tr>
    <tr>
        <td>日期4</td><td>时间</td><td>登记人</td>
    </tr>
    <tr>
        <td>日期5</td><td>时间</td><td>登记人</td>
    </tr>
    </tbody>
    </table>
    <button onclick="addRow(this)" >添加2</button>
    <script>
        function addRow(obj){
            var td_i = 0;
            var td_str = ‘‘;
            td_i = $(obj).prev().children().children().last().children().length;
            console.log(td_i);
            for (var i = 0; i < td_i; i++) {
                td_str = td_str + ‘<td></td>‘;
            };
            td_str = ‘<tr>‘ + td_str + ‘</tr>‘;
            $(obj).prev().children().children().last().after(td_str);
            td_str = ‘‘; td_i = 0;
        }
    </script>
</body>
</html>

删除(按钮在表格行内):
function deleterowok(obj){
    $(obj).closest("tr").remove();
}


js 表格动态增加行通用函数

原文:http://my.oschina.net/u/861926/blog/398503

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!