如何基于复选框选择从html表中获取特定的单元格值

Question

i have this dinamic data html table:

<table cellpadding="0" cellspacing="0" width="100%" class="table" id="tSortable">
                        <thead>
                            <tr>
                                <th><input type="checkbox" name="checkall"/></th>
                                <th width="Auto">Adresa Unica</th>
                                <th width="Auto">ID</th>
                                <th width="Auto">Status</th>
                                <th width="Auto">Time</th>
                                <th width="Auto">Date</th>
                                <th width="Auto">Interval I</th> 
                                <th width="Auto">Duty</th>
                                <th width="Auto">Interval II</th>
                                <th width="Auto">Duty</th>
                                <th width="Auto">Interval III</th>
                                <th width="Auto">Duty</th>
                                <th width="Auto">Interval IV</th>
                                <th width="Auto">Duty</th>
                                <th width="Auto">Calendar</th>
                                <th width="Auto">Model</th>
                                <th width="Auto">Installation Address</th>                          
                            </tr>
                        </thead>
                        <tbody>

                               <?php
                            while($griddata=mysql_fetch_assoc($records))
                            {

                                echo"<tr>";
                                echo "<td><input type='checkbox' class='ck'/></td>";
                                echo"<td class='mac'>".$griddata{'adresaUnica'}."</td>";
                                echo"<td>".$griddata{'id'}."</td>";
                                echo"<td class='a_i'>".$griddata{'status'}."</td>";
                                echo"<td>".$griddata{'time'}."</td>";
                                echo"<td>".$griddata{'date'}."</td>";
                                echo"<td>".$griddata{'interval1'}."</td>";
                                echo"<td class='duty'>".$griddata{'duty1'}."</td>";
                                echo"<td >".$griddata{'interval2'}."</td>";
                                echo"<td class='duty'>".$griddata{'duty2'}."</td>";
                                echo"<td>".$griddata{'interval3'}."</td>";
                                echo"<td class='duty'>".$griddata{'duty3'}."</td>";
                                echo"<td>".$griddata{'interval4'}."</td>";
                                echo"<td class='duty'>".$griddata{'duty4'}."</td>";
                                echo"<td>".$griddata{'calendar'}."</td>";
                                echo"<td>".$griddata{'model'}."</td>";
                                echo"<td>".$griddata{'adresainstalare'}."</td>";
                                echo"</tr>";
                            }
                                ?>


                        </tbody>
                    </table>

and this code .js that i use to get an alert of all the values from the td's with the class "mac"

    $(  document).ready(function(e) 
{

 $('#tSortable td.mac').each(function() {
     var $this=$(this);
     var value= $this.text();
     alert(value);

});   

});

what i want is an example on how to get the value of that cell based on the checkbox that i select .?

Answer 1

You can use jQuery's change function. The function is triggered when the state of the check boxes changes. Here is some example code:

// Triggers when a checkbox changes state
$('#tSortable td.mac').change(function() {

    // Checks if this object is selected
    if($(this).is(":checked")) {
        alert($(this).text());

        // You can also get a list of all siblings (The other TDs)
        $(this).siblings();
    }
}

Answer 2

Use the change event, then a conditional to see if it is checked: DEMO

$('body').on('change', 'input[type="checkbox"]', function(e){
    if(this.checked) alert($(this).parent().next().text());
});

If you use dynamic elements remember to use event delegation by utilizing the .on() method.

Answer 3

 $('.ck').change(function() { // I deliberately using parents in case that some day you will reorder the columns var txt = $(this).parents('tr').first().find('.mac').text(); $('#result').text('The text is: ' + txt); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table cellpadding="0" cellspacing="0" width="100%" class="table" id="tSortable"> <thead> <tr> <th><input type="checkbox" name="checkall" /></th> <th>Adresa Unica</th> <th>ID</th> <th>Status</th> <th>Time</th> <th>Date</th> <th>Interval I</th> <th>Duty</th> <th>Interval II</th> <th>Duty</th> <th>Interval III</th> <th>Duty</th> <th>Interval IV</th> <th>Duty</th> <th>Calendar</th> <th>Model</th> <th>Installation Address</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="checkOne" class="ck" /></td> <td class="mac">Adresa Unica____1</td> <td>ID____1</td> <td>Status____1</td> <td>Time____1</td> <td>Date____1</td> <td>Interval I____1</td> <td>Duty____1</td> <td>Interval II____1</td> <td>Duty____1</td> <td>Interval III____1</td> <td>Duty____1</td> <td>Interval IV____1</td> <td>Duty____1</td> <td>Calendar____1</td> <td>Model____1</td> <td>Installation Address____1</td> </tr> <tr> <td><input type="checkbox" name="checkOne" class="ck" /></td> <td class="mac">Adresa Unica____2</td> <td>ID____2</td> <td>Status____2</td> <td>Time____2</td> <td>Date____2</td> <td>Interval I____2</td> <td>Duty____2</td> <td>Interval II____2</td> <td>Duty____2</td> <td>Interval III____2</td> <td>Duty____2</td> <td>Interval IV____2</td> <td>Duty____2</td> <td>Calendar____2</td> <td>Model____2</td> <td>Installation Address____2</td> </tr> </tbody> </table> <hr /> <div id="result"></div>