在页面上写一个table的标签,写一个按钮,响应单击事件,调用一个函数,没单击一次,为table增加一行数据,单元格中内容任意
时间: 2024-02-16 07:05:29 浏览: 91
好的,下面是代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>增加表格行</title>
<script>
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "New cell 1";
cell2.innerHTML = "New cell 2";
}
</script>
</head>
<body>
<button onclick="addRow()">增加一行</button>
<table id="myTable">
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
</body>
</html>
```
这段代码会在页面上显示一个按钮和一个带有表头和两行数据的表格。每次单击按钮时,都会在表格的最后一行添加一行数据,单元格内容为"New cell 1"和"New cell 2"。
相关问题
在页面上写一个table标签,写一个按钮,响应单击事件,调用一个函数,每单击一次,为table增加一行数据,单元格中内容任意。
好的,以下是您需要的HTML和JavaScript代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Table增加行</title>
</head>
<body>
<button onclick="addRow()">增加行</button>
<br><br>
<table id="myTable">
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
</table>
<script>
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(table.rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "新数据1";
cell2.innerHTML = "新数据2";
cell3.innerHTML = "新数据3";
}
</script>
</body>
</html>
```
这个代码会创建一个带有一个按钮和一个表格的页面。当您单击按钮时,会调用JavaScript函数 `addRow()`。这个函数会获取到表格(通过ID)并在表格的末尾插入一行。然后,函数会为每个单元格添加一个新的单元格,内容为 "新数据1"、"新数据2" 和 "新数据3"。
请注意,您可以根据需要更改单元格的内容。
使用PHP实现相关应用系统开发平台,实现项目中的如下模块: 1、数据库模块: (1)使用navicat图形化工具创建数据库tushu和数据表book,并添加数据。 (2)创建数据库的连接文件conn.php,实现与MySql服务器连接,选择tushu数据库,并设置数据库编码。 2、登录与注册界面模块: (1) 设计login.php登录页面,添加一个用户名文本框命名为user,密码域并命名为pwd。 (2)在“登录”按钮的表单元素中添加一个onclick鼠标单击事件,并调用自定义函数mycheck(),用来验证表单元素是否为空。 (3)登录成功跳转到图书信息页面index.php。 3、图书管理系统模块: (1)图书信息页面 (2) 图书管理系统具有添加、修改、删除图书的功能。
以下是使用 PHP 实现相关应用系统开发平台,实现项目中的数据库模块、登录与注册界面模块、图书管理系统模块的示例代码:
1. 数据库模块
创建数据库 tushu 和数据表 book,并添加数据:
```
-- 创建数据库
CREATE DATABASE tushu;
-- 使用数据库
USE tushu;
-- 创建数据表
CREATE TABLE book (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(30) NOT NULL,
author VARCHAR(30) NOT NULL,
price DECIMAL(10, 2) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
-- 添加数据
INSERT INTO book (name, author, price) VALUES ('PHP Programming', 'John Smith', 29.99);
INSERT INTO book (name, author, price) VALUES ('Web Development', 'Jane Doe', 39.99);
```
创建数据库的连接文件 conn.php,实现与 MySQL 服务器连接,选择 tushu 数据库,并设置数据库编码:
```
<?php
// 数据库配置
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "tushu";
// 创建数据库连接
$conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);
// 检测连接是否成功
if (!$conn) {
die("连接失败:" . mysqli_connect_error());
}
// 设置数据库编码
mysqli_set_charset($conn, "utf8");
?>
```
2. 登录与注册界面模块
设计 login.php 登录页面,添加一个用户名文本框命名为 user,密码域并命名为 pwd:
```
<form action="login.php" method="post">
<label>用户名:</label>
<input type="text" name="user"><br>
<label>密码:</label>
<input type="password" name="pwd"><br>
<input type="submit" value="登录">
</form>
```
在“登录”按钮的表单元素中添加一个 onclick 鼠标单击事件,并调用自定义函数 mycheck(),用来验证表单元素是否为空:
```
<form action="login.php" method="post">
<label>用户名:</label>
<input type="text" name="user"><br>
<label>密码:</label>
<input type="password" name="pwd"><br>
<input type="submit" value="登录" onclick="return mycheck();">
</form>
<script>
function mycheck() {
var user = document.getElementsByName("user")[0].value;
var pwd = document.getElementsByName("pwd")[0].value;
if (user == "" || pwd == "") {
alert("请输入用户名和密码!");
return false;
}
return true;
}
</script>
```
登录成功跳转到图书信息页面 index.php:
```
<?php
// 启动会话
session_start();
// 如果用户已登录,直接跳转到图书信息页面
if (isset($_SESSION["user"])) {
header("Location: index.php");
exit;
}
// 如果用户提交了登录表单
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// 获取用户输入的用户名和密码
$user = $_POST["user"];
$pwd = $_POST["pwd"];
// 验证用户名和密码是否正确
if ($user == "admin" && $pwd == "123456") {
// 记录用户信息到会话中
$_SESSION["user"] = $user;
// 跳转到图书信息页面
header("Location: index.php");
exit;
} else {
// 显示登录失败消息
$msg = "用户名或密码不正确!";
}
}
?>
<form action="login.php" method="post">
<label>用户名:</label>
<input type="text" name="user"><br>
<label>密码:</label>
<input type="password" name="pwd"><br>
<input type="submit" value="登录" onclick="return mycheck();">
</form>
<script>
function mycheck() {
var user = document.getElementsByName("user")[0].value;
var pwd = document.getElementsByName("pwd")[0].value;
if (user == "" || pwd == "") {
alert("请输入用户名和密码!");
return false;
}
return true;
}
</script>
```
3. 图书管理系统模块
图书信息页面:
```
<?php
// 包含数据库连接文件
include("conn.php");
// 查询图书信息
$sql = "SELECT * FROM book";
$result = mysqli_query($conn, $sql);
// 显示图书信息
echo "<table border='1'>
<tr>
<th>ID</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
<th>创建时间</th>
<th>更新时间</th>
</tr>";
while ($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo "<td>" . $row["id"] . "</td>";
echo "<td>" . $row["name"] . "</td>";
echo "<td>" . $row["author"] . "</td>";
echo "<td>" . $row["price"] . "</td>";
echo "<td>" . $row["created_at"] . "</td>";
echo "<td>" . $row["updated_at"] . "</td>";
echo "</tr>";
}
echo "</table>";
// 关闭数据库连接
mysqli_close($conn);
?>
```
图书管理系统具有添加、修改、删除图书的功能。以下是示例代码:
添加图书:
```
<?php
// 包含数据库连接文件
include("conn.php");
// 如果用户提交了添加图书表单
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// 获取用户输入的图书信息
$name = $_POST["name"];
$author = $_POST["author"];
$price = $_POST["price"];
// 将图书信息插入到数据库中
$sql = "INSERT INTO book (name, author, price) VALUES ('$name', '$author', $price)";
if (mysqli_query($conn, $sql)) {
echo "添加图书成功!";
} else {
echo "添加图书失败:" . mysqli_error($conn);
}
}
?>
<form action="add.php" method="post">
<label>书名:</label>
<input type="text" name="name"><br>
<label>作者:</label>
<input type="text" name="author"><br>
<label>价格:</label>
<input type="text" name="price"><br>
<input type="submit" value="添加">
</form>
```
修改图书:
```
<?php
// 包含数据库连接文件
include("conn.php");
// 如果用户提交了修改图书表单
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// 获取用户输入的图书信息
$id = $_POST["id"];
$name = $_POST["name"];
$author = $_POST["author"];
$price = $_POST["price"];
// 更新图书信息到数据库中
$sql = "UPDATE book SET name='$name', author='$author', price=$price WHERE id=$id";
if (mysqli_query($conn, $sql)) {
echo "修改图书成功!";
} else {
echo "修改图书失败:" . mysqli_error($conn);
}
} else {
// 获取要修改的图书信息
$id = $_GET["id"];
$sql = "SELECT * FROM book WHERE id=$id";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_assoc($result);
$name = $row["name"];
$author = $row["author"];
$price = $row["price"];
}
?>
<form action="edit.php" method="post">
<input type="hidden" name="id" value="<?php echo $id; ?>">
<label>书名:</label>
<input type="text" name="name" value="<?php echo $name; ?>"><br>
<label>作者:</label>
<input type="text" name="author" value="<?php echo $author; ?>"><br>
<label>价格:</label>
<input type="text" name="price" value="<?php echo $price; ?>"><br>
<input type="submit" value="修改">
</form>
```
删除图书:
```
<?php
// 包含数据库连接文件
include("conn.php");
// 获取要删除的图书 ID
$id = $_GET["id"];
// 从数据库中删除图书
$sql = "DELETE FROM book WHERE id=$id";
if (mysqli_query($conn, $sql)) {
echo "删除图书成功!";
} else {
echo "删除图书失败:" . mysqli_error($conn);
}
// 关闭数据库连接
mysqli_close($conn);
?>
```
阅读全文