javascript - 在表格上添加复选框按钮

Question

嗨，我正在使用 php 制作一个元素，我只是想知道如何在表格上添加指示被选中的复选框。由于我之前没有发现任何关于如何在单击表格行时切换复选框的问题，因此我想分享一下我的方法。

这是我的代码:

$list_equipments = array();

$con = new data_abstraction("resource_booking", "it_equipment_type");
if ($result = $con - > make_query() - > result) {
    while ($data = $result - > fetch_assoc()) {
        $list_equipments[] = $data;
    }
} else {
    die("SQL Error:".$con - > error);
}


$html - > draw_container_div_start();
$html - > draw_fieldset_header('');
$html - > draw_fieldset_body_start();


echo "<table width='600px' style='border-width:1px; border-style:solid;'>";

$counter = 0;
$no_columns = 2; //initialize 3 columns
$column_width = 110 / $no_columns; +
foreach($list_equipments as $key => $equipment) {

    if ($counter % $no_columns == 0)
        echo "<tr>";
    echo "<td width='".$column_width.
    "%' style='border-width:1px; border-style:solid'>";
    draw_equipment($equipment);
    echo "</td>";
    if ($counter % $no_columns == $no_columns - 1)
        echo "</tr>";
    $counter++;
}
echo "</table>";

$html - > draw_fieldset_body_end();
$html - > draw_fieldset_footer_start();

$html - > draw_submit_cancel(true, '2', 'btn_submit', 'RESERVE');
$html - > draw_fieldset_footer_end();
$html - > draw_container_div_end();
$html - > draw_footer();


function draw_equipment($equipment) {
    $equipment_name = $equipment['img_link'];
    echo "<div style='text-align:left;width:120%'>";
    echo "<img src='img/$equipment_name' alt='$equipment_name' width='155px'/><br/>";
    echo $equipment['equip_type'];
}

echo "</form>";
return ob_get_clean();

Answer 1

创建表格时，您可以添加一个 td，其中您可以为每一行添加一个复选框，如下所示

<td><input type= "checkbox" class="toggleCheckbox"></td>

然后使用jquery，你可以像下面这样处理点击事件

$("table tr").click(function(){
    ($(this).children(":last").trigger("click");
})