CODEWITHSUNDEEP
jquery
GLP
GLP

Reputation: 3675

how to add a click event for the selected table row?

I have a table (tblPrograms) whose rows are populated dynamically in JQuery function.

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

Here is the JQuery function:

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);
        }
});

...

}

Now I need to achieve following tasks: (1) If any, the first row in the table should be highlighted by default, and Description (txtProgDesc) will be updated;

(2) When I click any row in table tblPrograms, the selected row will be highlighted, other rows will be de-highlighted, and the Description will be updated accordingly.

For task (1), I tried to add following code at the end of the Init func, but it doesn’t seem working. As for the task (2), I know I should add a click event for each row, but where, when and how should I do?

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

Upvotes: 0

Views: 649

Answers (1)

giordanolima
giordanolima

Reputation: 1218

First at all: Create a class in your CSS file to highlight the cell... Here i will it as "td-highlighted":

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

Now in yout JS file:

$(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
    });
});

Upvotes: 1

Related Questions