如何根据复选框选择从html表中获取特定单元格值

时间:2015-11-25 14:33:11

标签: javascript jquery html

我有这个dinamic数据html表:

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

这个代码.js用于通过类“mac”获取td的所有值的警告

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

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

});   

});

我想要的是如何根据我选择的复选框获取该单元格的值的示例。

3 个答案:

答案 0 :(得分:0)

您可以使用jQuery的更改功能。复选框的状态更改时会触发该功能。以下是一些示例代码:

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

答案 1 :(得分:0)

使用更改事件,然后使用条件查看是否已选中:DEMO

func tap(tap: UITapgestureRecognizer) {
    let imgView = tap.view as! MyImageView
    let indexPath = imgView.indexPath
    let tag = imgView.tag
}

如果使用动态元素,请记住使用.on()方法使用事件委派。

答案 2 :(得分:0)

&#13;
&#13;
$('.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);
});
&#13;
<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>
&#13;
&#13;
&#13;