我有一个包含以下内容的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？我已经尝试了几种方法，但它们都没有工作。
答案 0 :(得分：1)
我最近不得不为一个项目做这件事。这是代码。修改供您使用。
<table cellpadding="0" cellspacing="0" width="100%">
<thead>
<tr id="table_buttons">
<td width="45px"> </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的图像/对象来移动行 - 这个概念将帮助你为您的项目编写自定义解决方案