从HTMLTableRowElement中的特定单元格中获取子元素并隐藏/删除它们?

时间:2012-02-14 20:46:26

标签: javascript jquery ajax grid telerik-mvc

我正在使用Telerik的MVC Grid处理一些自定义ajax功能,我试图根据特定条件隐藏/删除单元格的子元素,我在这里找到了一个类似的问题:Telerik MVC Grid making a Column Red Color based on Other Column Value但是无法获得它运作正常。

基本上,当行在网格中进行数据绑定时,此事件将触发:

 function onRowDataBound(e) {
        if (e.dataItem.Status == "Submitted") {
            $.each(e.row.cells, function (index, column) {
                alert(column.innerHTML);
                //var $header = $(column).closest('table').find('th').eq($(column).index());
                //if(header text == "Actions)
                //{
                     //Get the <a> child elements in the 'Actions' column whose class contains t-grid-Edit, 
                     //t-grid-edit, t-grid-Delete, or t-grid-delete and set their display to none, add a css class, and remove the element entirely
                //}
            }

        }
    }

到目前为止,它正在工作,我可以获取并遍历行中的每一列,但我不知道该做什么,我发现这个How can I get the corresponding table header (th) from a table cell (td)?要检查以确保列名称是动作,但我无法让它发挥作用。我不知道如何将javascript HTMLTableCellElement对象转换为jQuery对象,因此我可以使用我更熟悉的语法。

之后我需要做的是:

  1. 获取'Actions'中的子元素(必须按列标题名称而不是单元格索引,因为列数可以更改)列的类 包含t-grid-Edit,t-grid-edit,t-grid-Delete或t-grid-delete
  2. 获取这些元素并且(这些操作中的每一个都将使用类似的设置在不同的页面上使用):

    • 一个。将元素的显示样式设置为无

    • 湾将类添加到名称“隐藏”

    • 的元素中
    • ℃。完全从代码中删除元素

  3. 如何将上述功能放入我的onRowDataBound功能?

    谢谢SO =)。

1 个答案:

答案 0 :(得分:3)

我能够通过大量的游戏来解决这个问题:

function onRowDataBound(e) {
        if(e.dataItem.Status == "Submitted"){
            var $row = $(e.row);
            $.each($row.children("td"), function (index, column) {
                var $column = $(column);
                var $headerText = $column.closest('table').find('th').eq($column.index()).children(".t-link").text();
                if ($headerText == "Actions") {
                    $.each($column.children("a.t-grid-delete, a.t-grid-Edit"), function (subIndex, link) {
                        $(link).remove();

                    });
                }

            }); 
        }
    }