Question

当我第一次渲染页面时，我有一个像这样的html表：

<table>
  <tr style="display:none">
    <td><a href="#" data-val="1">SOME VALUE X</a></td>
    <td>20000</td>
  </tr>
  <tr>
    <td><a href="#" data-val="2">SOME VALUE Y</a></td>
    <td>10000</td>
  </tr>
  <tr>
    <td><a href="#" data-val="3">SOME VALUE Z</a></td>
    <td>5000</td>
  </tr>
</table>

我在同一页面中也有一个表格，如下所示：

<form id="someform" action="/to/1>              
        <div id="main_content">             
                <div id="name">
                    SOME VALUE X
                </div>              
                <div id="count">
                    20000
                </div>
        </div>
    </form>

请注意，表格中的第1行设置为隐藏。这是因为它的值显示在表单中。这就是我的情况，每当用户点击表格行中的链接时，表格就会使用行的值进行更新，然后表格行会被隐藏。因此，在渲染之后，如果用户点击第2行1）表单的值得到更新2）单击的行被隐藏3）以前用于对应表单值的行点击变得可见3）表格需要在可见行上以desc顺序使用。

为了更准确和重申，每次用户点击任何一行时，都需要执行以下步骤：

现在需要显示与当前表单值对应的行
表示＆＃34; / to / [data-val]＆＃34;点击的行
点击了行的第一列值，在div id =＆＃34; name＆＃34;
点击了行的第二列值，在div id =＆＃34; count＆＃34;
隐藏点击的行
基于第二列

所以从本质上讲，我是在切换。该行是可见的，或者其值显示在表单中，然后它不可见。

如何以优雅的jQuery（最新版本）方式实现这一目标？

我希望这是有道理的并期待一些答案。

Answer 1

您可能会使用插件更快地到达目的地，例如Tablesorter。我特别使用过这个，效果很好。

Answer 2

蒂姆，我想你已经完成了第6步了。我想我可以帮助你完成步骤1 - 5。

(function ($, tbl_selector, frm_selector, undefined) {

    var tbl = $(tbl_selector);

    var frm = $(frm_selector);

    var getParentRow = function (elem) {

        var ret = elem.parentNode;

        if (ret.nodeName != "TR" && ret != null) {

            ret = getParentRow(ret);
        }

        return ret;
    };

    var clickSwitch = function (row, _frm) {

        $("#name", _frm).val($("td:nth-child(1)", row).text());
        $("#count", _frm).val($("td:nth-child(2)", row).text());
    };

    $("td a", tbl).each(function () {

        $(this).click(function () {

            var myrow = getParentRow(this);

            $("tr", tbl).removeClass("hide");

            $(myrow).addClass("hide");

            clickSwitch(myrow, frm);
        });
    });
})(jQuery, "#sometable", "#someform");

在这里小提琴：http://jsfiddle.net/snkckyb5/

另外，请注意我正在使用类隐藏编辑行并将表单div转换为输入。

希望这有帮助！

如何排序html表并动态显示点击的行？

2 个答案: