Senthilkumar Posted March 1 Share Posted March 1 Dear Team, I have a table which is generating data dynamically. Below is my table My table code is <table id="product_data" class="table table-striped table-bordered nowrap table-sm" style="width:100%;"> <thead class="bg-blue text-center"> <tr> <th style="width: 5%; vertical-align: middle">S.No</th> <th style="width: 25%; vertical-align: middle">Customer Name</th> <th style="width: 12%; vertical-align: middle">Location</th> <th style="width: 8%; vertical-align: middle">Model</th> <th style="width: 8%; vertical-align: middle">Machine S.No</th> <th style="width: 10%; vertical-align: middle">Machine Status</th> <th style="width: 8%; vertical-align: middle">Monthly (Cu.m) <span class="text-danger">*</span></th> <th style="width: 8%; vertical-align: middle">Total (Cu.m)</th> <th style="width: 8%; vertical-align: middle">Monthly (Hr.m)</th> <th style="width: 8%; vertical-align: middle">Total (Hr.m)</th> </tr> </thead> <tbody> <?php $n = 1; $sql = "select * from machinemaster AS a INNER JOIN machineassign AS b ON b.RowID = a.id WHERE b.EmpID = '$EmpNo'"; $result = mysqli_query($conn, $sql); while ($row = mysqli_fetch_assoc($result)) { $ID = $row['id']; $CustomerName = $row['CustomerName']; $MachineLocation = $row['MachineLocation']; $Model = $row['Model']; $MachineNo = $row['MachineSlNo']; $RowID = $row['RowID']; ?> <tr> <td align='center'> <?php echo $n++; ?> </td> <td> <?php echo $CustomerName; ?> </td> <td> <?php echo $MachineLocation; ?> </td> <td> <?php echo $Model; ?> </td> <td> <?php echo $MachineNo; ?> </td> <td> <select name='Ststus[]' id='Status<?php echo $RowID; ?>' class='form-control Status' style="width:auto"> <option value='1'>Working</option> <option value='0'>Not Working</option> </select> </td> <td align='center' hidden> <input type="number" name="RowID[]" id="RowID<?php echo $RowID; ?>" value="<?php echo $RowID; ?>" class="form-control" autocomplete="off" /> </td> <td align='center'> <input type="number" name="MCubicmeter[]" id="MCubicmeter<?php echo $RowID; ?>" value="" class="form-control MCubicmeter text-center cucalc" autocomplete="off" /> </td> <td align='center'> <input type="number" name="TCubicmeter[]" id="TCubicmeter<?php echo $RowID; ?>" value="" class="form-control TCubicmeter text-center " autocomplete="off" readonly /> </td> <td align='center'> <input type="number" name="MHourmeter[]" id="MHourmeter<?php echo $RowID; ?>" value="" class="form-control MHourmeter text-center" autocomplete="off" /> </td> <td align='center'> <input type="number" name="THourmeter[]" id="THourmeter<?php echo $RowID; ?>" value="" class="form-control THourmeter text-center" autocomplete="off" readonly /> </td> <td hidden> <input type="number" name="lang[]" value="<?php echo $RowID; ?>" class="form-control" autocomplete="off" /> </td> </tr> <?php } ?> </tbody> </table> In this table, the machine status is a dropdown (Working & Networking). When I select the not working on any row, the Monthly (Cu.m) & Monthly (Hr.m) columns should disabled. otherwise, it should be editable. I have tried the below code. <script> $(document).on('change', '#product_data tbody tr td:nth-child(6)', function () { var rowvlaue = row($(this).closest('tr')).data()[12]; }); </script> Afte this I am not sure how to go ahead. Please help me how to complete this. Quote Link to comment Share on other sites More sharing options...
Barand Posted March 1 Share Posted March 1 I find data attributes useful for associating inputs for the same record. I get the data-id of the select field then change other fields with the same data-id. Here's an example <php $employees = [ [ 'id'=>21, 'name'=>'Curly', 'status'=>1, 'title'=>'Sales Manager', 'salary'=>65000 ], [ 'id'=>22, 'name'=>'Larry', 'status'=>1, 'title'=>'Sales Assistant', 'salary'=>45000 ], [ 'id'=>33, 'name'=>'Mo', 'status'=>1, 'title'=>'Sales Assistant', 'salary'=>45000 ], [ 'id'=>46, 'name'=>'Tom', 'status'=>1, 'title'=>'Sales Assistant', 'salary'=>45000 ], [ 'id'=>47, 'name'=>'Dick', 'status'=>1, 'title'=>'Trainee', 'salary'=>25000 ], [ 'id'=>51, 'name'=>'Harry', 'status'=>1, 'title'=>'Trainee', 'salary'=>25000 ] ]; $tdata = ''; foreach ($employees as $e) { $tdata .= "<tr> <td>{$e['name']}</td> <td><select name='emp[{$e['id']}][status]' class='status' data-id='{$e['id']}'>" . statusOptions($e['status']) . "</td> <td><input type='text' name='emp[{$e['id']}][title]' class='title' data-id='{$e['id']}' value='{$e['title']}'></td> <td><input type='text' name='emp[{$e['id']}][salary]' class='salary' data-id='{$e['id']}' value='{$e['salary']}'></td> </tr>"; } function statusOptions($current) { $stats = [1 => "Working", 2 => "Not Working"]; $opts = "<option value=''>- select status -</option>"; foreach ($stats as $s => $desc) { $sel = $s == $current ? 'selected' : ''; $opts .= "<option $sel value='$s'>$desc</option>"; } return $opts; } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example</title> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script type='text/javascript'> $(function() { $(".status").change(function() { let id = $(this).data("id") if ( $(this).val() == 2 ) { $(".title[data-id="+id+"]").attr("disabled", true) $(".salary[data-id="+id+"]").attr("disabled", true) } else { $(".title[data-id="+id+"]").attr("disabled", false) $(".salary[data-id="+id+"]").attr("disabled", false) } }) }) </script> <style type='text/css'> table { border-collapse: collapse; width: 80%; margin: 30px auto; } th { text-align: left; padding: 8px; color: white; background-color: black; } td { padding: 4px 8px; } </style> </head> <body> <h1>Example</h1> <form method='POST'> <table border='1'> <tr> <th>Name</th> <th>Status</th> <th>Job Title</th> <th>Salary</th> </tr> <?= $tdata ?> <tr><td colspan='4'><input type='submit'></tr> </table> </form> </body> </html> 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.