我使用jQuery在数据库插入后将行插入表中。当页面加载时,表在特定单元格上按字母顺序排序(见下文)。当我使用jQuery插入一个新行时,我希望能够按字母顺序插入它。
例如,我有一个<tbody>
元素的表格与此类似:
<tbody>
<tr class="docRow" bgcolor="#EFE5D3" style="font-weight: bold; font-size: 1.1em;">
<td width="25px"><a class="docEditLink docAdminFormSubmit" name="38" href="#">Edit</a></td>
<td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="38" /></td>
<td>Document A</td>
<td>Description of Document A</td>
</tr>
<tr class="docClassesRow noClasses">
<td colspan="4">
<strong>No classes are currently associated with this document.</strong>
</td>
</tr>
</tbody>
<tbody>
<tr class="docRow" bgcolor="#EFE5D3" style="font-weight: bold; font-size: 1.1em;">
<td width="25px"><a class="docEditLink docAdminFormSubmit" name="35" href="#">Edit</a></td>
<td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="35" /></td>
<td>Document B</td>
<td>Description of Document B</td>
</tr>
<tr class="docClassesRow">
<td></td>
<td width="100px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="33-35" /></td>
<td width="200px">CLASS111</td>
<td width="600px">Description of CLASS101</td>
</tr>
<tr class="docClassesRow">
<td></td>
<td width="100px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="45-35" /></td>
<td width="200px">CLASS333</td>
<td width="600px">Description of CLASS333</td>
</tr>
</tbody>
<tbody>
<tr class="docRow" bgcolor="#EFE5D3" style="font-weight: bold; font-size: 1.1em;">
<td width="25px"><a class="docEditLink docAdminFormSubmit" name="46" href="#">Edit</a></td>
<td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="46" /></td>
<td>Document D</td>
<td>Description of Document D</td>
</tr>
<tr class="docClassesRow noClasses">
<td colspan="4">
<strong>No classes are currently associated with this document.</strong>
</td>
</tr>
</tbody>
目前,在将新的类行插入给定文档的<tbody>
时,我使用.append()
函数,在插入新文档时,我使用.after()
。
使用jQuery我希望能够按类别或文档名称的字母顺序插入类或文档(适用于插入的内容)。
因此,例如,我希望能够为文档C插入新的<tbody>
,或者将新类添加到文档B,其类号为CLASS222。
我该怎么做?
更新 这是我目前用于为其中一个文档插入新类的代码:
newClassesRows += $('#docsTable a[name="' + docID + '"]').closest('tr').after('<tr class="docClassesRow">' +
'<td></td>' +
'<td width="100px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="' + classID + '-' + docID + '" /></td>' +
'<td width="200px">' + classNumber + '</td>' +
'<td width="600px">' + className + '</td>' +
'</tr>');
正如您所看到的,找到了$('#docsTable a[name="' + docID + '"]').closest('tr')
的正确文档,因此我需要查看所选行的第三个td元素,检查文本并以某种方式确定变量 classNumber 按字母顺序与其他classNumbers匹配。
答案 0 :(得分:2)
这是一种可能对你有用的方法(未经测试且不在我的脑海中)。这仅适用于主标题“文档”行,但如果它适用于您,我相信您也可以将该想法调整到内部行。
首先,一个便利功能,用于构建符合上图模式的“文档”行。大概你已经有了生成这些行的东西:
var makeDocRow = function(name, description) {
return $('<tbody><tr class="docRow" bgcolor="#EFE5D3" style="font-weight: bold; font-size: 1.1em;">\
<td width="25px"><a class="docEditLink docAdminFormSubmit" name="whatever" href="#">Edit</a></td>\
<td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="whatever" /></td>\
<td>' + name + '</td>\
<td>' + description + '</td>\
</tr></tbody>');
};
接下来,添加新文档行的函数:
var addDocRow = function(name, description) {
var counter = 0; // so we know when we've reached the end
// assumes it's already sorted
$('#main').find('tr.docRow').each(function() {
counter++;
if ($(this).find('td:eq(2)').html() >= name) {
/* Have we found the right slot for the new document by name?
td:eq(2) refers to the table cell containing the name for comparison
Assumes the table is always sorted to start */
$(this).parent().before(makeDocRow(name, description)); // build/add row
return false; // break out of each() since we're done
}
// Handle case where we've reached the end, but we're still in the loop.
// This means the new row is alphabetically last, so insert after
if ($(this).closest('table').find('tr.docRow').length === counter ) {
$(this).parent().after(makeDocRow(name, description));
}
});
};
在您的代码中,当您想要插入新行时:
addDocRow('Document C','Document C Description');
addDocRow('Document Z','Document Z Description');
这肯定会变得更好,未经测试,并且不在我的头顶,但也许它会有所帮助。
编辑:把它扔进一个小提琴。似乎工作。 http://jsfiddle.net/redler/fhkWT/
答案 1 :(得分:0)
这是我在之前的一个项目中完成的一种方法。
只需将行附加到tbody即可。将每行的索引作为数据属性。如下所示,以任何对象数组的形式获取要对其进行排序的列的数据值。
var trs = [['data', 0], ['data', 1]];//0, 1 are the row indexes before sort.
通过提供自定义排序方法对此数组进行排序。排序后,您可以遍历此数组并将行追加到同一个表中。
var tbody = $('tbody', fromYourTable);
$.each(trs, function(index, tr){
//find the row by using tr[1] which contains the index in the unsorted table
tbody.append(tbody.find('tr[index="'+tr[1]+'"]'));
});