我的最终目标是单击表上的一行,并将其填充到旁边的表单中进行更新。这里的代码只是"尝试"点击一行,并在我对表单的填充进行编码之前,将其显示在带有行数据的Javascript警报中
在这里,我使用PHP填充了表格。TR类具有"updatetbl",稍后将与javascript一起使用。我使用了这个问题中的代码示例:点击获取表行数据
if ($patients->num_rows > 0){
while($row = $patients-> fetch_assoc()) {
echo '<tr class="updatetbl">';
echo '<td class="updatetbl">' . $row['ID'] . '</td>';
echo '<td class="updatetbl">' . $row['Forename'] . '</td>';
echo '<td class="updatetbl">' . $row['Surname'] . '</td>';
echo '<td class="updatetbl">' . $row['DOB'] . '</td>';
echo '<td class="updatetbl">' . $row['Address'] . '</td>';
echo '<td class="updatetbl">' . $row['Postcode'] . '</td>';
echo '<td class="updatetbl">' . $row['Telephone'] . '</td>';
echo '<td class="updatetbl">' . $row['Email'] . '</td>';
echo '<tr>';
}
}else{
echo "0 results";
}
我正试图首先用Javascript将数据输入警报(我只想在输入表单之前查看我是否有数据)
要填充警报并注册单击,我有以下javascript。
<script>
$("tr.updatetbl").click(function(){
var tableData = $(this).children("td").map(function(){
return $(this).text();
}).get();
alert("Data = "+ $trim(tableData[0]) + " , " + $trim(tableData[1]) + " , "
+ $trim(tableData[2]) + " , " + $trim(tableData[3]) + " , "));
});
</script>
据我所知,tr.updatetbl专注于点击此处?然后收集表格数据。。
有什么想法吗?
更新:我确实有。
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Forename</th>
<th>Surname</th>
<th>D.O.B</th>
<th>Address</th>
<th>Postcode</th>
<th>Tel</th>
<th>Email</th>
</tr>
</thead>
<?php
$servername = removed
$dbname = removed
$username = removed
$password = removed
$connection = new mysqli($servername, $username, $password, $dbname);
if ($connection->connect_error) {
die('Could not connect: ' . $connection->connect_error);
}
$sql = "SELECT ID, Forename, Surname, DOB, Telephone, Email, Address, Postcode FROM people";
$people= $connection->query($sql);
if ($patients->num_rows > 0){
while($row = $patients-> fetch_assoc()) {
echo '<tr class="updatetbl">';
echo '<td>' . $row['ID'] . '</td>';
echo '<td>' . $row['Forename'] . '</td>';
echo '<td>' . $row['Surname'] . '</td>';
echo '<td>' . $row['DOB'] . '</td>';
echo '<td>' . $row['Address'] . '</td>';
echo '<td>' . $row['Postcode'] . '</td>';
echo '<td>' . $row['Telephone'] . '</td>';
echo '<td>' . $row['Email'] . '</td>';
echo '</tr>';
}
}
else
{
echo "0 results";
}
$connection->close();
?>
</table>
已解决:
我已经弄清楚了——我用javascript将编译后的代码放入一个新的jFiddle中,但它仍然不起作用。我不知道为什么,所以我看了看你的,我注意到你的库在旁边是jQuery!我的是标准JS。所以我意识到我没有包括<script src="jquery-1.11.3.min.js"></script>
我投了下面的答案,因为我毫不费力地得到了帮助,尽管我相信在所有这些答案之后,其他答案都会起作用。
在这一行的末尾有一个")",这是不需要的,这就是为什么它不起作用:
`alert("Data = "+ $trim(tableData[0]) + " , " + $trim(tableData[1]) + " , "
+ $trim(tableData[2]) + " , " + $trim(tableData[3]) + " , ")); which isnt needed.
此外,只需在第行添加类updatetbl
即可。
HTML
<table>
<tbody>
<tr class="updatetbl">
<td >ID</td>
<td >Forename</td>
<td >Surname</td>
<td >DOB</td>
<td >Address</td>
<td >Postcode</td>
<td >Telephone</td>
<td >Email</td>
</tr>
<tbody>
</table>
JS:
$(".updatetbl").click(function(){
var tableData = $(this).children("td").map(function(){
return $(this).text();
}).get();
alert("Data = "+ tableData[0] + " , " + tableData[1] + " , "
+ tableData[2] + " , " + tableData[3] + " , ");
});
怎么样;
$("tr.updatetbl").click(function(){
var data = [];
$("tr.updatetbl td").each(function(i, td){
data.push(td.text());
});
console.log(data);
});
请找到此的以下代码
$( "table tr.updatetbl" ).on( 'click', function( e ) {
e.preventDefault();
var data = [];
$( this ).find( "td" ).each( function(){ data.push( $.trim( $( this ).text() ) ) } );
console.log( data );
});
小提琴链接:https://jsfiddle.net/4tk4w0ua/1/