唯一标识单击按钮的表行

Question

我在“viewAllRecords”页面上遇到问题。

单击“历史记录”按钮时，我必须在按更新日期排序时显示记录的历史记录，从数据库中获取数据。

我面临的问题是我无法唯一确定点击了哪一行的历史按钮，因此我可以提供该行的 PRIMARY KEY“Notesheet Number”。

这里是 viewAllRecords 页面的 PHP 代码。

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

谁能给我一个解决方案来提取用户点击历史按钮的行的“Notesheet Number”的值。

Answer 1

这是一个基本示例，说明如何使用onclick 事件显示您点击了哪一行。

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>

Answer 2

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

Answer 3

您可以在按钮上添加一个custom data attribute，然后从 JavaScript 中获取它，这是您目前所看到的，考虑到按钮本身不做任何事情。

P.S.：使用 div 作为按钮是一个非常糟糕的主意，而且我会说非常混乱和毫无意义。如果你需要一个按钮，你可以使用按钮标签，它是为此目的而存在的。