jq操作table追加td

最新推荐文章于 2021-06-16 22:37:28 发布

weixin_30439031

最新推荐文章于 2021-06-16 22:37:28 发布

阅读量494

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lml-lml/p/10430211.html

版权

示例

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    </head>
    <style type="text/css">
        .well {
            font-weight: 600;
            position: relative;
            height: 22px;
        }
        .add {
            margin-left: 15px;
            position: absolute;
            cursor: pointer;
        }
    </style>
    <body>
        <table style="width:100%;border: 1px solid #ccc;" border="1" cellspacing="0" cellpadding="6" id="table1">
            <tr>
                <td align="center">1day</td>
                <td align="center" class="well">景点 <span class="add">+</span></td>
                <td align="center" rowspan="5">小计</td>
            </tr>
        </table>
    </body>
    <script>
        $(document).ready(function() {
            $(".add").click(function() {
                $(this).parents('tr').after('<tr><td class="well"></td></tr>');   //1，追加tr
                var num = $(this).parent().prev().attr('rowspan') ? $(this).parent().prev().attr('rowspan') : //2，判断第一个td有没有rowspan的属性
                $(this).parent().prev().attr('rowspan', num + 1);  //左侧的
                $(this).parent().next().attr('rowspan', num + 1); //右侧的
            })
        })
    </script>
</html>

转载于:https://www.cnblogs.com/lml-lml/p/10430211.html

weixin_30439031

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq操作table追加td

示例代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquer...
复制链接

扫一扫