下拉列表值更改时查找行索引

时间:2013-08-28 18:13:11

标签: javascript jquery html html-select

我的每一行都有一个带有下拉列表的HTML表格。我希望每次更改下拉列表的值时,都会更改该行的背景以指示下拉列表中存在更改。

以下是代码:

<table id="table1">
    <tr>
        <td>Value</td>
        <td>
            <Select onchange="myFunction(this)">
            <option value="1">1</option>
            <option value='2">2</option></select>
        </td>
    </tr>
</table>

<script type="text/javascript">
    function myFunction(a) {
        var cells = document.getElementById("table1").rows[a].cells;
        for (var i = 0, len = cells.length; i < len; ++i) {
            cells[i].style.backgroundColor = "yellow";
        }
    }
</script>

它仍然无效,我该如何解决?谢谢!

3 个答案:

答案 0 :(得分:1)

如果您正在使用jquery,请将您的功能更改为:

<script type="text/javascript">
    function myFunction(a)
    {
       $(a).parent().parent().css("background-color", "yellow");
    }
    </script>

如果您打算使用普通的javascript,那么它将是:

 <script type="text/javascript">
        function myFunction(a)
        {
           a.parentNode.parentNode.style.backgroundColor = "yellow";
        }
        </script>

答案 1 :(得分:0)

<select onchange="this.parentNode.parentNode.style.backgroundColor='yellow';"></select>

答案 2 :(得分:0)

将您的功能更改为:

function myFunction(a)
{
    a.parentNode.parentNode.style.backgroundColor = "yellow";
}

然后确保你在select上修改了一个小错误(单引号而不是双引号):

<table id="table1">
    <tr>
    <td>Value</td>
    <td><select onchange="myFunction(this);">
    <option value="1">1</option>
    <option value="2">2</option>
        </select>
    </td>
    </tr>
</table>

http://jsfiddle.net/hescano/GkvA9/