仅突出显示表中具有相应ID值的行

时间:2021-01-29 16:54:09

I have a html table 'TemplateData' populated dynamically from a db table...so for example could end up like:

我有一个html表'TemplateData'从db表动态填充...所以例如可能最终像:

ID  Name  Age
1   John  23
2   Mick  27
3   Mark  29

When the user clicks an image on screen it will post back the corresponding ID value. From here I want to change the background colour of the associating row.

当用户点击屏幕上的图像时,它将回发相应的ID值。从这里我想要更改关联行的背景颜色。

So for example '2' has been posted back in 'fid'. so I have tried...

所以例如'2'已经被贴回'fid'。所以我试过......

function highlightRowInTable(fid) {
    var dtable = $("#TemplateData");
    dtable.addClass("highlightedRow");
    }

However this highlightes the outer cells of the table. I only want to highlight the corresponding row.

然而,这突出了桌子的外部细胞。我只想突出显示相应的行。

Iv been messing around with parents and siblings but cant find any working examples on line...any ideas?

我一直在和父母和兄弟姐妹搞谈,但是找不到任何有效的例子......任何想法?

2 个解决方案

#1


0  

It looks like your code is selecting the entire table, and then applying a class to it, though it is hard to say for sure. If you have an event listener attached to your table, you should be able to get the child element that was clicked on and toggle its class.

看起来你的代码正在选择整个表,然后对它应用一个类,尽管很难肯定。如果您有一个事件监听器附加到您的表,您应该能够获取被单击的子元素并切换其类。

document
  .getElementById('table')
  .addEventListener('click', function(event){
    // now event refers to the part of the dom that was clicked on
    console.log(event)
  });

Though I'm not sure without looking at your code. if you already have listeners set up, you might need to give every row an id based on fid, so that your function could specify the id to add class to.

虽然我不确定你不看你的代码。如果您已经设置了侦听器,则可能需要根据fid为每一行提供一个id,以便您的函数可以指定要添加类的id。

function highlightRowInTable(fid) {
    $(fid).addClass("highlightedRow");
}

#2


0  

when you create your table you can add an attribute to your <tr> to help select it later when an image is clicked.

创建表时,可以在中添加属性,以便稍后在单击图像时选择该属性。

@foreach (var row in table)
{
   <tr data-uid="@row[id]">
       <td></td>
   </tr>
}

function highlightRowInTable(fid) {
    var rows = $('tr').filter('[data-uid="' + fid + '"]');
    rows.addClass("highlightedRow");
}

#1


0  

It looks like your code is selecting the entire table, and then applying a class to it, though it is hard to say for sure. If you have an event listener attached to your table, you should be able to get the child element that was clicked on and toggle its class.

看起来你的代码正在选择整个表,然后对它应用一个类,尽管很难肯定。如果您有一个事件监听器附加到您的表,您应该能够获取被单击的子元素并切换其类。

document
  .getElementById('table')
  .addEventListener('click', function(event){
    // now event refers to the part of the dom that was clicked on
    console.log(event)
  });

Though I'm not sure without looking at your code. if you already have listeners set up, you might need to give every row an id based on fid, so that your function could specify the id to add class to.

虽然我不确定你不看你的代码。如果您已经设置了侦听器,则可能需要根据fid为每一行提供一个id,以便您的函数可以指定要添加类的id。

function highlightRowInTable(fid) {
    $(fid).addClass("highlightedRow");
}

#2


0  

when you create your table you can add an attribute to your <tr> to help select it later when an image is clicked.

创建表时,可以在中添加属性,以便稍后在单击图像时选择该属性。

@foreach (var row in table)
{
   <tr data-uid="@row[id]">
       <td></td>
   </tr>
}

function highlightRowInTable(fid) {
    var rows = $('tr').filter('[data-uid="' + fid + '"]');
    rows.addClass("highlightedRow");
}