Javascript 唯一标识单击按钮的表行
我在“viewAllRecords”页面上遇到了一个问题 单击“History”按钮时,我必须显示记录的历史记录,无论它何时按更新日期进行更新,从数据库中获取数据 我面临的问题是,我无法唯一地识别单击了哪一行的历史记录按钮,因此我可以提供该行的主键“Notesheet Number” 下面是viewAllRecords页面的PHP代码Javascript 唯一标识单击按钮的表行,javascript,php,html,sql,Javascript,Php,Html,Sql,我在“viewAllRecords”页面上遇到了一个问题 单击“History”按钮时,我必须显示记录的历史记录,无论它何时按更新日期进行更新,从数据库中获取数据 我面临的问题是,我无法唯一地识别单击了哪一行的历史记录按钮,因此我可以提供该行的主键“Notesheet Number” 下面是viewAllRecords页面的PHP代码 <html lang="en"> <head> <title>All Records</title>
<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>
所有记录
所有记录/सभी रिकॉर्ड
附注编号/पत्रावली क्रमांक
个案编号/परिवाद क्रमांक
最后答复日期/उत्तर देने के लिए अंतिम तिथि
您只需在按钮中添加一个,然后从JavaScript中获取它,就我所见,这就是您试图实现的目标,考虑到按钮本身没有任何功能
附言:使用div作为按钮是一个非常糟糕的主意,我想说的是,这也是一个相当混乱和毫无意义的想法。如果您需要一个按钮,您可以使用按钮标签,该标签就是为了这个目的而存在的。使用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>
$(“.btn.btn主”)。单击(函数(){
var行=$(this).closest('tr');
var column1=$(x.find('td')[0]).text();
var column2=$(x.find('td')[1]).text();
警报(“第1列-”+第1列+”,第2列-“+第2列”)
});
下面是一个基本示例,说明如何使用onclick
事件显示单击的行
单击的函数(nr){
console.log('从行中单击:'+nr);
}
tr:悬停{
颜色:红色;
}
名字
姓氏
年龄
吉尔
史密斯
50
前夕
杰克逊
94
杰瑞
比尔
93
为什么div a按钮是空的?看起来很奇怪,它不是一个真正的按钮。。。。因此,请在按钮上使用数据属性并在单击时读取,或者选择父行并选择包含数据的表格单元格。