问题描述
我有一个动态表,我希望能够用另一页中的数据替换整行.我希望能够一遍又一遍地替换数据而无需刷新页面.我在此处开了个小提琴,但不明白为什么$("#rowid").replaceWith(newdata);
似乎不起作用.如果我将其更改为$("#2").replaceWith(newdata);
,则id = 2的第2行将按预期替换.
I have a dynamic table and I want to be able to replace an entire row with data from another page.I want to be able to replace the data over and over again without refreshing the page. I have made a fiddle here but can't understand why $("#rowid").replaceWith(newdata);
does not seem work. If I change this to $("#2").replaceWith(newdata);
then row 2 with id=2 gets replaced as expected.
我怎么了?非常感谢.
html
<div class="container">
<table class="table" id="data_table"><tbody><tr><th></th> <th></th><th></th>
</tr>
<tr class="table" id="1"><td></td><td class="prod">First cell</td><td class="prod">Second cell</td><td class="prod">Third Cell</td><td> <button type="button" id="btn1" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="2"><td></td><td class="prod">Fourth Cell</td><td class="prod">Fifth cell</td><td class="prod">Sixth Cell</td><td> <button type="button" id="btn2" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="3"><td></td><td class="prod">Seventh</td><td class="prod">Eighth</td><td class="prod">Ninth</td><td> <button type="button" id="btn3" class="add-row">Replace Row</button></td></tr>
<tbody>
</table>
</div>
jQuery
$('#data_table').on("click", "tr",function(){
var btnid= $(this).attr("id");//Find button ID
var rowid= $(this).closest('tr').attr("id");//Find row ID
var newdata= '<tr class="table" id="4"><td></td><td class="prod">10</td><td class="prod">11</td><td class="prod">12</td><td><button type="button" id="btn1" class="add-row">Replace Row</button></td></tr>'; //Data to be replaced
alert(rowid);
$("#rowid").replaceWith(newdata); //Replace clicked row with data
});
推荐答案
您需要使用$("#"+rowid)
而不是$("#"+rowid)
,因为rowid
是变量而不是选择器.
Instead of $("#rowid")
you need to use $("#"+rowid)
since rowid
is the variable not a selector.
/* Latest compiled and minified JavaScript included as External Resource */$('#data_table').on("click", "tr",function(){
var btnid= $(this).attr("id");//Find button ID
var rowid= $(this).closest('tr').attr("id");//Find row ID
var newdata= '<tr class="table" id="4"><td></td><td class="prod">10</td><td class="prod">11</td><td class="prod">12</td><td><button type="button" id="btn1" class="add-row">Replace Row</button></td></tr>';
//alert(rowid);
$("#"+rowid).replaceWith(newdata);
});
//$("#"+btn).click(function(){
// });
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<table class="table" id="data_table"><tbody><tr><th></th> <th></th><th></th>
</tr>
<tr class="table" id="1"><td></td><td class="prod">First cell</td><td class="prod">Second cell</td><td class="prod">Third Cell</td><td> <button type="button" id="btn1" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="2"><td></td><td class="prod">Fourth Cell</td><td class="prod">Fifth cell</td><td class="prod">Sixth Cell</td><td> <button type="button" id="btn2" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="3"><td></td><td class="prod">Seventh</td><td class="prod">Eighth</td><td class="prod">Ninth</td><td> <button type="button" id="btn3" class="add-row">Replace Row</button></td></tr>
<tbody>
</table>
</div>
这篇关于替换动态表中的整个表行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!