在表中，每行都有一个编辑按钮.显示或隐藏按钮取决于本行中的另一个值

In a table each row has an edit button. Show or hide the button depends on another value in this row

本文关键字：按钮 隐藏 取决于 显示 另一个 编辑按 编辑 有一个      更新时间：2023-09-26

我在js文件中定义了一个表，最后一列是每行的编辑按钮，让用户编辑这一行的信息。还有另一行，第三行，MlsCode。只有当MlsCode的值为"A"或"B"时，我们才应该在这一行显示编辑按钮。下面是表构建器的一部分:

var agentSearchResultBuilder = 
[
    { colName: "First Name", dataName: "FirstName" },
    { colName: "Last Name", dataName: "LastName" },
    { colName: "MLS", dataName: "MlsCode" }, 
    {
        colName: "MLS Office Status",
        dataName: "Office.MlsIsActive",
        template: '{{if Office.MlsIsActive}}Active{{else}}Inactive{{/if}}',
        styleClass: '{{if Office.MlsIsActive}}active{{else}}inactive{{/if}}'
    },
    {
        colName: "Edit",
        template: "<button title='Edit Agent Information' class='tinyButton editAgent' id='${MlsCode}'>Edit</button>"
    }
];
我写了下面的代码来控制编辑按钮的可见性，但是只有第一个匹配的行可以显示按钮。后面匹配的行没有显示按钮。我不知道怎么了。 
$("button.editAgent", table).button().hide(); //to hide all buttons initially
$('#agentSearchTable >tbody >tr').each(function () {
            var value = $(this).find('td:eq(2)').text();
            if (value === "A") {
                $("#A").show();
                alert(value);
                 /*I use this to test if it reaches every
                    matching row or not. Turns out yes. Each matching row 
                    gives alert. But edit button didn't show(only first 
                    matching one shows.)
                  */
            }
            if (value === "B") {
                $("#B").show();
                alert(value);
            }
        });

此外，我注意到在agentSearchResultBuilder，有一些代码像{if}..{/if}，所以我想知道是否有一种方法可以简单地在编辑按钮的模板中做到这一点。比如如果id等于'A'或'B'，显示按钮。我对c#， javascript和jQuery完全陌生。这是我的第一个项目。希望你能帮助我，谢谢!

This:

$("#A").show();

不起作用，因为它依赖于在多行按钮上具有相同的id，这不是合法的HTML。浏览器可能忽略了具有它已经看到的id的id属性。您可能希望使用类，而不是id(将button-${MLSCode}添加到class属性的末尾并删除id属性)，并使用如下内容:

$(this).find('.button-a').show();
相关文章：