重新排列表格行时出现问题

时间:2011-07-18 13:01:40

标签: jquery

我需要显示第一行有a1而第二行有a2的行等 下面是我的HTML代码

 <table>
  <tr>
    <td>
         <table>
                <tr class="a4"><td>4</td></tr>
                <tr class="a6"><td>6</td></tr>
                <tr class="a2"><td>2</td></tr>
                <tr class="a5"><td>5</td></tr>
                <tr class="a3"><td>3</td></tr>
         </table>
    </td>
            <td>
         <table>
                <tr class="a4"><td>4</td></tr>
                <tr class="a6"><td>6</td></tr>
                <tr class="a1"><td>1</td></tr>
                <tr class="a2"><td>2</td></tr>
                <tr class="a5"><td>5</td></tr>
                <tr class="a3"><td>3</td></tr>
         </table>
    </td>
            <td>
         <table>
                <tr class="a4"><td>4</td></tr>
                <tr class="a6"><td>6</td></tr>
                <tr class="a1"><td>1</td></tr>
                <tr class="a2"><td>2</td></tr>
                <tr class="a5"><td>5</td></tr>
                <tr class="a3"><td>3</td></tr>
         </table>
    </td>
            <td>
         <table>
                <tr class="a4"><td>4</td></tr>
                <tr class="a6"><td>6</td></tr>
                <tr class="a1"><td>1</td></tr>
                <tr class="a2"><td>2</td></tr>
                <tr class="a5"><td>5</td></tr>
                <tr class="a3"><td>3</td></tr>
         </table>
    </td>
            <td>
         <table>
                <tr class="a4"><td>4</td></tr>
                <tr class="a6"><td>6</td></tr>
                <tr class="a1"><td>1</td></tr>
                <tr class="a2"><td>2</td></tr>
                <tr class="a5"><td>5</td></tr>
                <tr class="a3"><td>3</td></tr>
         </table>
    </td>
            <td>
         <table>
                <tr class="a4"><td>4</td></tr>
                <tr class="a6"><td>6</td></tr>
                <tr class="a1"><td>1</td></tr>
                <tr class="a2"><td>2</td></tr>
                <tr class="a5"><td>5</td></tr>
                <tr class="a3"><td>3</td></tr>
         </table>
    </td>
            <td>
         <table>
                <tr class="a4"><td>4</td></tr>
                <tr class="a6"><td>6</td></tr>
                <tr class="a1"><td>1</td></tr>
                <tr class="a2"><td>2</td></tr>
                <tr class="a5"><td>5</td></tr>
                <tr class="a3"><td>3</td></tr>
         </table>
    </td>
            <td>
         <table>
                <tr class="a4"><td>4</td></tr>
                <tr class="a6"><td>6</td></tr>
                <tr class="a1"><td>1</td></tr>
                <tr class="a2"><td>2</td></tr>
                <tr class="a5"><td>5</td></tr>
                <tr class="a3"><td>3</td></tr>
         </table>
    </td>
</tr>
</table>   

请有人帮助我如何实现它。

3 个答案:

答案 0 :(得分:3)

您需要使用此处提供的排序插件:http://james.padolsey.com/javascript/sorting-elements-with-jquery/

你需要给你的主表一个ID并按照这样排序:

$(function()
  {
      $('#mainTable table').each(sortTrs);
  });

function sortTrs(index, parent)
{
    $(parent).find("tr").sortElements(function(a, b){
            return $(a).attr("class") > $(b).attr("class") ? 1 : -1;
        });
}

看看我在jsFiddle中尝试和工作的内容:http://jsfiddle.net/y9mrF/7/

答案 1 :(得分:0)

我不打算为你编写代码,因为我不知道你希望用什么语言来做,但你想要实现的目标可以通过几个基本步骤完成。

我不确定您是否要在页面加载时执行此操作(在这种情况下应使用javascript),或者是否要使用脚本编辑HTML以永久修复HTML文件。我假设您希望在使用python等的离线脚本中执行此操作。

您应该使用的步骤是。

  1. 将html解析为文档对象。
  2. 查找并循环遍历每个表对象。
  3. 对于每个表,将每个tr元素拉出一个数组。
  4. 拉出class属性并进行一些字符串操作和强制转换为数字。
  5. 根据您提取的数字对tr对象进行排序。
  6. 从表中删除所有tr对象,然后根据已排序的数组将它们重新添加。
  7. 我认为这是某种家庭作业,所以我不会为你编写代码,但如果你根据上述步骤接近任务,那么你就不应该花很长时间。

    希望这有帮助,

答案 2 :(得分:0)

$("tr td table").each(function(){
    var $this = $(this);
    $this.append($this.find("tr").get().sort(function(a, b) {
        return parseInt($(a).attr("class").match(/\d+/))
             - parseInt($(b).attr("class").match(/\d+/))
    }));
});

Adjusted根据您对问题Sort table rows based on their Class Names.

的接受答案的要求