Question

（在网上搜索了几个小时没有成功......新手级程序员）

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

我想要做的事情：创建一个切换链接反向列显示顺序，以便最新的列显示在左侧，而最旧的列显示在最右侧。

由于我的会员资格是新的，我无法发布截图。所以，这是我最好的解决方法：

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

thetransformer.us（主页，在上部区域iframe文件中）

解决方案所需输出的文字插图的屏幕截图位于：

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

CODE_BELOW :(主页:)＆amp; （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>

谢谢，道格

Answer 1

[编辑]：这是在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>

用于排序列顺序的网页脚本（不是行的顺序）

1 个答案: