Javascript 通过单击表格标题进行排序
我在我的网站上有一个表单，用户可以使用它按所选列排序数据表。本质上与此类似：Javascript 通过单击表格标题进行排序,javascript,php,jquery,html-table,Javascript,Php,Jquery,Html Table,我在我的网站上有一个表单，用户可以使用它按所选列排序数据表。本质上与此类似： <form action="" method="post"> <select name="orderby"> <option value="col_1">Column 1</option> <option value="col_2">Column 2</option> <option v
<form action="" method="post">
<select name="orderby">
<option value="col_1">Column 1</option>
<option value="col_2">Column 2</option>
<option value="col_3">Column 3</option>
</select>
<input type="submit" value="Order By"/>
</form>
<script>
function post(clm) {
$.post('mypage.php',{orderby:clm});
}
</script>
职能职位（clm）{
$.post（'mypage.php'，{orderby:clm}）；
}
这不管用。有人能告诉我需要做什么改变才能让它工作吗？现在，如果单击表标题，则
$\u POST
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://raw.github.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js" type="text/javascript"></script>
<script type="text/javascript">
var st;
$(window).load(function(){
var table = $('table');
$('#col1, #col2, #col3') //all ID, za each
.wrapInner('<span title="sort this column"/>')
.each(function(){
var th = $(this),
thIndex = th.index(),
inverse = false;
th.click(function(){ //on click on any TH DOM object
table.find('td').filter(function(){
return $(this).index() === thIndex; //index of clicked element
}).sortElements(function(a, b){ //function sortElements.js
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
return this.parentNode;
});
inverse = !inverse;
});
});
});
</script>
</head>
<body>
<table id="tabela">
<thead>
<tr>
<th id="col1"><b>Column 1</b></th>
<th id="col2"><b>Column 2</b></th>
<th id="col3"><b>Column 3</b></th>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>ddd</td>
<td>eee</td>
<td>fff</td>
</tr>
<tr>
<td>ggg</td>
<td>hhh</td>
<td>iii</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
var-st；
$（窗口）。加载（函数（）{
变量表=$（“表”）；
$（'#col1，#col2，#col3'）//所有ID，每个za
.wrapInner（“”）
.each（函数（{
var th=$（此），
thIndex=th.index（），
逆=假；
单击（函数（）{//单击任何DOM对象
table.find（'td'）.filter（函数（）{
返回$（this）.index（）==thIndex；//已单击元素的索引
}).sortElements（函数（a，b）{//function sorterElements.js
返回$.text（[a]）>$.text（[b]）？
相反？-1:1
：逆？1:-1；
}，函数（）{
返回此.parentNode；
});
逆=！逆；
});
});
});
第1栏
第2栏
第3栏
aaa
bbb
ccc
ddd
eee
fff
ggg
啊
三,
你好，Rok Jambrošič这就是我达成的解决方案。我在每个表头列中嵌入了一个表单。表单包含隐藏的输入，其中包含我希望包含在$\u POST数组中的信息。在我的帖子中使用的简化示例中，它只是name=“orderby”和value=“column name”。在th标记中，我保留了onclick事件，并让它调用允许我传递表单名称的javascript函数。javascript函数提交表单，表单将$\u POST数组传递回页面，以便执行我关心的所有php代码。数组（[orderby]=>col_3）用于更新我的SQL查询中的orderby属性，因此正确的数据将返回到页面 HTML:
第1栏
第2栏
第3栏
A.
B
C
B
C
A.
<script>
function submitform(formname) {
document[formname].submit();
}
</script>
函数submitform（formname）{
文档[formname]。提交（）；
}
orderby<table>
<tr>
<th onclick="submitform('postdata1')">
Column 1
<form action="" name="postdata1" method="post">
<input type="hidden" name="orderby" value="col_1"/>
</form>
</th>
<th onclick="submitform('postdata2')">
Column 2
<form action="" name="postdata2" method="post">
<input type="hidden" name="orderby" value="col_2"/>
</form>
</th>
<th onclick="submitform('postdata3')">
Column 3
<form action="" name="postdata3" method="post">
<input type="hidden" name="orderby" value="col_3"/>
</form>
</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
<td>A</td>
</tr>
</table>
<script>
function submitform(formname) {
document[formname].submit();
}
</script>