zoukankan      html  css  js  c++  java
  • js在table指定tr行添加tr行

    1.Ajax动态添加数据始终在table的首行

      ajax:


    $.post("servlet/TuCaoServlet",
    {
    tucaoComment: $("#tucaoComment").val() ,
    method : 'addTcComment',

    }, function(data){
    $.each(data,function(index,tucao){
    $("#txt :first").before( "<tr><td align='right' width='33%''><b>" + tucao.Title + "</b></td><td align='left'>"+ '&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp'+tucao.Description+" </td></tr><tr><td colspan='2'><hr></td></tr>");

    });
    } ,"json" );

    html

    <table width="100%" style="word-break:break-all;word-wrap:break-word">
    <tbody id="txt">
    </tbody>
    </table>

    2.js在table指定tr行添加tr行

    javascript:

    function onAddTR(trIndex) 
            { 
                var tb = document.getElementById("tb1"); 
                var newTr = tb.insertRow(trIndex);//添加新行,trIndex就是要添加的位置 
                var newTd1 = newTr.insertCell(); 
                newTd1.innerHTML = "这是新行,位置:" + trIndex; 
                var newTd2 = newTr.insertCell(); 
                newTd2.innerHTML = "这是新行,位置:" + trIndex; 
            }  

    html:

    <table style=" 100%;" id="tb1"> 
            <tr onclick="onAddTR(this)"> 
                <td>1</td> 
                <td>2</td> 
            </tr> 
            <tr onclick="onAddTR(this)"> 
                <td>3</td> 
                <td>4</td> 
            </tr> 
        </table> 
        <script type="text/javascript"> 
            function onAddTR(trObj) 
            { 
                $(trObj).after("<tr onclick='onAddTR(this)'><td>这是新行</td><td></td><tr/>"); 
            } 
        </script>  

  • 相关阅读:
    CentOS 7 搭建 LAMP
    CentOS 7 安装 nginx
    ms-sql关联表操作
    在CentOS下自动备份mysql
    Redhat 7 或者 CentOS 7 密码破解
    java环境变量的设置
    CentOS6.6安装及配置vsftpd文件服务器
    Virtualbox虚拟机配置CentOS7.0静态网络
    CentOS6.6安装vmware workstation报错
    CentOS6.6安装virtualbox4.1.44
  • 原文地址:https://www.cnblogs.com/wangle2014/p/3758391.html
Copyright © 2011-2022 走看看