CODEWITHSUNDEEP
jquerytablesorter
webspicer
webspicer

Reputation: 11

How to change the table row value in existing table in jquery?

I have one jquery script to control table row(tr) move up/down.

Script

$(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>

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.

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.

Upvotes: 1

Views: 2100

Answers (2)

nnnnnn
nnnnnn

Reputation: 150020

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

The if(otherRow.length) test is to avoid trying to go down from the bottom row or up from the top row.

Demo: http://jsfiddle.net/nnnnnn/mKq5S/

Upvotes: 2

Yograj Gupta
Yograj Gupta

Reputation: 9869

You can try this

$(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
        }
    });

});

check this quick DEMO

Upvotes: 2

Related Questions