JavaScript实现表格选中一行并操作数据库 (js表格选中一行数据库)

在网页开发中，使用表格展示数据是非常常见的方式。一些应用需要用户能够选中表格的一行来进行操作，比如编辑、删除等等。同时，这些用户操作也需要被记录在后台数据库中。本文将介绍如何使用JavaScript实现表格选中一行并 在后台数据库中进行相关操作。

一、实现表格选中一行

1.1 HTML代码

我们需要在HTML中创建一个表格，就像这样：

“`

“`

这是一个非常简单的表格，它有四列，分别是ID、Name、Age和Gender。表格中有三行数据，每行数据都由四个单元格组成。表格的id设置为”user-table”，方便后续操作。

1.2 JavaScript代码

接下来，在JavaScript中编写代码来实现表格选中一行的功能。代码如下：

“`

var table = document.getElementById(“user-table”); //获得表格对象

var rows = table.getElementsByTagName(“tr”); //获得表格中所有的行

//给每个行绑定点击事件

for (var i = 0; i

rows[i].onclick = function() {

//使用this取得当前点击的行的索引

var index = this.rowIndex;

//判断当前点击的行是否已经被选中，如果是就取消选中

if (rows[index].className == “selected”) {

rows[index].className = “”;

} else {

//如果当前点击的行没有被选中，先将其它的行状态清空，再将当前行状态设为选中

for (var j = 0; j

rows[j].className = “”;

}

rows[index].className = “selected”;

}

}

}

“`

以上代码通过给每个行绑定点击事件来实现表格选中一行的功能。当用户点击某一行的时候，该行的状态就会变为选中状态。如果该行已经被选中，再次点击该行则取消选中。

1.3 CSS代码

为了让用户知道哪一行被选中了，我们需要通过CSS代码为选中状态的行添加样式。代码如下：

“`

.selected {

background-color: #ccc;

}

“`

以上代码设置了选中状态的行的背景颜色为灰色。

二、操作数据库

现在我们已经实现了表格选中一行的功能，接下来我们需要将用户的操作记录在后台数据库中。本例中，我们使用PHP语言操作后台MySQL数据库。

2.1 创建数据库表

在MySQL数据库中创建一个名为”users”的表，表结构如下：

“`

CREATE TABLE `users` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(50) NOT NULL,

`age` int(11) NOT NULL,

`gender` varchar(10) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

“`

以上代码创建了一个名为”users”的表，其中包含四个字段：id、name、age和gender。其中，id字段是自动递增的主键。

2.2 PHP代码

PHP代码用于将用户的操作记录在数据库中。代码如下：

“`

//连接数据库

$servername = “localhost”;

$username = “username”;

$password = “password”;

$dbname = “myDB”;

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {

die(“Connection fled: ” . $conn->connect_error);

}

//获取表格选中行的信息

$name = $_POST[“name”];

$age = $_POST[“age”];

$gender = $_POST[“gender”];

//判断用户是否选中了一行数据

if (!$name || !$age || !$gender) {

echo “Please select a row.”;

} else {

//将用户的操作记录在数据库中

$sql = “INSERT INTO users (name, age, gender) VALUES (‘$name’, ‘$age’, ‘$gender’)”;

if ($conn->query($sql) === TRUE) {

echo “Operation recorded successfully.”;

} else {

echo “Error: ” . $sql . “
” . $conn->error;

}

}

//关闭数据库连接

$conn->close();

?>

“`

以上代码使用了PHP中的mysqli库连接MySQL数据库。在代码中，我们先判断用户是否选中了一行数据。如果没有选中，就返回提示信息；如果选中了，就将用户的操作记录在数据库中。

2.3 JavaScript代码

JavaScript代码用于获取选中行的信息，并将该信息发送给后台PHP脚本。代码如下：

“`

var submitBtn = document.getElementById(“submit-btn”); //获取提交按钮对象

submitBtn.onclick = function() {

var selectedRow = table.getElementsByClassName(“selected”)[0]; //获取选中行对象

if (selectedRow) {

var cells = selectedRow.getElementsByTagName(“td”); //获取选中行的单元格

var name = cells[1].innerHTML; //获取名字

var age = cells[2].innerHTML; //获取年龄

var gender = cells[3].innerHTML; //获取性别

//使用XMLHttpRequest将选中行的信息发送给后台PHP脚本

var xhr = new XMLHttpRequest();

xhr.open(“POST”, “insert.php”, true);

xhr.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);

xhr.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

console.log(this.responseText); //返回后台操作信息

}

};

xhr.send(“name=” + name + “&age=” + age + “&gender=” + gender);

} else {

alert(“Please select a row.”); //如果没有选中行，弹出提示框

}

};

“`

以上代码在提交按钮被点击时执行。它通过getTableByClassName函数获取选中行的信息，然后使用XMLHttpRequest将该信息发送给后台PHP脚本。在PHP脚本执行完毕后，代码会在控制台打印返回的操作信息。

三、

本文介绍了如何使用JavaScript实现表格选中一行并操作后台MySQL数据库的功能。通过本文的演示，我们可以发现，JavaScript是一门非常强大的语言，它可以完成各种动态效果和交互操作。同时，在实现这类功能时，我们需要注意安全性和代码可维护性。