Question

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

     <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"

然后它可能会起作用，但我不知道该怎么做，所以请帮助！

Answer 1

如果要将行号作为a标记的内容传递：

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

Answer 2

在示例标记中，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";
    }
}

...“突出显示”类应用选择样式。这假设没有嵌套表。

更多阅读：

FWIW，如果你还没有使用过，我建议使用一个好的JavaScript库，如jQuery，Prototype，YUI，Closure或{ {3}}。它们可以为您平滑浏览器差异，并提供许多实用功能。

Answer 3

为函数提供有意义的名称要好得多。此外，当按钮或其他元素更适合时（例如样式化的跨度），请勿使用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>

Answer 4

正如林奇所说...... 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'>...

单击列值时突出显示表的特定行。需要javascript帮助

4 个答案: