Question

我需要显示第一行有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>

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

Answer 1

您需要使用此处提供的排序插件：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/

Answer 2

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

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

您应该使用的步骤是。

将html解析为文档对象。
查找并循环遍历每个表对象。
对于每个表，将每个tr元素拉出一个数组。
拉出class属性并进行一些字符串操作和强制转换为数字。
根据您提取的数字对tr对象进行排序。
从表中删除所有tr对象，然后根据已排序的数组将它们重新添加。

我认为这是某种家庭作业，所以我不会为你编写代码，但如果你根据上述步骤接近任务，那么你就不应该花很长时间。

希望这有帮助，

Answer 3

$("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.

的接受答案的要求

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

3 个答案: