Question

我有一个表（tblPrograms），其行在JQuery函数中动态填充。

<table>
    <tr>
        <td>
            Programs
        </td>
        <td>
            Description
        </td>
    </tr>
    <tr>
        <td>
            <div style="height: 115px; overflow: auto;">
                <table id="tblPrograms">
        <tr>
            <td></td>
            <td>Name</td>
        <td>value</td>
        </tr>

        <!--<tr>
            <td>
                1
            </td>
            <td>
                <input id="txt_program1" class="MyTextBox" type="text" />
            </td>
            <td>
                <input id="txt_value1" class="MyTextBox" type="text" />
            </td>
        </tr>-->
                </table>
            </div>
        </td>
        <td>
            <textarea id="txtProgDesc" cols="20" rows="5"></textarea>
        </td>
    </tr>
...
</table>

这是JQuery函数：

this.Init = function（） { var myself = this;

myself.get_Service().GetAllPrograms(
    function(data){

        $('#tblPrograms tr').not(':first').not(':last').remove();
        var html='';
        for(var i=0; i < data.length; i++){
            var j=i+1;
            html+='<tr><td>' + j + '</td><td><input id="txt_program' + j + '" class="MyTextBox" type="text" />' + 
            '</td><td><input id="txt_value' + j + '" class="MyTextBox" /></td></tr>';                 
        }
        $('#tblPrograms tr').first().after(html);

        ...

        //Bind the values
        for(i=0; i < data.length; i++){
            var j=i+1;
            myself.BindElement("txt_program" + j, data[i].program);
            myself.BindElement("txt_value" + j, data[i].value);
        }
});

...

}

现在我需要完成以下任务：（1）如果有的话，默认情况下应该突出显示表中的第一行，并且将更新Description（txtProgDesc）;

（2）当我单击表tblPrograms中的任何行时，所选行将突出显示，其他行将被去除高亮显示，并且描述将相应更新。

对于任务（1），我尝试在Init func的末尾添加以下代码，但它似乎不起作用。至于任务（2），我知道我应该为每一行添加一个点击事件，但我应该在哪里，何时以及如何做？

$('#tblPrograms tr').children('tr:first').css('background-color', 'Red');

Answer 1

首先：在CSS文件中创建一个类来突出显示单元格......在这里，我将它称为“td-highlighted”：

.td-highlight{ background-color: #f00; }

现在在你的JS档案中：

$(document).ready(function(){
    $('#tblPrograms tr:first').addClass("td-highlight"); // Here your task(1)
    // UPDATE your txtProgDesc

    $('#tblPrograms tr').live("click",function(){
        $('#tblPrograms tr').removeClass("td-highlight");
        $(this).addClass("td-highlight"); // Here your task (2)
        // UPDATE your txtProgDesc
    });
});

如何为选定的表行添加单击事件？

1 个答案: