Найти предыдущий элемент таблицы с помощью jQuery

Question

У меня есть таблица HTML со следующим контентом.

<table class='main'> 
<tr id='r1' class='tbl'> 
    <td>V1</td> 
</tr> 
<tr id='r2' class='tbl'> 
    <td>V2</td> 
</tr> 
<tr id='r3' class='tbl'> 
    <td>V3</td> 
</tr> 
<tr id='r4' class='tbl'> 
    <td>V4</td> 
</tr> 
<tr id='r5' class='tbl'> 
    <td>V5</td> 
</tr> 
</table> 

Я могу выбрать строку, используя код jQuery. Когда я нажимаю кнопку «вверх» в html, я хочу поменять значение html выбранной строки с предыдущей строкой.

Можно ли использовать jQuery? Я пробовал несколько методов, но никто из них не работает.

Answer 1

Мне недавно пришлось сделать это для проекта. Вот код. Измените для использования.

         <table cellpadding="0" cellspacing="0" width="100%"> 

              <thead> 

               <tr id="table_buttons"> 
                <td width="45px">&nbsp;</td> 
                <th width="40px" align="left">Item #</th> 
                <th align="left" style="padding:0">Item Name</th> 
                <th align="left" style="padding:0">Quantity</th> 
                <th align="left">Cost</th> 
                <th align="left">Extended Cost</th> 
                <th align="left" style="padding:0">Price</th> 
                <th align="left">Extended Price</th> 
                <th align="left" width="55px">Margin</th> 
               </tr> 
              </thead> 

              <tbody> 

              <tr id="copy_this_row" style="display:none;" number="0"> 
               <td> 
                <a href="#" class="row_up"><img src="<?php echo url::base(FALSE); ?>media/images/up_arrow.png" style="vertical-align:middle" /></a> 
                <a href="#" class="row_down"><img src="<?php echo url::base(FALSE); ?>media/images/down_arrow.png" style="vertical-align:middle" /></a><br /><br /> 
                <a href="#" class="row_delete"><img src="<?php echo url::base(FALSE); ?>media/images/trash.png" style="vertical-align:middle" /></a> 
               </td> 
               <td field="item_number"></td> 
               <td style="padding:0"><input type="text" class="text small" style="width:150px;" name="item[]" autocomplete="off" class="item_name" /><textarea name="description[]" style="width:200px !important; height:50px"></textarea><input type="hidden" name="item_id[]" /></td> 
               <td style="padding:0"><input type="text" class="text small" style="width:50px;" name="qty[]" value="1" autocomplete="off" /></td> 
               <td field="cost"></td> 
               <td field="extended_cost"></td> 
               <td style="padding:0"><input type="text" class="text small" style="width:50px;" name="price[]" autocomplete="off" /></td> 
               <td field="extended_price"></td> 
               <td field="margin"></td> 
              </tr> 


               <tr id="copy_before_this"> 
                <td colspan="3"> 
                <div class="tableactions"> 
                 <input type="button" class="submit tiny" value="Add Line Item" id="add_row" /> <!-- <input type="button" class="submit tiny" value="Add Product" />  <input type="button" class="submit tiny" value="Add Service" />--> 
                </div><!-- .tableactions ends --></td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
               </tr> 
              </tbody></table> 

JQuery:

       $('.row_up').bind('click', function(){ 
             $(this).parent().parent().insertBefore($(this).parent().parent().prev()); 
             check_row_buttons(); 
             return false; 
           }); 


           $('.row_down').bind('click', function(){ 
             $(this).parent().parent().insertAfter($(this).parent().parent().next()); 
             check_row_buttons(); 
             return false; 
           }); 


           $('.row_delete').bind('click', function(){ 
             $(this).parent().parent().fadeOut(250, function(){ 
              $(this).remove(); 
              check_row_buttons(); 
              update_totals(); 
             }); 
             return false; 
           }); 


           function new_row(item_name,item_id,description,quantity,price){ 
            var insert_this = $('#copy_this_row'); 
            var number = $('*[number]:last').attr('number'); 
            number++; 
            var new_insert = insert_this.clone(true); 
            new_insert.removeAttr('id'); 
            new_insert.fadeIn(); 
            new_insert.insertBefore('#copy_before_this').attr('number',number); 

            check_row_buttons();   
            auto_comp();  

            if(item_name){ 
             $('tr[number='+number+']>td>input[name=item\\[\\]]').val(item_name); 
             item_info(item_id,number); 
            } 
            if(description){ 
            $('tr[number='+number+']>td>textarea[name=description\\[\\]]').val(description); 
            } 
            if(quantity){ 
             $('tr[number='+number+']>td>input[name=qty\\[\\]]').val(quantity); 
            } 
            if(price){ 
             $('tr[number='+number+']>td>input[name=price\\[\\]]').val(price); 
            } 
           } 


           $('#add_row').bind('click', function(){ 
            new_row(); 
           }); 


           function check_row_buttons(){ 
            $('.row_up').show(); 
            $('.row_down').show(); 
            $('.row_delete').show(); 
            $('.row_up:eq(1)').hide(); 
            $('.row_down:last').hide(); 

            if($('.row_delete').size() == 2){ 
             $('.row_delete').hide(); 
            } 
           } 


           check_row_buttons(); 

Это Snippit также включает в себя возможность добавлять строки, которые могут быть легко удалены.

Обратите внимание на $ ('. Row_up') и $ ('. Row_down'), чтобы увидеть, как перемещать строки вокруг с помощью jquery и изображения/объекта с помощью класса row_up и row_down. Эта концепция поможет вы пишете собственное решение для своего проекта