js table学习笔记

已于 2022-05-20 16:07:19 修改
阅读量6.1k 收藏 12
点赞数 1
文章标签： javascript 学习 css
于 2020-05-25 09:53:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43871650/article/details/106315806
版权

文章目录

一、table

在这里插入图片描述

	<table border="1" cellspacing="0" cellpadding="50">
	<tr><th>header</th></tr>
	<tr><td>Data</td></tr>
	</table>

table 编写格式

<table class = "table1">
	<thead>
			<tr >
				<td></td>
			</tr>
	</thead>
	//thead或者直接使用<th></th>标签
	/*			
		<tr >
			<th></th>
		</tr>
	*/
	
	<tbody>
			<tr >
				<td></td>
			</tr>
			<tr >
				<td></td>
			</tr>
	</tbody>
</table>

<table>
	<thead>
			<tr >
				<th>商品名称</th>
				<th>数量</th>
				<th>价格</th>
				<th>操作</th>
			</tr>
	</thead>
	
	<tbody>
			<tr >
				<td>商品名称2</td>
				<td>数量</td>
				<td>价格</td>
				<td>操作</td>
			</tr>
			<tr >
				<td>商品名称3</td>
				<td>数量</td>
				<td>价格</td>
				<td>操作</td>
			</tr>
			<tr >
				<td>商品名称4</td>
				<td>数量</td>
				<td>价格</td>
				<td>操作</td>
			</tr>
	</tbody>
</table>

table 的css 样式

1.border

表格边框：table border

例子：
在这里插入图片描述
在这里插入图片描述

列边框：td boader

在这里插入图片描述

表头边框：th border

在这里插入图片描述

collapse 折叠 去表格项之间的空白

在这里插入图片描述

bordr总结：

在这里插入图片描述
在这里插入图片描述

table{
	border: 1px solid #000;
	border-collapse: collapse;
}
table tr td{
	border: 1px solid #000;
}
table tr th{
	border: 1px solid #000;
}

2.padding 内边距

在这里插入图片描述

3. 表格字体居中 text-align: center;

在这里插入图片描述
在这里插入图片描述

4. 表格居中 margin: auto;

在这里插入图片描述

5. 列扩展 colspan

在这里插入图片描述

table 的作业（实现订单界面）

使用DOM完成订单的添加、修改及删除操作。初始界面如图6-23所示:每增加一行后，界面如图6-24所示:单击“修改”按钮时，数量改为文本框显示，可以改变数量，并且“修改”按钮变为“确定”按钮，如图6-25 所示:单击“确定”按钮后，修改数量成功，并且数量显示在当前的单元格中，“确定"按钮变为“修改”按钮，如图6-26所示;“删除”订单后，界面如图6-27所示。
在这里插入图片描述
在这里插入图片描述

1. 表格界面的制作

.html:

<body>
<p align="center">
商品名称：<input  type = "text" id="name" onkeyup="value=value.replace(/[\d]/g,'')">&emsp;<!--限制只能输入中文和英文-->
数量：<input  type = "text" id="number" onkeyup="this.value=this.value.replace(/\D/g,'')">&emsp;<!--限制只能输入数字-->
价格：<input  type = "text" id="price" onkeyup="if(isNaN(value))execCommand('undo')">&emsp;<!--限制只能输入数字及小数点-->
</p>


	<table  id="table_order">
		<thead>
			<tr>
			<th>商品名称</th>
			<th>数量</th>
			<th>价格</th>
			<th>操作</th>
			</tr>
		</thead>

		<tbody>
			<tr >
				<td>防滑真皮休闲鞋</td>
				<td>32</td>
				<td>&yen;568.50</td>
				<td>
					<button class="btn_delete">删除</button>
					<button class="btn_edit">修改</button> 
				</td>
			</tr>
			<tr >
				<td>抗疲劳神奇钛项圈</td>
				<td>2</td>
				<td>&yen;1.00 </td>
				<td>
					<button class="btn_delete">删除</button>
					<button class="btn_edit">修改</button> 
				</td>
			</tr>
		</tbody>

			<tr>
				<td colspan="4" ><button id="btn_add">增加订单</button> </td>
			</tr>
	</table>
</body>

.css:

table{
	border: 1px solid #000;
	border-collapse: collapse;
	text-align: center;
	margin: auto;
	width: 500px;//固定表的宽度
}
table tr td{
	border: 1px solid #000;
	padding: 10px;//内边距四周空出10像素
}
table tr th{
	border: 1px solid #000;
	background-color: #cccccc;
}

效果图：
在这里插入图片描述

某风吾起
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript学习笔记.docx
09-13
目录 javascript 1 基本语法 1 动态函数 2 封装一个数组类 2 函数使用时注意事项 2 with语句 4 for，in 4 DOM 5 window 6 table 9 input 16 select 17 form 19 Ajax 22 接收文本数据 22 接收xml数据 23 接收json数据 24 多级菜单 25 用json实时更新 27 jQuery 30 小知识 3
jQuery学习笔记(4)–Jquery中获取table中某列值的具体思路
12-10
花了一晚上的时间解决了一个看似很容易的问题。今晚做的这个东西中由于要获取某列中的一个ID值。如果是用平常的那种JS传值的方式此问题就不存在，但是由于此次用到的都是jquery插件，包括各种弹出框，用JS传值就得用JS那丑陋的弹出框，所以，你懂得。 网上找了很多方法，用起来都不行，后来想到了jquery中的鼠标事件，可以在鼠标经过table时，获得当前行与列的值。页面如下所示：  具体操作就是点击“删除”按钮，然后调用jquery插件页面，这时候需要获得相应行的“ID”进行操作。我的方法是： 先定义一个行数与列数的全局变量，然后在鼠标经过按钮时获得此行的行数与列数并付给此全局变量： 代码如下:
DWR util.js学习笔记.doc
09-19
技术分享：DWR 处理各种form表单Selectoption,table等,List,Bean
js实现漂亮的table表格
07-26
利用js技术和css技术实现比较好看使用的table表格，方便用来制作前端页面表格，可供参考学习或直接使用。
Vue.js第四天学习笔记
11-27
分享一段将json数组数据以csv格式导出的代码: html: <button class=”btn btn-danger” @click=’exportData’>导出</button> js: // 导出数据 exportData: function() { let tableHeader = [{ colname: 'type', coltext: '类型', }, { colname: 'name', coltext: '商品名称', }, { colname: 'number', coltext: '数量',
JS 对table的一些操作
光羽住一
04-20 7806
1.遍历整个table function showtable(tableId) { //获取table序号 var tab = document.getElementById(tableId); //获取行数 var rows = tab.rows; //遍历行 for(var i=1;i<rows.length;i...
原生js-自定义组件table
qq_42832151的博客
03-30 1248
columns中的render函数方法，可对当前数据进行处理后显示，也可设置为数据操作（编辑、查看、删除）；columns与dataSource中的数据相对应，没有对应数据的地方显示为空；columns表格列内容设置，数组格式：(参数说明如下)是否隐藏(true:是，false:否)true/false是否全选。table表格列内容设置。// 渲染table。
js——table常用操作
a805814077的博客
12-31 1331
js中table常用操作的模板
js前端，一个漂亮的自写表格table
hwlll的博客
05-10 2362
将th的 position设置为sticky，固定首行，也就是top=0，为其设置为一个区分的颜色。由于上面的滚动效果不好，看起来很卡顿，下面优化了滚动效果，加入缓动。然后利用timer定时器和scrollTop 属性设置滚动效果，table里的数据在data里返回，以下是实例数据。这样我们就拥有了一个没有样式的基础表格。
JavaScript 动态表格操作
wgchen
04-13 4954
阅读目录JavaScript 动态创建表格第一种示例第二种示例示例解析表格相关的属性和方法1.1 Table 对象集合1.2 Table 对象方法1.3 Table 对象常用属性1.4 TableRow 对象TableRow 对象方法TableRow 对象属性1.5 TableCell 对象TableCell 对象属性JavaScript 实现点击显示和隐藏表格技术解答JavaScript 实现动态克隆一个表格技术解答JavaScript 实现动态点击改变单元格颜色技术解答 JavaScript 动态创建表
第一次记录Bootstrap table学习笔记（1）
01-19
第一次使用Bootstrap-table这个表格插件，记录一下使用过程中遇到的问题。 |引入CSS文件 <link rel=stylesheet href=bootstrap.min.css> <link rel=stylesheet href=bootstrap-table.css> |引入相关库 我们需要引入Jquery库、bootstrap库、以及bootstrap-table.js文件 [removed][removed] [removed][removed] <script sr
Javascript——原生写table表格
最新发布
weixin_43551242的博客
10-17 563
【代码】Javascript——原生写table表格。
原生html+js动态给table赋值+每60s刷新table
weixin_43820434的博客
04-13 4328
1.引入 <!-- 引入组件库 --> <script type="text/javascript" src="http://114.55.237.251/js/jquery.js"></script> <script src="http://114.55.237.251/js/jquery.min.js"></script> 2.html中写table标签，重点是给标签赋予id <table id="dem
[js] 动态删除，新增，修改 table表格数据
qq_14993591的博客
09-13 8059
<table> <thead> <tr> <td>序号</td> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>城市</td..
JS代码实现table表格的增删改操作
qq_45746493的博客
12-13 2155
删除 通过点击按钮实现删除操作，使用remove来删除整行数据。 function deleRow(a){ //通过传参获取他的父级元素tr var tr = a.parentNode.parentNode; //通过remove来进行删除 tr.remove(); } 修改 首先通过cells获取到单元格的一个数组，将单元格每一个值赋值input中的value，可以在input元素中进行修改，修改之后再将每一个value赋值给td中，让它实现在table表格中
js操作html的table,包括添加行，添加列，删除行，删除列，合并单元格（未实现）...
lifeneedyou的专栏
04-29 326
       记得以前面试的时候遇到过这样一个问题：有一个表格，然后有４个输入框，一个合并 按钮，输入框是这样的，从第几行到第几行，从第几列到第几列，然后点击按钮，合并 。当时我从学校出来，js知识只是知道一些，根本做不到！现在想想，其实这个问题也还是考基础功夫是否扎实！大家有兴趣可以自己做做看，测下自己是不是能够做出来。题目的截图：   第1/1列 第1/2列 第1/3列 第1...
js 操作 table
weibingbing_net的专栏
07-27 944
jsp页面表格布局 Html代码  body onload="show()">      center>         input type="text" value="111" id="mytext">         table border="1" width="60%" id="mytable">             tr>         
js对table的操作
SqlloveSyn的博客
02-06 227
主要功能是实现，table里删除一行序号不变，table内容写死，不是。
js操作table的各种用法
热门推荐
u010045996的专栏
07-14 1万+
最近用做的公司内部管理系统的工时管理，需求是要在table中随意添加、删除工作项，前台全部用js控制table ,所以用到了table中常用 的集中方法。(1)得到table 中tbody 的内容 ：$('#simple-table').find('tbody').html();(2)点击td时，获取点击的行号：                        $('#simple-table tb...
postgresql学习笔记
04-28
好的，我可以和你分享一些关于 PostgreSQL 的学习笔记。 1. PostgreSQL 是什么？ PostgreSQL 是一种开源的关系型数据库管理系统，它支持 SQL 语言和 ACID 事务处理，并且具有丰富的特性和扩展性，可用于大型企业应用、Web 应用和嵌入式应用。 2. PostgreSQL 的特点 PostgreSQL 具有以下特点： - 开源免费 - 支持 ACID 事务处理 - 支持 SQL 语言 - 支持复杂查询和数据类型 - 支持存储过程和触发器 - 可以扩展和定制 - 可以跨平台运行 3. PostgreSQL 的安装 在 Windows 平台下，可以从官网下载 Windows 安装程序进行安装。在 Linux 平台下，可以使用包管理器安装，例如 Ubuntu 可以使用以下命令进行安装： ``` sudo apt-get install postgresql ``` 4. PostgreSQL 的基本操作 创建数据库： ``` CREATE DATABASE databasename; ``` 创建表： ``` CREATE TABLE tablename ( column1 datatype, column2 datatype, column3 datatype, .... ); ``` 插入数据： ``` INSERT INTO tablename (column1, column2, column3, ...) VALUES (value1, value2, value3, ...); ``` 查询数据： ``` SELECT column1, column2, ... FROM tablename WHERE condition; ``` 更新数据： ``` UPDATE tablename SET column1 = value1, column2 = value2, ... WHERE condition; ``` 删除数据： ``` DELETE FROM tablename WHERE condition; ``` 5. PostgreSQL 的扩展 PostgreSQL 可以通过扩展来增强其功能，例如： - PostGIS：空间数据处理扩展 - PL/Python：Python 语言扩展 - pgAdmin：可视化管理工具 - pgpool-II：连接池和负载均衡工具 以上就是一些关于 PostgreSQL 的基本学习笔记，希望对你有所帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值