CODEWITHSUNDEEP
javascriptphphtmlsql
user10235730
user10235730

Reputation:

Uniquely identify the table row on which the button is clicked

I am facing an issue on my 'viewAllRecords' page.

My page looks as following

On clicking the "History" button, I have to show the history of record whenever it was updated ordered by the date of update, fetching data from Database.

The problem I am facing is I cannot uniquely identify which row's history button is clicked, so that I can provide that row's PRIMARY KEY "Notesheet Number".

Here is the PHP code of viewAllRecords page.

<html lang="en">
<head>
    <title>All Records</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link rel="icon" type="image/png" href="images/icons/favicon.ico"/>         
    <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">      
    <link rel="stylesheet" type="text/css" href="fonts/Linearicons-Free-v1.0.0/icon-font.min.css">       
    <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">           
    <link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">       
    <link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">        
    <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">           
    <link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">

    <script src="vendor/jquery/jquery-3.2.1.min.js"></script>
    <script src="vendor/bootstrap/js/popper.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="vendor/animsition/js/animsition.min.js"></script>
    <script src="vendor/select2/select2.min.js"></script>
    <script src="vendor/daterangepicker/moment.min.js"></script>
    <script src="vendor/daterangepicker/daterangepicker.js"></script>
    <script src="vendor/countdowntime/countdowntime.js"></script>
    <script src ="js/a.js"></script>

</head>
<body>
    <div class="container">

        <div>
            <span class="login100-form-title m-t-20 m-b-40">
                All Records / सभी रिकॉर्ड
            </span>
        </div>
        <table class="table table-hover" id="mt" onclick="myFun()">
            <thead>
                <tr>
                    <th>Notesheet Number / पत्रावली क्रमांक</th>
                    <th>Case Number / परिवाद क्रमांक</th>
                    <th>Last Date to Reply / उत्तर देने के लिए अंतिम तिथि</th>
                </tr>
            </thead>
            <tbody>
                <?php
                require_once 'config.php';
                session_start();
                $result = mysqli_query($link, "SELECT * FROM `records`where STATUS ='active'");
                while ($row = mysqli_fetch_array($result)) {
                    ?>
                    <tr class="<?php
                    $current_date = date("Y-m-d");
                    if ($row['isResolved'] == 0 && $row['repLastDate'] < $current_date) {
                        echo 'table-danger';
                    } else if ($row['isResolved'] == 1) {
                        echo 'table-success';
                    } else {
                        echo 'table-warning';
                    }
                    ?>">
                        <td><?php echo $row['notesheetNo']; ?></td>
                        <td><?php echo $row['caseNo']; ?></td>
                        <td><?php echo $row['repLastDate']; ?></td>
                        <td><div class="btn btn-primary">History</div></td>
                    </tr> 
                    <?php
                }
                mysqli_close($link)
                ?>
            </tbody>
        </table>
    </div>

    <div class="btn btn-primary" onclick="location.href = 'welcome.php'" style="position: fixed;left: 47%;bottom: 10%;">Home</div>

</body>

Can anyone please provide me a solution to extract the value of "Notesheet Number" of the row whose history button is clicked by the user.

Upvotes: 2

Views: 960

Answers (3)

Willem van der Veen
Willem van der Veen

Reputation: 36580

Here is a basic example of how you can use the onclick event to show which row you have clicked.

function clicked (nr) {
  console.log('Clicked from row: ' + nr);
}
tr:hover{
  color: red;
}
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr onclick="clicked(1)">
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr onclick="clicked(2)">
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
    <tr onclick="clicked(3)">
    <td>Jerry</td>
    <td>Bill</td> 
    <td>93</td>
  </tr>
</table>

Upvotes: 0

Saurabh bhatia
Saurabh bhatia

Reputation: 100

Using Jquery : -

    <script type="text/javascript">
    $(".btn.btn-primary").click(function () {
        var row = $(this).closest('tr');
        var column1 = $(x.find('td')[0]).text();
        var column2 = $(x.find('td')[1]).text();

        alert("column 1 - " + column1 + " , column 2 - " + column2)
    });
    </script>

Upvotes: 0

Antonio
Antonio

Reputation: 51

You can just add a custom data attribute to the button and then grab it from JavaScript, which is what you are trying to achieve as far I can see, considering that the button doesn't do anything itself.

P.S.: Use a div as a button is a really bad idea, and also quite confusing and pointless I would say. If you need a button, you can just use the button tag, which exists for that purpose.

Upvotes: 1

Related Questions