在特定单元格上按字母顺序将行插入表中 [英] Insert row into table alphabetically on a certain cell

问题描述

我正在使用jQuery在数据库插入后将行插入表中.当页面加载时，表格在特定单元格上按字母顺序排序(请参见下文).当我使用jQuery插入新行时，我也希望能够按字母顺序将其插入.

I am using jQuery to insert rows into a table after a database insert. When the page loads the table is ordered alphabetically on a particular cell (see below). When I insert a new row using jQuery I would like to be able to insert it alphabetically also.

例如，我有一个包含<tbody>元素的表，类似于此:

So for example I have a table with <tbody> elements similar to this:

<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().

Currently, when inserting a new class row to a given document's <tbody> I use the .append() function, and when inserting a new document I use .after().

使用jQuery，我希望能够按字母顺序在类编号或文档名称上插入一个类或文档(视插入的内容而定).

Using jQuery I want to be able to insert a class or document in alphabetical order on class number or document name (as appropriate for what's being inserted).

例如，我希望能够为文档C插入新的<tbody>，或向文档B添加新类，其类号为CLASS222.

So for instance I want to be able to insert a new <tbody> for Document C, or add a new class to Document B with a class number of CLASS222.

我该怎么做?

更新: 这是我当前用于为其中一个文档插入新类的代码:

UPDATE: Here's the code I currently use to insert a new class for one of the documents:

    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按字母顺序排列.

As you can see, the correct document is found with $('#docsTable a[name="' + docID + '"]').closest('tr'), so I would need to look through the selected row's third td element, check the text and somehow determine where the variable classNumber fits alphabetically in with the other classNumbers.

推荐答案

这是一种可能对您有用的方法(未经测试，直达我的脑袋).这仅适用于主标题文档"行，但是如果它对您有用，那么我相信您也可以将其应用于内部行.

Here's an approach that might work for you (untested and off the top of my head). This applies only to the main header "document" rows, but if it works for you, I'm sure you can adapt the idea to the inner rows as well.

首先，一个便捷功能可以构建一个与上面的模式相符的文档"行.大概您已经有了一些东西来生成这些行:

First, a convenience function to build a "document" row fitting your pattern above. Presumably you have something already to generate these rows:

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>');
};

接下来，是一个用于添加新文档行的函数:

Next, a function to add a new document row:

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));
    }
  });
};

在您的代码中，当您要插入新行时:

And in your code, when you want to insert a new row:

addDocRow('Document C','Document C Description');
addDocRow('Document Z','Document Z Description');

这肯定可以做得更好，未经测试，甚至超出了我的脑海，但也许会有所帮助.

This can surely be made better, is untested, and off the top of my head, but perhaps it will be helpful.

将其放入小提琴中.似乎可以工作. http://jsfiddle.net/redler/fhkWT/

Threw it into a Fiddle. Seems to work. http://jsfiddle.net/redler/fhkWT/

这篇关于在特定单元格上按字母顺序将行插入表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！