简单的HTML中TAB分页实现，js控制页面tr行新增、删除、修改

最新推荐文章于 2024-04-16 22:49:44 发布
最新推荐文章于 2024-04-16 22:49:44 发布
阅读量1.5k 收藏
点赞数
分类专栏： html js 文章标签： html tab分页 tr行控制 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27877761/article/details/52330230
版权
html 同时被 2 个专栏收录
3 篇文章 0 订阅
订阅专栏
js
3 篇文章 0 订阅
订阅专栏

html页面源码及js代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<title>统计项TAB</title>
</head>
<style type="text/css">
   *{ margin:0; padding:0;}
  body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
 .tab { width:240px;margin:0px;padding-left:150px;}
 .tab_menu { clear:both;}
 .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}
 .tab_menu li.hover { background:#DFDFDF;}
 .tab_menu li.selected { color:#FFF; background:#6D84B4;}
 .tab_box { clear:both; border:0px solid #898989; height:100px;}
 .hide{display:none}
</style>
<script  Language="JavaScript">
//国家、省份、其他TAB标签切换
$(function () {
var $div_li = $("div.tab_menu ul li");
$div_li.click(function () {
$(this).addClass("selected") //当前<li>元素高亮
.siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮
var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。
$("div.tab_box > div") //选取子节点。不选取子节点的话，会引起错误。如果里面还有div
.eq(index).show() //显示 <li>元素对应的<div>元素
.siblings().hide(); //隐藏其它几个同辈的<div>元素
}).hover(function () {
$(this).addClass("hover");
}, function () {
$(this).removeClass("hover");
})
})
//删除按钮国家
function getDel(k) {
$(k).parent().remove();
var guojiano = $('#addTr tr').length - 1;


for (var i = 1; i < guojiano; i++) {
$('#addTr tr:eq(' + (i + 1) + ') td:first').text(i);
}
}
//删除按钮省份
function getDel1(k) {
$(k).parent().remove();
var shengno = $('#addTr1 tr').length - 1;
for (var i = 1; i < shengno; i++) {
$('#addTr1 tr:eq(' + (i + 1) + ') td:first').text(i);
}
}
//删除按钮行业
function getDel2(k) {
$(k).parent().remove();
var hangyeno = $('#addTr2 tr').length - 1;


for (var i = 1; i < hangyeno; i++) {
$('#addTr2 tr:eq(' + (i + 1) + ') td:first').text(i);
}
}


//删除按钮注册方式
function getDel3(k) {
$(k).parent().remove();
var zcfsno = $('#addTr3 tr').length - 1;


for (var i = 1; i < zcfsno; i++) {
$('#addTr3 tr:eq(' + (i + 1) + ') td:first').text(i);
}
}
//删除按钮参观方式
function getDel4(k) {
$(k).parent().remove();
var cgfsno = $('#addTr4 tr').length - 1;


for (var i = 1; i < cgfsno; i++) {
$('#addTr4 tr:eq(' + (i + 1) + ') td:first').text(i);
}
}
//删除按钮参观天数
function getDel5(k) {
$(k).parent().remove();
var cgtsno = $('#addTr5 tr').length - 1;


for (var i = 1; i < cgtsno; i++) {
$('#addTr5 tr:eq(' + (i + 1) + ') td:first').text(i);
}
}
//删除按钮参观目的
function getDel6(k) {
$(k).parent().remove();
var cgmdno = $('#addTr6 tr').length - 1;


for (var i = 1; i < cgmdno; i++) {
$('#addTr6 tr:eq(' + (i + 1) + ') td:first').text(i);
}
}
function add() {
//新增按钮国家
var rows = $("#addTr tr").length - 2;
$str = '';
$str += "<tr align='left'>";
$str += "<td>" + (rows + 1) + "</td>";
$str += "<td><input type='text' id='atr' value='' width='200'/></td>";
$str += "<td onclick='getDel(this)'><input type='button' value='删除'/></td>";
$str += "</tr>";
$("#addTr").append($str);
}


//新增按钮省
function add1() {
var rows = $("#addTr1 tr").length - 2;
$str = '';
$str += "<tr align='left'>";
$str += "<td>" + (rows + 1) + "</td>";
$str += "<td><input type='text' id='atr' value='' width='200'/></td>";
$str += "<td onclick='getDel1(this)'><input type='button' value='删除'/></td>";
$str += "</tr>";
$("#addTr1").append($str);
}
//新增按钮行业
function add2() {
var rows = $("#addTr2 tr").length - 2;
$str = '';
$str += "<tr align='left'>";
$str += "<td>" + (rows + 1) + "</td>";
$str += "<td><input type='text' id='atr' value='' width='200'/></td>";
$str += "<td onclick='getDel2(this)'><input type='button' value='删除'/></td>";
$str += "</tr>";
$("#addTr2").append($str);
}
//新增按钮注册方式
function add3() {
var rows = $("#addTr3 tr").length - 2;
$str = '';
$str += "<tr align='left'>";
$str += "<td>" + (rows + 1) + "</td>";
$str += "<td><input type='text' id='atr' value='' width='200'/></td>";
$str += "<td onclick='getDel3(this)'><input type='button' value='删除'/></td>";
$str += "</tr>";
$("#addTr3").append($str);
}
//新增按钮参观方式
function add4() {
var rows = $("#addTr4 tr").length - 2;
$str = '';
$str += "<tr align='left'>";
$str += "<td>" + (rows + 1) + "</td>";
$str += "<td><input type='text' id='atr' value='' width='200'/></td>";
$str += "<td onclick='getDel4(this)'><input type='button' value='删除'/></td>";
$str += "</tr>";
$("#addTr4").append($str);
}
//新增按钮参观天数
function add5() {
var rows = $("#addTr5 tr").length - 2;
$str = '';
$str += "<tr align='left'>";
$str += "<td>" + (rows + 1) + "</td>";
$str += "<td><input type='text' id='atr' value='' width='200'/></td>";
$str += "<td onclick='getDel5(this)'><input type='button' value='删除'/></td>";
$str += "</tr>";
$("#addTr5").append($str);
}
//新增按钮参观目的
function add6() {
var rows = $("#addTr6 tr").length - 2;
$str = '';
$str += "<tr align='left'>";
$str += "<td>" + (rows + 1) + "</td>";
$str += "<td><input type='text' id='atr' value='' width='200'/></td>";
$str += "<td onclick='getDel6(this)'><input type='button' value='删除'/></td>";
$str += "</tr>";
$("#addTr6").append($str);
}
</script>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#c3c3c3" align="center" id="mytable" style="padding-left:50px;">
<tr>
    <td colspan="3"><div align="center" style="font-size:20px;padding-top:30px;"><strong>报表统计项维护</strong></div></td>
  </tr>
  <tr>
  <td>
    <div class="tab"> 
   <div class="tab_menu">
        <ul> 
        <li class="selected">国家</li> 
        <li>省份</li> 
        <li>其他字典项</li> 
        </ul> 
</div>
<div class="tab_box">
        <div>
<table width="800" border="1" cellpadding="0" cellspacing="0" bordercolor="#c3c3c3" align="center">
        <tbody id="addTr">
  <tr>
    <td colspan="3"><div align="center"><strong>国&nbsp;&nbsp;&nbsp;家</strong></div></td>
  </tr>
  <tr>
    <td>序号</td>
    <td>统计项名称</td>
    <td>操作</td>
  </tr>
<tr>
    <td>1</td>
    <td><input type="text" id="atr" value="中国" width="200"/></td>
    <td onclick="getDel(this)"><input type='button' value='删除'/></td>
  </tr>
  </tbody>
  <tr>
    <td colspan="2">&nbsp;</td>
    <td><input id="getAtr" type='button' value='新增' onclick="add()"/></td>
  </tr>
  </table>
  </div> 
<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&省份&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& -->
        <div class="hide">
<table width="800" border="1" cellpadding="0" cellspacing="0" bordercolor="#c3c3c3" align="center" id="idTab2">
  <tbody id="addTr1">
  <tr>
    <td colspan="3"><div align="center"><strong>省&nbsp;&nbsp;&nbsp;份</strong></div></td>
  </tr>
  <tr>
    <td>序号</td>
    <td>统计项名称</td>
    <td>操作</td>
  </tr>
<tr>
    <td>1</td>
    <td><input type="text" id="atr" value="北京市" width="200"/></td>
    <td onclick="getDel1(this)"><input type='button' value='删除'/></td>
  </tr>
  </tbody>
  <tr>
    <td colspan="2">&nbsp;</td>
    <td><input id="getAtr1" type='button' value='新增' onclick="add1()"/></td>
  </tr>
  </table>
</div>

<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&其他&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& -->
        <div class="hide">
<table width="800" border="1" cellpadding="0" cellspacing="0" bordercolor="#c3c3c3" align="center" id='idTab3'>
  <tbody id="addTr2">
  <tr>
    <td colspan="3"><div align="center"><strong>行&nbsp;&nbsp;&nbsp;业</strong></div></td>
  </tr>
  <tr>
    <td>序号</td>
    <td>统计项名称</td>
    <td>操作</td>
  </tr>
  <tr>
    <td>1</td>
    <td><input type="text" id="atr" value="机械" width="200"/></td>
    <td onclick="getDel2(this)"><input type='button' value='删除'/></td>
  </tr>
</tbody>
  <tr>
    <td colspan="2">&nbsp;</td>
    <td><input id="getAtr2" type='button' value='新增' onclick="add2()"/></td>
  </tr>
  <tbody id="addTr3">
  <tr>
    <td colspan="3"><div align="center"><strong>注册方式</strong></div></td>
  </tr>
  <tr>
    <td>序号</td>
    <td>统计项名称</td>
    <td>操作</td>
  </tr>
  <tr>
    <td>1</td>
    <td><input type="text" id="atr" value="网页" width="200"/></td>
    <td onclick="getDel3(this)"><input type='button' value='删除'/></td>
  </tr>
  </tbody>
  <tr>
    <td colspan="2">&nbsp;</td>
    <td><input id="getAtr3" type='button' value='新增' onclick="add3()"/></td>
  </tr>
  <tbody id="addTr4">
  <tr>
    <td colspan="3"><div align="center"><strong>参观方式</strong></div></td>
  </tr>
  <tr>
    <td>序号</td>
    <td>统计项名称</td>
    <td>操作</td>
  </tr>
  <tr>
    <td>1</td>
    <td><input type="text" id="atr" value="个人" width="200"/></td>
    <td onclick="getDel4(this)"><input type='button' value='删除'/></td>
  </tr>
</tbody>
  <tr>
    <td height="17" colspan="2">&nbsp;</td>
    <td><input id="getAtr4" type='button' value='新增' onclick="add4()"/></td>
  </tr>
  <tbody id="addTr5">
  <tr>
    <td colspan="3"><div align="center"><strong>参观天数</strong></div></td>
  </tr>
  <tr>
    <td>序号</td>
    <td>统计项名称</td>
    <td>操作</td>
  </tr>
  <tr>
    <td>1</td>
    <td><input type="text" id="atr" value="2天" width="200"/></td>
    <td onclick="getDel5(this)"><input type='button' value='删除'/></td>
  </tr>
  </tbody>
  <tr>
    <td colspan="2">&nbsp;</td>
    <td><input id="getAtr5" type='button' value='新增' onclick="add5()"/></td>
  </tr>
  <tbody id="addTr6">
  <tr>
    <td colspan="3"><div align="center"><strong>参观目的</strong></div></td>
  </tr>
  <tr>
    <td>序号</td>
    <td>统计项名称</td>
    <td>操作</td>
  </tr>
  <tr>
    <td>1</td>
    <td><input type="text" id="atr" value="购买设备" width="200"/></td>
    <td onclick="getDel6(this)"><input type='button' value='删除'/></td>
  </tr>
  </tbody>
  <tr>
    <td colspan="2">&nbsp;</td>
    <td><input id="getAtr6" type='button' value='新增' onclick="add6()"/></td>
  </tr>
  <tr>
    <td colspan="3">&nbsp;
      <div align="center">
        <input type="button" id="tijiao" style="width:50px;" value='提交' onclick="tijiao()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" style="width:50px;" value='返回' onclick="fanhui()"> 
      
    </div></td> 
  </tr>
  </table>
  </div>
      </div> 
   </div>
  </td>
  </tr>
</table>
</body>
</html>

 

月下c独舞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
单纯用<th><td>写的表格，分页实现
xiaosongwahaha的博客
12-19 597
1、html：                                 角色             操作                                                     ${urlBean.urlType}无
html table 自动 换页,javascript实现Html Table数据表分页
weixin_30476025的博客
05-31 1218
直接调用：th{font-size:18px;}td{font-size:15px;}table{width:600px;text-align:center;}table tr th,td{height:30px;line-height:30px;border:1px solid #ccc;}#pageStyle{display:inline-block;width:32px;height:32p...
js修改隔行tr的颜色。
diqigou2000的博客
05-18 416
<!DOCTYPE html><html lang="zh-Hans"><head> <meta charset="UTF-8"> <title>Title</title></head><body><table> <tr> <td&...
table自动分页
借人之智，完善自己
07-19 849
table自动打印分页
ExtJS动态添加和删除tab标签实例
jazywoo_在路上
07-24 2663
ExtJS中的标签在网页中经常用到，它可以将已有的div布局成tab切换的形式，也可以全新生成tab切换布局。它在ExtJS中的全称是Ext.tab.Panel，xtype是tabpanel，功能比较丰富，如动态添加tab，动态删除tab等等。下面给出一个例子，包括生成tabpanel、点击按钮添加tab并激活tab、点击按钮删除激活状态的tab。 　　生成tabpanel： var
Javascript—table表格的设定,删除和新增功能
weixin_43310703的博客
03-29 542
table表格，html代码如下： 实现效果，如图： 一、建立数组对象，初始化数组信息 二、定义生成页面函数 — setTab 1）定义变量,赋值空字符串,作用是存储拼接生成的表格内容标签 2）循环遍历arr数组,根据数组内容,生成table表格内容 参数1,参数2 参数1:存储数值的数据,也就是对象 参数2,存储数据的索引,也就是对象对应的索引 ①拼接tr起始标签 ②拼接 序号单元格 , ...
git 创建tag标签和删除标签以及别名设置
叱咤少帅的博客
06-16 5511
Git有commit，为什么还要引入tag？ “请把上周一的那个版本打包发布，commit号是6a5819e...” “一串乱七八糟的数字不好找！” 如果换一个办法： “请把上周一的那个版本打包发布，版本号是v1.2” “好的，按照tag v1.2查找commit就行！” 所以，tag就是一个让人容易记住的有意义的名字，它跟某个commit绑在一起。 $ git checkout master $ git tag v1.0 #创建标签 $ git tag 默认标签是打在最新提交的com
vue tab标签页切换路由 导航标签页增删(类浏览器)
MELANCHOLY ❤ ◁ ❚❚ ▷
03-17 1265
一个需求： 左侧导航点击切换路由，同时增加标签页，标签页点击同跳转路由(可增删) 主页 <template> <div> <div class="main"> <el-container> <el-aside style="width: 216px"> <div class="left"> <el-menu :defa
Qt Designer如何管理（Tab新增，删除，重命名...）QTabWidget选项卡编辑器
小白tree的博客
04-11 6612
一、新增 右键其中一个标签，可以看到有“插入页”的选项 二、重命名 点击其中一个标签，查看右下方的属性编辑器，编辑属性currentTabText即可（不是currentTabName！） 三、删除 点击其中一个标签，将右上方对象查看器中的tabWidget控件先不展开，右键则有如图选项 参考： 《How to access QTabWidget tab editor in Qt Designer - when I double click object name dialog pops up》
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
10-21
主要介绍了基于HTML+CSS+JS实现增加删除修改tab导航特效代码的相关资料,非常不错，需要的朋友可以参考下
HtmlTab分页脚本
06-26
用prototype.js实现的Html网页中tab分页功能
html实现tab多窗口 可删除
06-26
基于brootrap跟jquery实现的tabsDamo，简单易理解，需要的同学可以下载参考下
JS对表格的动态增加删除行 （多个demo）
03-21
NULL 博文链接：https://liliugen.iteye.com/blog/935491
js实现table添加行tr、删除行tr、清空行tr的简单实例
11-30
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author...
利用js制作html table分页示例(js实现分页)
12-12
有时候table的列数太长，不利于使用者查询，所以利用JS做了一个table的分页，以下为相关代码 一、JS代码 代码如下:[removed] var pageSize = 15; //每页显示的记录条数 var curPage=0; //当前页 var lastPage;...
jQuery实现html table行Tr的复制、删除、计算功能
01-19
本文实例讲述了jQuery实现html table行Tr的复制、删除、计算功能。分享给大家供大家参考，具体如下： 添加行： function addtr(){ var tr = $(#tb tr).eq(0).clone(); tr.appendTo(#tb); //tr.insertBefore(#tb ...
Android中TabLayout+ViewPager实现tab和页面联动效果
08-30
本篇文章主要介绍了Android中TabLayout+ViewPager实现tab和页面联动效果，具有一定的参考价值，有兴趣的可以了解一下
HTML 入门
最新发布
lvshihao_的博客
04-16 998
全称：Internet Engineering Task Force（国际互联网工程任务组），成立于1985年底，是一个权威 的互联网技术标准化组织，主要负责互联网相关技术规范的研发和制定，当前绝大多数国际互联网技术标准均出自IETF。全称：World Wide Web Consortium（万维网联盟），创建于1994年，是目前Web技术领域，最具影响力的技术标准机构。超文本：暂且简单理解为 “超级的文本”，和普通文本比，内容更丰富。注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。
html2pdf,qrcode库及url参数拼接
m0_45093055的博客
04-16 424
html2pdf 是一个可以将 HTML 内容转换为 PDF 文件的库。它通常用于前端或服务器端，将网页或 HTML 字符串转换为可打印或可分享的 PDF 格式。这对于需要将网页内容保存为 PDF 或者生成报表等场景非常有用。text参数在qrcode库中不是直接表示页面路径，但你可以将页面路径（URL）作为文本内容传递给toDataURL函数来生成一个指向该页面的二维码。此篇文章主要是对html2pdf,qrcode库及url参数拼接的零散整理。
jquery实现点击tab,对应的html页面展示在index页面中
06-08
当点击tab时，我们使用jQuery的Ajax方法发送GET请求，获取对应的HTML页面内容，并将其展示在tab-content中。 需要注意的是，由于Ajax请求是异步的，所以在获取到HTML页面内容前，tab-content中会显示loading状态，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

月下c独舞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值