用于按列排序(而不是按行排序）的网页脚本

Web Page Script to Sort Order of Columns (not order of rows)

本文关键字：排序 网页 脚本 用于      更新时间：2023-09-26

（在网上和这里搜索了几个小时都没有成功…新手级程序员）

我所拥有的：单行表，包含许多短列。在HTML中按时间顺序输入列，并在右侧添加新列。（这一长行位于iframe中显示的短高宽页面中，可手动向左/向右滚动。）

我想做的是：创建一个切换链接，反转列显示顺序，以便在需要时最新的列显示在左侧，最旧的列出现在右侧。

由于我的会员是新会员，我不能发布截图。下面是我最好的尝试：

要应用此解决方案的网页位于：

thetransformer.us（主页，位于iframe文件的上部区域）

解决方案所需输出的文本说明的屏幕截图位于：

thetransformer.us/images/reverse-coll-order-illustration.jpg

CODE_BELOW：（主页：）&（iframe文件代码（如前所述，不可滚动DIV）省略了许多相同类型代码块的行。

<div>
<iframe src="gallery.html" scrolling="yes" width="645" height="300" class="rounded10"></iframe>
</div>

<body style="margin:15px; background-image:url(images/bgrepeat.png)">
<div id="pl_main">
<button onclick="reverseOrder()">Reverse</button> <span style="color:white;">The horizontal link list is currently unavailable. Use View <span style="color:#99ccff;">Table of Contents</span> below.</span>
<table class="gallery">
<tr id="tableRow">
<td valign="top" id="19851"><a href="85-3.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1985</span> Jul<br /><img src="pl_thumbs/1985-07_thumb.jpg" />
</a></td>
<td valign="top" id="19861"><a href="86-0102.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1986</span> Jan-Feb<br /><img src="pl_thumbs/1986-01-02_thumb.jpg" />
</a></td>
<td valign="top" id="19862"><a href="86-0304.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1986</span> Mar-Apr<br /><img src="pl_thumbs/1986-03-04_thumb.jpg" />
</a></td>
<td valign="top" id="19863"><a href="86-0506.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1986</span> May-Jun<br /><img src="pl_thumbs/1986-05-06_thumb.jpg" />
</a></td>
</tr>
</table>
</div>
</body>
</html>

谢谢，Doug

[EDIT]：这是JQuery中反转列的解决方案。

<body>
    <button onclick="sortReverse()">Click</button>
    <table class="gallery">
    <tbody><tr id="tableRow"><!-- id for test code, may remvoe later -->
        <td valign="top" id="19851"><a href="85-3.pdf#zoom=100" target="_blank">
            <span style="color:#99ccff;">1985</span> Jul<br><img src="pl_thumbs/1985-07_thumb.jpg">
        </a></td>
        <td valign="top" id="19861"><a href="86-0102.pdf#zoom=100" target="_blank">
            <span style="color:#99ccff;">1986</span> Jan-Feb<br><img src="pl_thumbs/1986-01-02_thumb.jpg">
        </a></td>
    </tr>
    </tbody></table>
    // Remember to include JQuery library.
    <script>
        function sortReverse(){
            // Select the parent element by id.
            var row = $("#tableRow");
            // Get all the children (columns)
            var columns = $.makeArray($("#tableRow > td"));
            // empty the parent content
            row.empty();
            // Append the reversed children array to the parent
            row.append(columns.reverse());
        }
    </script>
</body>
相关文章：