Question

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

在单击“历史记录”按钮时，无论何时要按更新日期对记录进行更新，我都必须显示记录的历史记录，从数据库中获取数据。

我面临的问题是我无法唯一确定单击了哪一行的历史记录按钮，因此无法提供该行的主键“ 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>

任何人都可以向我提供一种解决方案，以提取用户单击历史记录按钮的行的“记事本编号”的值。

Answer 1

您只需在按钮上添加，然后从JavaScript中获取它，就我所能看到的那样，您要尝试实现这一点，考虑到按钮本身并不会做任何事情。

P.S .：使用div作为按钮是一个非常糟糕的主意，而且我会说这也很令人困惑和毫无意义。如果需要按钮，则可以使用为此目的而存在的button标记。

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

这是一个基本示例，说明如何使用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>

唯一标识单击按钮的表行

3 个答案: