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="width: 100%;" id="tb1"> 
        <tr οnclick="onAddTR(this)"> 
            <td>1</td> 
            <td>2</td> 
        </tr> 
        <tr οnclick="onAddTR(this)"> 
            <td>3</td> 
            <td>4</td> 
        </tr> 
    </table> 
    <script type="text/javascript"> 
        function onAddTR(trObj) 
        { 
            $(trObj).after("<tr οnclick='onAddTR(this)'><td>这是新行</td><td></td><tr/>"); 
        } 
    </script>  

 

 

 

 

 

 

转载于:https://www.cnblogs.com/wangle2014/p/3758391.html