如何获取表行 选择选项值 使用复选框



我在一列中有以下带有选择选项的 html 表。我想显示已选中的行的值,但不知道如何使用选择选项值。有人可以帮我修改代码吗?如果不使用 DOM,我们可以只使用 PHP 来获取所有检查值并存储在 $ 变量中吗?最后,我将提交选中的值并使用 PHP 插入到表中。多谢。

<?php
require_once("connMysql.php");
$stu_add = mysqli_query($db_link, "SELECT * FROM stu");
$rowcount = mysqli_num_rows($stu_add);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>how to get options value in html table</title>
</head>
<body>
<table id="table" border="1">
<tr>
<th style="text-align:center; width:70px">Classname</th>
<th style="text-align:center; width:100px">Student ID</th>        
<th style="text-align:center; width:100px">Name</th>
<th style="text-align:center; width:100px">Grade</th>
<th style="text-align:center; width:100px">Select</th>        
</tr>
<?php
if($stu_add-> num_rows > 0 ){
while ($row = $stu_add-> fetch_assoc()){
?>
<tr>
<td id="classname" style="text-align:center;"><?php echo $row['classname'];?></td>
<td id="stuid" style="text-align:center;"><?php echo $row['stuid'];?></td>        
<td id="stu_name" style="text-align:center;"><?php echo $row['stu_name'];?></td>
<td><select name="grade" id="grade">
<option value="">-Please select-</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</td>
<td align="center">
<input type="checkbox" id="checked" name="checked[]" value="<?php echo $row['stuid'];?>">
</td>
</tr>
<?php
}
}
?>
<input type="text" id="classname" size="10">
<input type="text" id="stuid" size="10">
<input type="text" id="stu_name" size="10">
<input type="text" id="grade" size="10">
<button class="" onclick="showData()">Show data</button>
</table>
<script>
function showData()
{
var table = document.getElementById('table');
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
// document.getElementById("classname").value = this.cells[0].innerHTML;
// document.getElementById("stuid").value = this.cells[1].innerHTML;
// document.getElementById("stu_name").value = this.cells[2].innerHTML;
// document.getElementById("grade").value = this.cells[3].innerHTML.options[0].text;
var a = this.cells[0].innerHTML;
var b  = this.cells[1].innerHTML;
var c  = this.cells[2].innerHTML;
var d  = this.cells[3].innerHTML.options[0].text;
var data = a + b + c + d;
alert(data);
};
}
}
</script>

正如上面的用户所说,您可以获取复选框的 id 并使用 onchange 然后将值传递给函数。

```
$('#checkbox').change(function(){
var query = $(this).val();
showdata(query);
});
```

最新更新