日期:2014-05-16  浏览次数:20390 次

js在table指定tr行上或下面添加tr行

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;?
??????? }??


<table style="width: 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>??


var table = document.getElementById("tableId");?
table.innerHTML = table.innerHTML + "<tr>......</tr>";??

table.rows // table 中所有行的集合?
table.tBodies // table 中 tbody 中的所有行的集合??

利用这两个集合也可以做一些事情




另外 document.createElement("tr") 方法可以创建个空行出来,参数就是 tag 名

主要是取得本行tr,再调用after()或before()函数,在相应位置添加内容。

$(“#tab #tr1″).after(‘<tr><td>4</td></tr>’)

$(“#tab #tr1″).before(‘<tr><td>4</td></tr>’)



<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
02
<script>
03
$(function(){??
04
??? $("#getAtr").click(function(){??????????
05
??????? $str='';
06
??????? $str+="<tr align='center'>";
07
??????? $str+="<td><input type='text' name='advTitle[]'/></td>";
08
??????? $