单击列值时高亮显示表中的特定行.需要javascript帮助

Highlight specific rows of a table on clicking a column value. javascript help needed

本文关键字：需要 帮助 javascript 高亮 显示 单击      更新时间：2023-09-26

有没有办法选择表中的特定行作为变量，然后更改它们的样式。例如：

     <a onclick="hl(this)">1,2,5</a>
     <table>
     <tr>
     <tr> <td>.....</td></tr>
     <tr> <td>.....</td></tr>
     <tr> <td>.....</td></tr>
     <tr> <td>.....</td></tr>
     </tr>
     </table>

现在hl函数所做的是，当我点击它时，第1、2和5行应该高亮显示。我当时想的是，如果有，我可以通过提供类似的索引来对行进行某种选择

     var m=table.rowIndex[1]

或者其他什么，然后做

     m.style.background="something"

那么它可能会起作用，但我不知道该怎么办，所以请帮忙！

若要将行号作为标记的内容传递：

<script>
    function hl(el){
        arr = (el.innerHTML).split(",")
        var t = document.getElementById("tbl")
        for(var i=0; i<arr.length; i++){
            t.rows[arr[i]].style.backgroundColor  ="yellow";
        }
        return false;
    }
</script>

和html

<table id="tbl">
    <tr ><td >row 1</td></tr>
    <tr><td>row 2</td></tr>
    <tr><td>row 3</td></tr>
    <tr><td>row 4</td></tr>
</table>
<a href="#" onclick="hl(this)">1,2,3</a>

如果你想让你的表行变成可点击的-所以不是通过数组，而是通过点击触发高亮显示-你必须这样做：

js

function regEvents(){
    trs = document.getElementsByTagName("tr");
    for (var i=0; i<trs.length;i++){
        trs[i].onclick = hilite;
    }
}
function hilite(){
this.style.background = "yellow";
}

html

<table id="tbl">
    <tr ><td >row 1</td></tr>
    <tr><td>row 2</td></tr>
    <tr><td>row 3</td></tr>
    <tr><td>row 4</td></tr>
</table>

在你的dom加载后绑定事件-所以把它放在你的html文件的末尾

<script>
regEvents();
</script>

在示例标记中，table元素是a元素之后的下一个同级元素。如果这真的是真的，那么：

function hl(anchor) {
    var table = hl.nextSibling;
    while (table && table.nodeName.toUpperCase() !== "TABLE") {
        table = table.nextSibling;
    }
    if (table) {
        var rows = table.getElementsByTagName('tr');
        rows[0].className += " highlighted";
        rows[1].className += " highlighted";
        rows[4].className += " highlighted";
    }
}

其中类"高亮显示"应用选择样式。这是假设没有嵌套表。

更多阅读：

  • DOM2核心
  • DOM2 HTML
  • DOM3核心

FWIW，如果您还没有使用，我建议您使用一个好的JavaScript库，如jQuery、Prototype、YUI、Closure或其他任何库。它们为您消除了浏览器的差异，并提供了许多实用功能。

为函数命名有意义要好得多。此外，当按钮或其他元素（例如样式跨度）更适合时，不要使用A元素。A用于导航（锚和链接），而不是用于做事。

下面是一个使用rowIdex进行操作的示例。高亮显示的删除和添加可以放在同一个循环中，也可以记住闭包中以前高亮显示的行，使其更有效率。

但是，如果你处理的行数不到100行（或者可能更多），这对感知性能没有任何影响。

<script>
function hilightRows(id, rowindexes) {
  var table = document.getElementById(id);
  var rows;
  if (table && rowindexes) {
    // Remove any current highlighting
    for (var j=0, jLen = table.rows.length; j < jLen; j++) {
      table.rows[j].style.backgroundColor = '';
    } 
    // Add new highlighting
    for (var i=0, iLen = rowindexes.length; i<iLen; i++) {
      table.rows[rowindexes[i]].style.backgroundColor = 'red';
    }
  }
}
</script>

<button onclick="hilightRows('t0', [1,2,5])">1, 2, 5</button>       
<button onclick="hilightRows('t0', [3,0])">3, 0</button>       
<button onclick="hilightRows('t0', [])">Remove highlight</button>       
<table id="t0">
  <tr><td>.....
  <tr><td>.....
  <tr><td>.....
  <tr><td>.....
  <tr><td>.....
  <tr><td>.....
  <tr><td>.....
</table>

正如林奇所说。。。jquery，尤其是函数index（）。

$('#thingtobeclicked').click(function()
{
   $('.selected').removeClass('selected');
   $(this).data('indices').each(function(i){
     $('#myTable tr:nth-child(i)').addClass('selected');
   });
});

希望它能帮助别人或让我的2个代表积分回来…：）

我忘了说：为了实现这一点，你在要点击的东西的数据字段上设置了要选择的索引，如：

<a href='#' id='thingtobeclicked' data-indices='1,3,5'></a>
<table id='myTable'>...
相关文章：