表格页面前端实现

最新推荐文章于 2022-07-15 15:48:45 发布
最新推荐文章于 2022-07-15 15:48:45 发布
阅读量627 收藏 4
点赞数
文章标签： html5 javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzsan_/article/details/123905939
版权
这个示例展示了如何使用HTML、CSS和JavaScript创建一个具备交互功能的表格，包括奇偶行颜色交替、鼠标悬停变色、行选择变色、增加、删除、修改行功能，以及全选和单选框操作。用户可以通过点击按钮动态添加新行，修改现有数据，并通过保存按钮保存修改。此外，表格还支持删除和修改特定行的操作。
摘要由CSDN通过智能技术生成

表格页面：

奇数行和偶数行颜色不同，鼠标移上去变色，点击选择也变色，点上面的增加按钮就增加一行，输入内容后，点击最右边的保存，点击删除可以删掉此行，点修改可以修改此行。，点击最上面的复选框，下面的全选。

index.html:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面设计</title>
    <link rel="stylesheet" href="css/index.css"/>
    <script src="js/index.js"></script>
</head>
<body onload=setBgC();>
    <div id="a">  
         <div id="h">
         <input type="text" style="width: 110px;" placeholder="输入用户名"/>
         <input type="text" style="width: 110px;" placeholder="输入姓名"/>
         <input type="text" style="width: 110px;" placeholder="输入邮箱地址">
         <input type="text" style="width: 110px;" placeholder="输入省份"/>
         <button id="cz"><img src="img/cz.png"/>查找</button> 
         <button id="qk"><img src="img/qk.png"/>清空</button> 
         <button id="zj" onclick="insert_row();"><img src="img/zj.png"/>增加</button> 
         <button id="sc"><img src="img/sc.png"/>删除</button> 
         <button id="xg"><img src="img/xg.png"/>修改</button> 
        </div>
    <div>
        <table id="tb" cellspacing="0">
            <thead>
                <tr>
                    <td><input type="checkbox" id="allcheck" onclick="checkAll()"></td>
                    <td>用户名</td>
                    <td>中文名</td>
                    <td>邮箱</td>
                    <td>省份</td>
                    <td>城市</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody> 
                <tr id="r">
                    <td><input name="choose" type="checkbox"/></td>
                    <td>admin</td>
                    <td>管理员</td>
                    <td>ng@abc.com</td>
                    <td>上海</td>
                    <td>宝山</td>
                    <td><input type="button" value="删除"  onclick="delete_row('r');"/>
                        <input type="button" value="修改"  onclick="update_row('r');"/>     
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        每页
        <select>
            <option>5</option>
            <option>10</option>
        </select>
        ，共20条数据，1页/2页
        <span>尾页&nbsp;</span>
        <span>下一页&nbsp;</span>
        <span>上一页&nbsp;</span>
        <span>首页&nbsp;</span>
    </div>
</div>
  
</body>
</html>

index.css:

#a{
    background-color:rgb(186, 201, 228);
    width:850px;
    height:700px;
    margin:0 auto;
}
#h{
    margin: 20px auto;
    width:830px;
}
span{
    float:right;
}
#cz{
    background-color: blue;
    color:white;
    border:none;
    height: 25px;
    line-height: 25px;

}
#qk{
    background-color: red;
    color:white;
    border:none;
    height: 25px;
    line-height: 25px;

}
#zj{
    background-color: green;
    color:white;
    border:none;
    height: 25px;

    line-height: 25px;

}
#sc{
    background-color: rgb(206, 206, 127);
    color:white;
    border:none;
    height: 25px;
    line-height: 25px;

}
#xg{
    background-color: rgb(82, 150, 214);
    color:white;
    border:none;
    height: 25px;
    line-height: 25px;

}
#tb {
    margin:20px auto;
    width: 830px;
    border: 1px solid black;
}

#tb thead {
    font-weight: bold;
    background-color: cornflowerblue;
}

#tb tr {
    text-align: center;
    line-height: 30px;
}

#tb td {
    border: 1px solid rgb(13, 13, 14);
}

.bg1 {
    background-color: aliceblue;
}

.bg2 {
    background-color: rgb(149, 149, 160);
}

.bg3 {
    background-color: rgb(204, 221, 165);
}

.bg4 {
    background-color: rgb(146, 133, 151);
}
table tbody button{
    border:none;
    color:blueviolet;
}

index.js: 

 

function setBgC() {
    setoddEvenBgC();
    var trs = document.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
    for (var index = 0; index < trs.length; index++) {

        //对每个tr绑定事件,动态绑定事件
        trs[index].onmouseover = function() {
            this.className = "bg3";
        }
        trs[index].onmouseout = function() {
            setoddEvenBgC();
        }
        var cb = trs[index].getElementsByTagName("input")[0];
        cb.onclick = function() {
            if (this.checked) { //被选中，设置当前行class为bg4
                var tr = this.parentNode.parentNode;
                tr.className = "bg4";
            }
        }
    }
    setoddEvenBgC();
}

function setoddEvenBgC() {
    var trs = document.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
    for (var index = 0; index < trs.length; index++) {
      if ((index + 1) % 2 == 0) {
           trs[index].className = "bg2"; //偶数行
      } else {
              trs[index].className = "bg1"; //奇数行
         
       }
    }
}

function checkAll() {
    var checkAllEle = document.getElementById("allcheck");
    var checkones = document.getElementsByName("choose");
    if (checkAllEle.checked) {
        for (var i = 0; i < checkones.length; i++) {
            checkones[i].checked = true;
        }
    } else {
        for (var i = 0; i < checkones.length; i++) {
            checkones[i].checked = false;
        }
    }
}

//点击删除，删除当前行
function delete_row(r){
    var row=document.getElementById(r).rowIndex; 
    document.getElementById("tb").deleteRow(row);
    setBgC() ;
}
//添加行
function insert_row(){
        var addTable=document.getElementById("tb");
        var row_index=addTable.rows.length;       //新插入行在表格中的位置
        var newRow=addTable.insertRow(row_index);  //插入新行
        newRow.id="row"+row_index;                 //设置新插入行的ID
        var col0=newRow.insertCell(0);
        col0.innerHTML="<input type='checkbox' name='choose' />";
        var col1=newRow.insertCell(1);
        col1.innerHTML="<input type='text' style='width:40px;' value='' />"; 
        var col2=newRow.insertCell(2);
        col2.innerHTML="<input type='text' style='width:40px;' value=''/>"; 
        var col3=newRow.insertCell(3);
        col3.innerHTML="<input type='text' style='width:40px;' value=''/>"; 
        var col4=newRow.insertCell(4);
        col4.innerHTML="<input type='text' style='width:40px;' value='' />"; 
        var col5=newRow.insertCell(5);
        col5.innerHTML="<input type='text' style='width:40px;' value='' />"; 
        var col6=newRow.insertCell(6);
        col6.innerHTML="<input type='button' value='删除' onclick=\"delete_row('row"+row_index+ "')\" />&nbsp;<input type='button' name='del' value='保存' onclick=\"up('row"+row_index+ "')\" />";         
        setBgC();
}
//修改行
function update_row(r){
    var row=document.getElementById(r).rowIndex;
    var c=document.getElementById(r).cells;//获得某一行所有单元格的集合
    var t1=c[1].innerHTML;
    c[1].innerHTML="<input name='ad' style='width:40px;' type='text' value='"+t1+"' />";
    var t2=c[2].innerHTML;
    c[2].innerHTML="<input name='ad' style='width:40px;' type='text' value='"+t2+"' />";
    var t3=c[3].innerHTML;
    c[3].innerHTML="<input name='ad' style='width:40px;' type='text' value='"+t3+"' />";
    var t4=c[4].innerHTML;
    c[4].innerHTML="<input name='ad' style='width:40px;' type='text' value='"+t4+"' />";
    var t5=c[5].innerHTML;
    c[5].innerHTML="<input name='ad' style='width:40px;' type='text' value='"+t5+"' />";
    c[6].lastChild.value="保存"; 

    c[6].lastChild.setAttribute("onclick","up('"+r+ "')");
    }
  function up(r){
    var row=document.getElementById(r).rowIndex;   //修改行所在表格中的位置
    var c=document.getElementById(r).cells;
    var t1=c[1].firstChild.value;
    c[1].innerHTML=t1;
    var t2=c[2].firstChild.value;
    c[2].innerHTML=t2;
    var t3=c[3].firstChild.value;
    c[3].innerHTML=t3;
    var t4=c[4].firstChild.value;
    c[4].innerHTML=t4;
    var t5=c[5].firstChild.value;
    c[5].innerHTML=t5;
    c[6].lastChild.value="修改";
    c[6].lastChild.setAttribute("onclick","update_row('"+r+ "')");
    }

lzsan_
关注
纯前端实现—表格的行添加和删除
孤寒者的博客
11-13 2万+
实现效果： 源码：   ????????可通过点击下面——>关注本人运营公众号???????? 【可以公众号里私聊并标明来自CSDN，会拉你进入技术交流群（群内涉及各个领域大佬级人物，任何问题都可讨论~）--->互相学习&&共同进步（非诚勿扰）】 ...
前端表单页面
最新发布
qq_48187100的博客
11-28 340
表单页面，前端开发可能遇到的表单页面，需要的直接取就行，也作为个人的学习笔记吧。在选择性别或者其他单选或多选时，直接点击“字”也可以实现选中功能，提高用户使用感受
有关表格的前端页面
qq_29720781的博客
01-16 1589
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="/views/resource.jsp"%> <style type="text/css"> td .form-control{ border: none;
web前端开发基础——在网页中使用表格
热门推荐
陈沫尘的博客
10-19 1万+
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、如何插入表格1.关于表格1.二、使用步骤1.引入库2.读入数据总结 前言 本篇主要解释了如何在web中建立表格设置表格的大小，单元格宽高、背景色以及表格内字体的大小 提示：以下是本篇文章正文内容，下面案例可供参考 一、如何插入表格 由于关于web网页制作的软件多种多样
前端表格
sinat_33698753的博客
03-21 1523
知识储备 一丶表格 ①.表格由标签来定义，每个表格都由若干行（都由标签来定义的），每行被分割为若干单元格，由标签来定义。     表示table data表格数据，即数据单元格的内容。数据单元格包括文本，图片，列表，段落，表单，水平线，表格等等。
前端-表格
无情歌神的博客
06-15 653
1.表格基础 （1）<table></table>:HTML中的一个表格 ①border属性：设置表格的边框，默认为0px，以数字为单位 ②width属性：设置表格的宽度，以数字为单位 ③height属性：设置表格的高度，以数字为单位 ④align属性：设置表格的对齐方式（left right center） （2）<tr></tr>:表示表格中...
excel复制数据，粘贴到页面表格插件.zip
07-08
本项目提供的"前端实现excel复制数据，粘贴到页面表格工具.zip"就是一个解决此类问题的实例。下面将详细介绍这个项目及其相关知识点。 首先，项目中包含三个文件：test.html、jquery.min.js和tableCJ。`test.html`...
html前端动态获取后端数据显示到表格，实现分页显示
04-14
html前端获取后端js的数据，实现到html表格，并且实现表格分页显示，分页显示原理是要显示那一页数据就从后端获取需要显示页的数据，不会一次性获取全部数据，减小流前端的压力。后端使用js+express，读取csv文件...
VUE页面中通过双击实现复制表格中内容的示例代码
10-15
在本文中，将详细介绍如何在Vue页面中通过双击操作实现复制表格内单元格内容的功能。这里涉及的主要知识点包括Vue.js的基本使用、双击事件的绑定以及如何实现内容的复制功能。 首先，Vue.js是一个构建用户界面的渐...
jQuery实现的表格前端排序功能示例
10-19
在这个由OCR扫描生成的文档内容中，我们看到了如何使用jQuery来实现表格前端的排序功能。文档首先介绍了这一功能，并指出该功能涉及到了使用jQuery对表格元素进行获取、遍历以及事件响应的操作技巧。 文档中描述的...
tableExport.js实现前端表格的导出功能(支持中文)及打印
11-17
该插件可以将Html的表格导出成为 JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG，PDF格式。在项目上遇到pdf导出中文乱码问题，经过一天的研究修改了一些js代码解决了pdf导出中文乱码问题，随便融入了一个html打印功能的js，有需要的可以下载来看看。
js实现漂亮的table表格
07-27
利用js技术和css技术实现比较好看使用的table表格，方便用来制作前端页面表格，可供参考学习或直接使用。
原生JS前端框架SYSUI后台管理系统页面基本事例级文档详细配置说明+多种插件
01-21
使用原生JS代码开发一个前端框架，框架名称SYSUI，纯原生js开发，不使用任何第三方库。SYSUI本身支持网站模板界面编辑开发，也支持配置后台系统界面，是个多用途的框架。 使用SYSUI开发一个后台管理系统界面，支持左侧菜单，右侧内容的界面模式，以及仿桌面的形式的页面，包含一个基本的后台操作页面。界面通过js配置实现效果展示。内涵文档说明手册，及其其他插件，同样使用原生js开发，各种事例说明。 1.丰富的文档说明 2.各种插件说明。3.配置简单，多用途，支持网站编辑开发。4.开发图表功能模块。基本满足网站的需求。5.支持移动端模式开发
前端页面表格解析
yunduanaoligei的博客
09-15 205
这篇文章关键介绍了前端页面表格解析,包含表格的功效合理布局及格式难题，文中根据案例编码给大伙儿介绍的特别详尽，对我们的学习培训或工作中具备一定的参考借鉴使用价值，有需要的小伙伴们跟我开冲 作用：数据的展示，表格应用场景. 表格 行 单元格 前端页面表格解析_html 格式： <table> 　　<caption>...</caption><!-表格标题，居中显示--> 　　<tr> 　　　　<th>...</th&gt
前端之HTML 表格
weixin_46372074的博客
02-18 1491
前端之HTML 表格HTML 表格创建表格三级目录 HTML 表格 HTML 表格是由行和列（表格数据）组成的结构化数据集，在 Web 上显示不同类型数据之间某种联系的信息表。如：活动安排表（课程表），数据统计表（人及其年龄）等。 不要使用table进行页面布局： 表格不是布局的正确工具。 创建表格 在html正文中加上<table>表格内容</table>； 表格单元格（表格最小的容器）：<td>表格数据table data </td>; 表格行（内置单元
JavaScript 实现前端table页面，vue.js实现前端表格
acoolgiser的博客
12-12 4150
效果图： 代码： &lt;template&gt; &lt;table class="table table-striped table-bordered"&gt; &lt;tr&gt; &lt;td class="column"&gt;工程部位&lt;/td&gt; &lt;td colspan="3" clas
前端实现动态生成表格，是蒸的C
阿牛的博客
03-13 3899
动态生成表格是前端开发中非常重要的内容，常常是后端返回数据（大多是json类型），我们前端通过js循环来动态添加，所以这部分内容是十分重要的，今天我就来写写这部分内容，其实也很简单的，仔细看哦！！！...
（转载）前端表格制作教程
人人为我，我为人人
05-17 3324
分享一篇最近学习总结的前端表格制作教程，先看下方截图，具体演示的功能虽然简单，不过很有实际意义，主要涵盖表格展示数据、删除数据、修改数据、分页、模态窗等常见功能，其中也涉及一些样式的调整，比如隔行变色，此类文章网上很多很多，我也看过不少，但是网上文章都存着一个问题：很多文章代码写的很笼统，跳跃性比较大，你可能哪怕有一个地方看不懂，不知道怎么修改，程序就运行不起来，得不到想要的表格效果和功能，而此篇...
html 表格表单
m4587的博客
07-15 1212
inputtype="checkbox"name="hobby"value="zq"/>足球篮球羽毛球。乒乓球。
前端登陆页面的HTML实现与展示
JavaScript是一种用于网页交互的脚本语言，它可以增强前端页面的功能，例如处理表单验证、动态更新页面内容或实现动画效果。然而，描述中未提及JavaScript，可能意味着该登陆页面非常基础，仅使用HTML构建。 最后，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值