在表格上添加复选框按钮

Question

Hi i'm making a project using php i just wonder how i can add checkbox on a table that indicate being selected. As I didn't find any question asked before, on how to toggle checkbox on click of a table row, so I'd like to share my approach to this.

here are my codes:

$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

While creating table you can add a td in which you can add a checkbox for each row like below

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

And then using jquery you can handle click event on this like below

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