Question

我有一个jquery脚本来控制表行（tr）向上/向下移动。

脚本

$(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向上/向下移动到TD的“n”。但是，在完成tr up / down之后无法将s.no 2改为1.

或者我想向上/向下移动两个TD（级别和排序）而不是S.no TD

请向我提供此问题的详细步骤。

Answer 1

你可以试试这个

$(document).ready(function()
{
    $('#mytable a.move').click(function()
    {
        var row = $(this).closest('tr');

        if ($(this).hasClass('up'))
        {
            var preTr = row.prev(); // Get Previous TR
            var prevSN = preTr.find('td:eq(0)').html(); // Get Previous TR S.No
            row.find('td:eq(0)').html(prevSN); // Set To Current Row S.No
            preTr.find('td:eq(0)').html(Number(prevSN)+1); // Set To Previos S.No, Previous + 1
            preTr.before(row); //Change in DOM
        }
        else
        {
            var nextTr = row.next(); // Get Next TR
            var nextSN = nextTr .find('td:eq(0)').html(); // Get Next S.No
            row.find('td:eq(0)').html(nextSN ); // Set Next S.No. To Current Tr
            nextTr.find('td:eq(0)').html(Number(nextSN)-1); // Set Next S.No -1 To Next Tr
            nextTr.after(row); //Change in DOM
        }
    });

});

快速查看 DEMO

Answer 2

您可以使用.find()方法获取每行中"tdValue"类的td元素，然后使用.html()方法获取并设置其值：

$(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)测试是为了避免尝试从底行向上或从顶行向上。

演示：http://jsfiddle.net/nnnnnn/mKq5S/

如何在jquery中更改现有表中的表行值？

2 个答案: