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

I am working with some custom ajax functionality using Telerik's MVC Grid and I am trying to hide/remove child elements of a cell based on specific criteria, I found a similar question here: Telerik MVC Grid making a Column Red Color based on Other Column Value but couldn't get it working right.

我处理一些自定义ajax功能使用Telerik MVC网格和我试图隐藏/删除子元素的细胞基于特定的标准,我发现了一个类似的问题:Telerik MVC网格使一列红色基于其他列值,但它无法正常工作。

Basically when the row is databound in the grid this event fires:

基本上，当行在网格中为数据库时，此事件触发:

 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
                //}
            }

        }
    }

So far it's working in that I can get and iterate through each column in the row, but I am not sure what to do at this point, I found this How can I get the corresponding table header (th) from a table cell (td)? to check to make sure the column name name is Actions, but I couldn't get it working. I am not sure how to convert the javascript HTMLTableCellElement object into a jQuery object so I can use syntax I am more familiar with.

到目前为止，我可以遍历行中的每一列，但我不确定此时该做什么，我找到了这个如何从表单元格(td)获得相应的表头(th) ?检查列名是否为Actions，但我无法让它工作。我不知道如何将javascript HTMLTableCellElement对象转换为jQuery对象，以便使用更熟悉的语法。

Here is what I need to do after that:

接下来我要做的是:

1. Get the child elements in the 'Actions' (has to go by column header name instead of cell index because the number of columns can change) column whose class contains t-grid-Edit, t-grid-edit, t-grid-Delete, or t-grid-delete
2. 获取“Actions”列中的子元素(必须使用列标题名而不是单元格索引，因为列的数量可以更改)，该列的类包含t-grid-Edit、t-grid-Edit、t-grid-Delete或t-grid-Delete

3. Take those elements and (each of these actions would be used on different pages using similar setups):

   以这些元素为例(这些动作将在不同的页面上使用类似的设置):

   • a. Set the element's display style to none

     a.将元素的显示样式设置为none

   • b. Add a class to the element of name "Hidden"

     b.在名称“Hidden”的元素中添加一个类

   • c. Remove the element from the code entirely

     完全从代码中删除元素

How can I put the above functionality into my onRowDataBound function?

如何将上述功能放入onRowDataBound函数中?

Thank you SO =).

非常感谢你=)。

1 个解决方案

#1

I was able to figure this out with a lot of playing:

我能通过大量的演奏来解决这个问题:

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();

                    });
                }

            }); 
        }
    }