Question

I have this JS function :

 $("#ctl00_ContentPlaceHolder1_Table3 td").click(function () {

            var varTemp;
            var tr = $(this).parent();
            var temp = "";
            for (var i = 0; i < tr.children().length; i++) {
                if (tr.children().get(i) == this) {
                    var leColumn = i;
                    break;
                }
            }
            var tbody = tr.parent();
            for (var j = 0; j < tbody.children().length; j++) {
                if (tbody.children().get(j) == tr.get(0)) {
                    var leRow = j;
                    break;
                }
            }
            if (leColumn == 13) {
                var temp = $(this).text()
                var hwID = temp.split(" ");
                var hwIDFinal = parseInt(hwID[1]);
                PageMethods.getDetailHardware(HardwareID, hwIDFinal, CallSuccessUpdateHardware, CallFailedUpdateHardware);
                __doPostBack('#tblEquipementDetail', '')
            }
        });

It allows me to get the coordinate of a clicked cell on a generated table.

Thanks to that, I can call a PageMethod after.

What I would like to do before the end of this function, is to look for any checked checkboxes in the current line where I clicked my cell.

I’ve tried some stuff, but nothing successful so far. In fact, the best I can do is to select ALL the checked checkboxes, from the whole table.

I would like to select only those from the current row.

Here’s the code of the generated table.

<table id="ctl00_ContentPlaceHolder1_Table3" width="100%" style="font-family: 'Microsoft Sans Serif'; color: #000000">
            <tr>
                <td bgcolor="#000066" width="100%" style="color:white;">ID - Hardware</td>
                <td bgcolor="#000066" width="100%" style="color:white;">Label</td>
                <td bgcolor="#000066" width="100%" style="color:white;">Status</td>
                <td bgcolor="#000066" width="100%" style="color:white;">Comment</td>
                <td bgcolor="#000066" width="100%" style="color:white;">Loan Start Date</td>
                <td bgcolor="#000066" width="100%" style="color:white;">Loan End Date</td>
                <td bgcolor="#000066" width="100%" style="color:white;">Assigned by</td>
                <td bgcolor="#000066" width="100%" style="color:white;">Assignment Date</td>
                <td bgcolor="#000066" width="100%" style="color:white;">Revocation Date</td>
                <td bgcolor="#000066" width="100%" style="color:white;">Package</td>
                <td bgcolor="#000066" width="100%" style="color:white;">USBPhone</td>
                <td bgcolor="#000066" width="100%" style="color:white;">USBKeypad</td>
                <td bgcolor="#000066" width="100%" style="color:white;">ScreenPrivacy</td>
            </tr>
            <tr>
                <td>4477</td>
                <td>HH1234</td>
                <td>Affected</td>
                <td></td>
                <td></td>
                <td></td>
                <td>XXXXXXX</td>
                <td>19/08/2008</td>
                <td> / </td>
                <td><input name="ctl00$ContentPlaceHolder1$ctl184" type="checkbox" /></td>
                <td><input name="ctl00$ContentPlaceHolder1$ctl186" type="checkbox" /></td>
                <td><input name="ctl00$ContentPlaceHolder1$ctl188" type="checkbox" /></td>
                <td><input name="ctl00$ContentPlaceHolder1$ctl190" type="checkbox" /></td>
                <td><a onclick="DetailHardware(1234);return false;" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$ctl192','')" style="font-size:9pt;">Detail 5014</a></td>
            </tr>
            <tr>
                <td>3209</td>
                <td>XS548</td>
                <td>Ready</td>

ETC…

Any hint is welcome, thanks in advance 🙂

Answer 1

You already grab the tr parent of the clicked td, so just search within this:

var row_checkboxes = tr.find('input[type=checkbox]');

Also, on a point of efficiency, instead of binding multiple events, one for each td, it would be better to delegate the event to the table. The effect will be the same.

 $("#ctl00_ContentPlaceHolder1_Table3").on('click', 'td', function () {...