Question

我正在创建一个函数，当你点击它时会改变表中行的颜色，这个表中有很多行。我正在使用Chrome（最新版本）开发，它说“selectme”功能没有定义。

我的IDE没有发出任何错误信号（Dreamweaver CC）

<table>
<tr onClick="selectme('1')">
<td class="name">Relaxing Beauty - Ryan Astruld</td>
</tr>
<tr onClick="selectme('2')">
<td class="name">Wheeving violins - John Lisbon</td>
</tr>
<tr onClick="selectme('3')">
<td class="name">Grace -  David Parsons</td>
</tr>
<tr onClick="selectme('4')">
<td class="name">Linkin Park - In The End (cover)</td>
</tr>
</table>

javascript

function selectme(number)
{
    var selector = "#" + number
    $(selector).css("background-color", "rgb(3,135,255)");
    selected = number;
}

Answer 1

您可以尝试将元素本身作为参数传递，尝试

<table>
<tr onClick="selectme(this)">
<td class="name">Relaxing Beauty - Ryan Astruld</td>
</tr>
<tr onClick="selectme(this)">
<td class="name">Wheeving violins - John Lisbon</td>
</tr>
<tr onClick="selectme(this)">
<td class="name">Grace -  David Parsons</td>
</tr>
<tr onClick="selectme(this)">
<td class="name">Linkin Park - In The End (cover)</td>
</tr>
</table>

的Javascript

 function selectme(elem){
      $(elem).css("background-color", "rgb(3,135,255)");
    }

jsfiddle here 或者您可以绑定表tr单击事件，假设表ID为myTab

$('#myTab tr').on('click',function(e){
    $(this).css("background-color", "rgb(3,135,255)");
});

jsfiddle here

Answer 2

    <table>
      <tr  id="1" onClick="selectme(this.id)">
        <td class="name">Relaxing Beauty - Ryan Astruld</td>
      </tr>
      <tr id="2" onClick="selectme(this.id)">
        <td class="name">Wheeving violins - John Lisbon</td>
      </tr>
      <tr id="3" onClick="selectme(this.id)">
        <td class="name">Grace -  David Parsons</td>
      </tr>
      <tr id="4" onClick="selectme(this.id)">
        <td class="name">Linkin Park - In The End (cover)</td>
      </tr>
    </table>

    function selectme(number)
    {

        $("#"+number).css("background-color", "rgb(3,135,255)");
        selected = number;
    }

试试这个

Answer 3

我建议你：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="jquery.js" type="text/javascript"></script>
    </head>
    <body>
        <table id="table12">
            <tr>
                <td class="name">Relaxing Beauty - Ryan Astruld</td>
            </tr>
            <tr>
                <td class="name">Wheeving violins - John Lisbon</td>
            </tr>
            <tr>
                <td class="name">Grace -  David Parsons</td>
            </tr>
            <tr>
                <td class="name">Linkin Park - In The End (cover)</td>
            </tr>
        </table>

        <script>
            $(function(){
                $('#table12 tr').click(function(){
                    console.log(this);
                    $(this).css("background-color", "rgb(3,135,255)");
                });
            });
            </script>
    </body>
</html>

Answer 4

内联事件处理程序很丑陋且难以维护。

为什么不以不引人注目的方式尝试？

$("table tr").on("click", function(){
    $(this).toggleClass("blue");
});

Fiddle

如果需要更改不同颜色的行，可以使用数据属性，例如

<tr data-color="red">
  <td class="name">Relaxing Beauty - Ryan Astruld</td>
</tr>

$("table tr").on("click", function(){
    var color = $(this).data("color");
    $(this).toggleClass(color);
});

Answer 5

替换此

function selectme(number)
{
    var selector = "#" + number
    $(selector).css("background-color", "rgb(3,135,255)");
    selected = number;
}

使用

function selectme(number)
{
    var selector = "#" + number; //HERE YOU FORGOT SEMI-COLON
    $(selector).css("background-color", "rgb(3,135,255)");
    selected = number;
}

此外，您的HTML onclick将调用javascript函数，但在您拥有的函数中 $(selector) id="1"应指向id="1"，但您的页面无法控制，ID为1。所以还要在你的td上添加<td id="1" onclick="selectme('1');"></td>

<td id="1" onclick="selectme(this.id);"></td>

并且因为您现在在TD上有ID，您可以直接在onclick部分

中引用它

{{1}}

Answer 6

这里没有分号：

var selector = "#" + number; <-- HERE

带参数的JavaScript函数不起作用

6 个答案: