jQueryはtableのtrの上下移動を実現し、シーケンス番号を一定に保つ
jQueryMoveTr.htmlコードは次のとおりです.
jquery-rlutil-1.6.2.jsコードは以下の通りです.
jswension.htmlコードは次のとおりです.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>jQuery-bhang</TITLE>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="jquery-rlutil-1.6.2.js"></script>
</HEAD>
<BODY>
<table id="show_table_id" border="1">
<tr>
<td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="1" /></td>
<td>aaaaaaaaaa</td>
<td>@@@@@@@</td>
<td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" /> <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>
<td> 1</td>
</tr>
<tr>
<td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="2" /></td>
<td>bbbbbbbbbbbbb</td>
<td>#########</td>
<td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" /> <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>
<td> 2</td>
</tr>
<tr>
<td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="3" /></td>
<td>cccccccccccc</td>
<td>$$$$$$$$$$$$</td>
<td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" /> <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>
<td> 3</td>
</tr>
<tr>
<td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="4" /></td>
<td>ddddddddddddd</td>
<td>&&&&&&&&&&&&&</td>
<td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" /> <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>
<td> 4</td>
</tr>
<tr>
<td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="5" /></td>
<td>eeeeeeeeeeeeee</td>
<td>***************</td>
<td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" /> <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>
<td> 5</td>
</tr>
</table>
</BODY>
</HTML>jquery-rlutil-1.6.2.jsコードは以下の通りです.
[color=green]/*
* ： table tr
*
* ：
* 1、 jquery-1.6.2.js
* 2、 name btn1， name btn2
* 3、 id=show_table_id table ， table n tr td ， td text input ，input value
* 4、 text td class td_num
*
* @param: obj button
* @param: table_self_id table id
* @param: td_self_id input td class
*/
[/color]
[color=green]// [/color]function prevMoveTrCommand(obj, table_self_id, td_self_id){
[color=green]/*
// var $jqFirstTr = jQuery("#"+table_self_id+" tr:first-child"); // tr var firstTrVal = $jqFirstTr.find("."+td_self_id+" input:nth-child(1)").val(); // tr input value var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val(); // tr
*/[/color]
[color=green]/* */[/color] var $jqFirstTr = jQuery("#"+table_self_id+" tr:nth-child(2)"); [color=green]/* tr */[/color] var firstTrVal = $jqFirstTr.find("."+td_self_id+" input:nth-child(1)").val(); [color=green]/* tr input value */[/color] var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val(); [color=green]/* tr */[/color]
if(objVal == firstTrVal){ [color=green]/* */[/color] return;
}else{
prevMoveTrOpra(obj, td_self_id); [color=green] /* */[/color] }
}
[color=green]/* */[/color]function prevMoveTrOpra(obj, td_self_id){
var $jqObj = jQuery(obj).parent().parent().clone(); [color=green]/* tr */[/color] var $jqSublObj = jQuery(obj).parent().parent().prev(); [color=green]/* tr */[/color]
$jqSublObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqSublObj.find("."+td_self_id+" input:nth-child(1)").val())+1); [color=green] /* tr 1*/[/color] jQuery(obj).parent().parent().html("").append($jqSublObj.html()); [color=green]/* tr */[/color]
$jqObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqObj.find("."+td_self_id+" input:nth-child(1)").val())-1); [color=green]/* tr 1*/[/color] $jqSublObj.html("").append($jqObj.html()); [color=green]/* tr tr */[/color]
$jqObj.remove(); [color=green]/* jQuery */[/color]}
[color=green]/* */[/color]function nextMoveTrCommand(obj, table_self_id, td_self_id){
var $jqLastTr = jQuery("#"+table_self_id+" tr:last-child"); [color=green]/* tr */[/color] var lastTrVal = $jqLastTr.find("."+td_self_id+" input:nth-child(1)").val(); [color=green]/* tr */[/color] var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val(); [color=green]/* tr */[/color]
if(objVal == lastTrVal){ [color=green]/* */[/color] return;
}else{
nextMoveTrOpra(obj, td_self_id); [color=green]/* */[/color] }
}
[color=green]/* */[/color]function nextMoveTrOpra(obj, td_self_id){
var $jqObj = jQuery(obj).parent().parent().clone(); [color=green]/* tr */[/color] var $jqSiblObj = jQuery(obj).parent().parent().next(); [color=green]/* tr */[/color]
$jqSiblObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqSiblObj.find("."+td_self_id+" input:nth-child(1)").val())-1); [color=green]/* tr 1*/[/color] jQuery(obj).parent().parent().html("").append($jqSiblObj.html()); [color=green]/* tr tr */[/color]
$jqObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqObj.find("."+td_self_id+" input:nth-child(1)").val())+1); [color=green]/* tr 1*/[/color] $jqSiblObj.html("").append($jqObj.html()); [color=green]/* tr tr */[/color]
$jqObj.remove(); [color=green]/* jQuery */[/color]}jswension.htmlコードは次のとおりです.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>JavaScript </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="jquery-rlutil-1.6.2.js"></script>
<script type="text/javascript">
[color=green]/*onclick=prevMoveTrCommand(this,'show_table_id','td_num'); ， */[/color]
jQuery(document).ready(function(){
var str = "";
str += "<tr>";
str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='1' /></td>";
str += "<td>aaaaaaaaaa</td>";
str += "<td>@@@@@@@</td>";
str += "<td align='center'><input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'show_table_id','td_num'); />";
str += " <input type='button' name='btn2' value='↓' onclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>";
str += "<td> 1</td>";
str += "</tr>";
str += "<tr>";
str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='2' /></td>";
str += "<td>bbbbbbbbbbbbb</td>";
str += "<td>#########</td>";
str += "<td align='center'><input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'show_table_id','td_num'); />";
str += " <input type='button' name='btn2' value='↓' onclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>";
str += "<td> 2</td>";
str += "</tr>";
str += "<tr>";
str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='3' /></td>";
str += "<td>cccccccccccc</td>";
str += "<td>$$$$$$$$$$$$</td>";
str += "<td align='center'><input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'show_table_id','td_num'); />";
str += " <input type='button' name='btn2' value='↓' onclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>";
str += "<td> 3</td>";
str += "</tr>";
str += "<tr>";
str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='4' /></td>";
str += "<td>ddddddddddddd</td>";
str += "<td>&&&&&&&&&&&&&</td>";
str += "<td align='center'><input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'show_table_id','td_num'); />";
str += " <input type='button' name='btn2' value='↓' onclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>";
str += "<td> 4</td>";
str += "</tr>";
str += "<tr>";
str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='5' /></td>";
str += "<td>eeeeeeeeeeeeee</td>";
str += "<td>***************</td>";
str += "<td align='center'><input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'show_table_id','td_num'); />";
str += " <input type='button' name='btn2' value='↓' onclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>";
str += "<td> 5</td>";
str += "</tr>";
$("#show_table_id").html(str);
});
</script>
</HEAD>
<BODY>
<table id="show_table_id" border="1"></table>
</BODY>
</HTML>