2

我正在使用 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，我希望能够在类号或文档名称上按字母顺序插入一个类或文档（根据插入的内容而定）。

因此，例如，我希望能够<tbody>为 Document C 插入一个新类，或者向 Document 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按字母顺序与其他 classNumber 匹配的位置。

4

2 回答 2

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/

于 2011-06-21T19:09:25.710 回答
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]+'"]'));
});
于 2011-06-21T19:26:46.523 回答