如何更改jquery中现有表中的表行值? [英] How to change the table row value in existing table in jquery?
问题描述
我有一个 jquery 脚本来控制表行(tr)上下移动.
I have one jquery script to control table row(tr) move up/down.
脚本
$(document).ready(function()
{
$('#mytable a.move').click(function()
{
var row = $(this).closest('tr');
if ($(this).hasClass('up'))
{
row.prev().before(row);
}
else
row.next().after(row);
});
});
HTML
<table cellspacing="1" cellpadding="1" width="250" align="left"
bgcolor="#eeeeee" border="0" id="mytable">
<thead>
<tr class="tablebody">
<th width="21" class="tablehead">S.No</th>
<th width="119" class="tablehead">levels</th>
<th width="100" class="tablehead">Sort</th>
</tr>
</thead>
<tbody>
<tr class="tablebody" id="status2">
<td class="tdValue"> 1 </td>
<td>level - 1 </td>
<td width="100"><a class="move up" href="javascript:void(0)"><img src="images1/arrow_up.gif" alt="Up" width="11" height="13" border="0" /></a> <a class="move down" href="javascript:void(0)"><img src="images1/arrow_down.gif" alt="down" width="11" height="13" border="0" /></a> </td>
</tr>
<tr class="tablebody" id="status3">
<td class="tdValue"> 2 </td>
<td>level - 2 </td>
<td width="100"><a class="move up" href="javascript:void(0)"><img src="images1/arrow_up.gif" alt="Up" width="11" height="13" border="0" /></a> <a class="move down" href="javascript:void(0)"><img src="images1/arrow_down.gif" alt="down" width="11" height="13" border="0" /></a> </td>
</tr>
</tbody>
</table>
我可以将 tr 向上/向下移动n"个 TD.但是,无法在完成 tr up/down 后将 s.no 2 更改为 1.
I can able to move the tr up/down for "n" of TD's. but, can't able to change the s.no 2 to 1 after complete tr up/down.
或者我只想向上/向下移动两个 TD(级别和排序)而不是 S.no TD
or i want to move up/down only two TD's(levels and sort) not S.no TD
请提供此问题的详细步骤.
kindly provide me the detailed steps for this issue.
推荐答案
您可以使用 .find()
方法获取带有 "tdValue"
的 td 元素class 中的每一行,然后使用 .html()
方法获取和设置它们的值:
You can use the .find()
method to get the td element with the "tdValue"
class in each row and then use the .html()
method to get and set their values:
$(document).ready(function() {
$('#mytable a.move').click(function() {
var up = $(this).hasClass('up'),
thisRow = $(this).closest('tr'),
thisTD = thisRow.find(".tdValue")
thisSNo = thisTD.html(),
otherRow = thisRow[up?"prev":"next"](),
otherTD = otherRow.find(".tdValue");
if(otherRow.length){
thisTD.html(otherTD.html());
otherTD.html(thisSNo);
otherRow[up?"before":"after"](thisRow);
}
});
});
if(otherRow.length)
测试是为了避免尝试从底行向下或从顶行向上.
The if(otherRow.length)
test is to avoid trying to go down from the bottom row or up from the top row.
演示:http://jsfiddle.net/nnnnnn/mKq5S/
这篇关于如何更改jquery中现有表中的表行值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!