JQuery动态实现table行自增自减

最新推荐文章于 2019-10-28 21:05:43 发布

原创

最新推荐文章于 2019-10-28 21:05:43 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #jquery

这篇博客介绍了如何使用JQuery实现在网页中动态增加和删除表格行的功能。通过点击按钮，可以实现表格行的自增，同时提供了一个删除按钮用于移除最后一行。示例代码中，`row_count`变量用于跟踪当前行数，并且展示了具体的HTML和JavaScript实现。

效果图：

代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.2.1/jquery-3.2.1.min.js"></script>
<script>

var row_count = 0;
$(function () {
$("#but").click(function () {
row_count++;
var tr = '<tr id ="tri'+row_count+'"><td style="width:800px;height:20px;"> <input type="text" style="width:800px" /></td></tr>';
&nb