jQuery在postion插入表行 [英] JQuery insert table row at postion
问题描述
我一直在研究能够将行插入到html表的解决方案。它非常棘手。我发现了一些有用的东西,但仅限于第一个插入。我无法弄清楚我做错了什么。
我有一个带3列的基本表每个表都有一个按钮,允许在2行之间插入一行。我在这个网站上搜索了一个解决方案,并得到了一个jquery解决方案,即当我按下按钮时,它会添加我想要的行。但是当我在插入最后一行后插入另一行时,该行被插回1位,下一次我按下插入的2行后面的按钮等等。我无法弄清楚什么即时通讯做错了任何人知道为什么它做这是什么?
更好的是有更好的方法来做到这一点?即在任何位置向表中添加一行?
JQuery代码;
<脚本>
$(document).ready(function(){
$(。addRow)。click(function(event){
//获取按钮id该行
var $ id = this.id;
var $ totrecords;
var $ newrow;
var $ totalrowsadded;
//获取单击按钮的ID
$ id = $ id.replace(add_,);
$ totrecords = document.getElementById('totalrecords')。value;
$ totrecords ++;
//商店添加的行数
$ totalrowsadded = document.getElementById('totalrowsadded')。value;
$ totalrowsadded ++;
document.getElementById('totalrowsadded') .value = $ totalrowsadded;
//更新记录数
document.getElementById('totalrecords')。value = $ totrecords;
var $ html =' < tr class =newrow>< td>'+ $ totrecords +'< button type =buttonclass =addRowid =add _'+ $ totrecords +'> add< / button><<< ; / td>< td>< label for =ProductHeight'+ $ totrecords +'> height&l t; / label>< input name =data [Product] [height'+ $ totrecords +']type =textvalue =0id =ProductHeight'+ $ totrecords +'/>< td>< td>< label for =ProductWidth'+ $ totrecords +'>宽度< / label>< input name =data [Product] [width'+ $ totrecords +']type =text value =0id =ProductWidth'+ $ totrecords +'/>< / td>< td>< label for =ProductPrice'+ $ totrecords +'> List Price< / label>< input name =data [Product] [price'+ $ totrecords +']type =textid =ProductPrice'+ $ totrecords +'/>< / td>< / tr>';
$ newrow = parseInt($ id)+1;
alert('new row insert at'+ $ newrow); ($ html);
$('#productstable> tbody> tr:nth-child('+ $ newrow +')')。
});
});
< / script>
我的表格是这样的;
< table id =productstable>
< tr>
< th>插入< / th>
< th>高度< / th>
< th>宽度< / th>
列表价格< / th>
< / tr>
< tbody>
< tr id =0>
< td> 0:< button type =buttonclass =addRowid =add_0> add< / button>< / td>
< td>< label for =ProductHeight0> height< / label>< input name =data [Product] [height0]type =textvalue =115id = ProductHeight0\" />< / TD>
< td>< label for =ProductWidth0> width< / label>< input name =data [Product] [width0]type =textvalue =595id = ProductWidth0\" />< / TD>
< td>< label for =ProductPrice0> List Price< / label>< input name =data [Product] [price0]type =textid =ProductPrice0/> ;< / TD>
< / tr>
< tr id =1>
< td> 1:< button type =buttonclass =addRowid =add_1> add< / button>< / td>
< td>< label for =ProductHeight1> height< / label>< input name =data [Product] [height1]type =textvalue =140id = ProductHeight1\" />< / TD>
< td>< label for =ProductWidth1>宽度< / label>< input name =data [Product] [width1]type =textvalue =295id = ProductWidth1\" />< / TD>
< td>< label for =ProductPrice1> List Price< / label>< input name =data [Product] [price1]type =textid =ProductPrice1/> ;< / TD>
< / tr>
< tr id =2>
< td> 2:< button type =buttonclass =addRowid =add_2> add< / button>< / td>
< td>< label for =ProductHeight2> height< / label>< input name =data [Product] [height2]type =textvalue =140id = ProductHeight2\" />< / TD>
< td>< label for =ProductWidth2> width< / label>< input name =data [Product] [width2]type =textvalue =395id = ProductWidth2\" />< / TD>
< td>< label for =ProductPrice2> List Price< / label>< input name =data [Product] [price2]type =textid =ProductPrice2/> ;< / TD>
< / tr>
< tr id =3>
< td> 3:< button type =buttonclass =addRowid =add_3> add< / button>< / td>
< td>< label for =ProductHeight3> height< / label>< input name =data [Product] [height3]type =textvalue =140id = ProductHeight3\" />< / TD>
< td>< label for =ProductWidth3>宽度< / label>< input name =data [Product] [width3]type =textvalue =495id = ProductWidth3\" />< / TD>
< td>< label for =ProductPrice3> List Price< / label>< input name =data [Product] [price3]type =textid =ProductPrice3/> ;< / TD>
< / tr>
< / tbody>
< / table>
您希望JQuery 追加
函数:
$('#productstable TBODY')。append($ html);
要在包含点击按钮的行后添加一行,请使用以下命令:
($ html); $(this).closest('TR')。
最接近
找到最近的TR,然后在
之后放置它。
Ive been working on a solution to being able to insert a row to a html table. Its been quite tricky. Ive found something that works but only for the first "insert". I cant figure out what im doing wrong.
Ive a basic table with 3 colums each table has a button to allow the insertion of a row between 2 rows. Ive searhed on this site for a solution and got a jquery solution that works i.e when i press the button it adds the row where i want it. But when i add another row after where i inserted the last row, the row is inserted 1 position back, the next time i press the button its inserted 2 rows back etc. I cant figure out what im doing wrong any one know why its doing this?
Even better is there a better way to do this? i.e add a row into a table at any postion?
JQuery code;
<script>
$(document).ready(function(){
$(".addRow").click(function(event){
//get the button id to get the row
var $id=this.id;
var $totrecords;
var $newrow;
var $totalrowsadded;
//get id of clicked button
$id=$id.replace("add_", "");
$totrecords=document.getElementById('totalrecords').value;
$totrecords++;
//store number of rows added
$totalrowsadded=document.getElementById('totalrowsadded').value;
$totalrowsadded++;
document.getElementById('totalrowsadded').value=$totalrowsadded;
//update record count
document.getElementById('totalrecords').value=$totrecords;
var $html='<tr class="newrow"><td>'+$totrecords+'<button type="button" class="addRow" id="add_'+$totrecords+'">add</button></td><td><label for="ProductHeight'+$totrecords+'">height</label><input name="data[Product][height'+$totrecords+']" type="text" value="0" id="ProductHeight'+$totrecords+'"/></td><td><label for="ProductWidth'+$totrecords+'">width</label><input name="data[Product][width'+$totrecords+']" type="text" value="0" id="ProductWidth'+$totrecords+'"/></td><td><label for="ProductPrice'+$totrecords+'">List Price</label><input name="data[Product][price'+$totrecords+']" type="text" id="ProductPrice'+$totrecords+'"/></td></tr>';
$newrow=parseInt($id)+1;
alert('new row insert at '+$newrow);
$('#productstable > tbody> tr:nth-child(' + $newrow + ')').after($html);
});
});
</script>
My table looks like this;
<table id="productstable">
<tr>
<th>Insert</th>
<th>Height</th>
<th>Width</th>
<th>List price</th>
</tr>
<tbody>
<tr id="0">
<td>0 :<button type="button" class="addRow" id="add_0">add</button></td>
<td><label for="ProductHeight0">height</label><input name="data[Product][height0]" type="text" value="115" id="ProductHeight0"/></td>
<td><label for="ProductWidth0">width</label><input name="data[Product][width0]" type="text" value="595" id="ProductWidth0"/></td>
<td><label for="ProductPrice0">List Price</label><input name="data[Product][price0]" type="text" id="ProductPrice0"/></td>
</tr>
<tr id="1">
<td>1 :<button type="button" class="addRow" id="add_1">add</button></td>
<td><label for="ProductHeight1">height</label><input name="data[Product][height1]" type="text" value="140" id="ProductHeight1"/></td>
<td><label for="ProductWidth1">width</label><input name="data[Product][width1]" type="text" value="295" id="ProductWidth1"/></td>
<td><label for="ProductPrice1">List Price</label><input name="data[Product][price1]" type="text" id="ProductPrice1"/></td>
</tr>
<tr id="2">
<td>2 :<button type="button" class="addRow" id="add_2">add</button></td>
<td><label for="ProductHeight2">height</label><input name="data[Product][height2]" type="text" value="140" id="ProductHeight2"/></td>
<td><label for="ProductWidth2">width</label><input name="data[Product][width2]" type="text" value="395" id="ProductWidth2"/></td>
<td><label for="ProductPrice2">List Price</label><input name="data[Product][price2]" type="text" id="ProductPrice2"/></td>
</tr>
<tr id="3">
<td>3 :<button type="button" class="addRow" id="add_3">add</button></td>
<td><label for="ProductHeight3">height</label><input name="data[Product][height3]" type="text" value="140" id="ProductHeight3"/></td>
<td><label for="ProductWidth3">width</label><input name="data[Product][width3]" type="text" value="495" id="ProductWidth3"/></td>
<td><label for="ProductPrice3">List Price</label><input name="data[Product][price3]" type="text" id="ProductPrice3"/></td>
</tr>
</tbody>
</table>
You want the JQuery append
function:
$('#productstable TBODY').append($html);
To add a row after the row containing the button that was clicked, use this:
$(this).closest('TR').after($html);
The closest
function walks up the tree to find the nearest TR, then after
will put it after it.
这篇关于jQuery在postion插入表行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!