动态插入表格行的两种方法

最新推荐文章于 2024-05-18 13:50:21 发布

utopion

最新推荐文章于 2024-05-18 13:50:21 发布

阅读量915

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/u013936945/article/details/63684780

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

//这种方法插入表格行时,
var msg="";
msg="<tr><td colspan='8'><table><tr><td>1</td><td>3</td><td>2</td><tr></table></td></tr>"
$("#datatable-details tr:eq("+tr.rowIndex+")").after(msg);

这里写图片描述

<html>
<head>
 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){

    $("#datatable-details").on('click', 'i[data-toggle]', function() {
    var $this = $(this),
    tr = $(this).closest( 'tr' ).get(0);
    if($this.hasClass('fa-plus-square-o')){
    //先对js表格中的元素有没有展开的。
    var tb = document.getElementById("datatable-details");
        var r = tb.insertRow(tr.rowIndex+1);
        var c1 = r.insertCell(0);
    c1.colSpan = 8;
    c1.innerHTML ="<td colspan='8'><table><tr><td>1</td><td>3</td><td>2</td><tr></table></td>";
      $this.removeClass( 'fa-plus-square-o' ).addClass( 'fa-minus-square-o' );
      }else {
                $this.removeClass( 'fa-minus-square-o' ).addClass( 'fa-plus-square-o' );
            }
        });


            }); 
</script>
</head>
<body>
<table id="datatable-details">
<tr>
<td><i data-toggle class="fa fa-plus-square-o text-primary h5 m-none" style="cursor: pointer;"></i></td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td><i data-toggle class="fa fa-plus-square-o text-primary h5 m-none" style="cursor: pointer;"></i></td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>

</table>

</body>
</html>

这里写图片描述
出现如上图所示

控制台输出如下这里写图片描述

utopion

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态插入表格行的两种方法

//这种方法插入表格行时,var msg="";msg="<tr><td colspan='8'><table><tr><td>1</td><td>3</td><td>2</td><tr></table></td></tr>"$("#datatable-details tr:eq("+tr.rowIndex+")").after(msg); <html><head> <script
复制链接

扫一扫