精华内容
下载资源
问答
  • tr标签
    2021-09-28 15:39:16
    <tr style="display:none;" id="hintTr"></tr>

    隐藏:<tr style="display:none;" id="hintTr">

     显示:

    $("#hintTr").attr("style","display:table-row;");

    这样的话就不会错位

    更多相关内容
  • tr标签属性 表格 学习<tr>的属性时需要注意以下几点: <tr>标签无宽度属性width,其宽度取决于表格标签。 虽然可以对<tr>标签应用background属性,但是在<tr>标签中此属性兼容问题严重。 对<tr>标签应用valign属性,...
  • 隐藏与显示tr标签的方法有很多,本文使用jquery来实现,需要的朋友可以参考下
  • 主要介绍了使用delegate方法为一个tr标签加一个链接,并规定当这些事件发生时运行的函数,需要的朋友可以参考下
  • html中table标签、tr标签、th标签、td标签的基础知识

    千次阅读 多人点赞 2021-01-27 16:32:34
    html表格标签——表格的基本结构表格的结构表格的基本标签表格标签的基本属性table标签的基本属性tr标签的基本属性th和td标签的基本属性 表格的结构 在基本表格结构中,表格标题、项目表头和数据资料构成了表格基本...

    表格的结构

    在基本表格结构中,表格标题项目表头数据资料构成了表格基本结构三个要素。
    例如下图所示的表格中,表格标题为“通讯录”,表格第一行单元格中的内容基本不变,称作项目表头,表格第二行后单元格的内容通常会动态改变,称作数据资料。
    基本表格
    通讯录
    源代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>通讯录</title>
    </head>
    
    <body>
    	<table border="2">
    		<caption align="center">通讯录</caption>
    		<tr>
    			<th>姓名</th>
    			<th>QQ</th>
    			<th>联系电话</th>
    	    </tr>
    		<tr>
    			<td>张三</td>
    			<td>123456789</td>
    		    <td>123456789</td>
    	    </tr>
    	</table>
    </body>
    </html>
    

    表格的基本标签

    HTML表格由table标签以及一个或多个tr、th或td标签组成:

    • table标签:定义一个表格
    • caption标签:定义表格标题,嵌套在<table></table>
    • tr标签:定义表格中的一行,嵌套在<table></table>
    • th标签:定义表格中的表头单元格,嵌套在<tr></tr>
    • td标签:定义表格中的数据单元格,嵌套在<tr></tr>

    表格标签的基本属性

    table标签的基本属性

    table标签的基本属性如下图所示:

    属性名含义常用属性值
    border设置表格的边框(默认border=“0”)像素值
    cellspacing设置单元格与单元格边框之间的空白间距像素值(默认为2像素)
    cellpadding设置单元格内容与单元格边框之间的空白间距像素值(默认为1像素)
    width设置表格的宽度像素值
    height设置表格的宽度像素值
    align设置表格在网页中的水平对齐方式left、center、right
    bgcolor设置表格的背景颜色预定义的颜色值、十六进制#RGB、rgb(r,g,b)
    background设置表格的背景图像url地址

    在这里插入图片描述

    tr标签的基本属性

    tr标签的基本属性如下图所示:

    属性名含义常用属性值
    height设置行高度像素值
    align设置一行内容的水平对齐方式left、center、right
    valign设置一行内容的垂直对齐方式top、middle、bottom
    bgcolor设置行背景颜色预定义的颜色值、十六进制#RGB、rgb(r,g,b)
    background设置行背景图像url地址

    th和td标签的基本属性

    th和td标签的基本属性如下图所示:

    属性名含义常用属性值
    width设置单元格的宽度像素值
    height设置单元格的高度像素值
    align设置单元格内容的水平对齐方式left、center、right
    valign设置单元格内容的垂直对齐方式top、middle、bottom
    bgcolor设置单元格的背景颜色预定义的颜色值、十六进制#RGB、rgb(r,g,b)
    background设置单元格的背景图像url地址

    表格高级样式设置相关概念

    外边框线样式属性frame

    表格的外边框线的样式可用属性frame的取值来确定,frame取值与相应的样式如下:

    • above:显示上边框
    • below:显示下边框
    • hsides:显示上下边框
    • vsides:显示左右边框
    • lhs:显示左边框
    • rhs:显示右边框
    • border:显示上下左右边框
    • void:不显示边框

    内部边框样式属性rules

    表格的内部边框的样式可用属性rules的取值来确定,rules取值与相应的样式如下:

    • all:显示所有内部边框
    • none:不显示内部边框
    • rows:仅显示行边框
    • cols:仅显示列边框
    • groups:显示介于行组和列组间边框

    单元格合并

    在制作稍复杂的表格时,需要对表格中的行或列进行合并。

    水平方向单元格的合并

    需要将水平方向的单元格合并时,可在或标记中添加colspan属性,属性的取值即为合并的单元格数目。

    垂直方向单元格的合并

    需要将垂直方向的单元格合并时,可在或标记中添加rowspan属性,属性的取值即为合并的单元格数目。

    相关概念选择题及参考答案

    选择题

    1、定义表格的项目表头的HTML标签是( )。

    A、
    <table>

    B、
    <tr>

    C、
    <td>

    D、
    <th>

    2、下列选项中,用于设置表格背景颜色的属性是( )。

    A、
    background

    B、
    bgcolor

    C、
    bordercolor

    D、
    backgroundcolor

    3、要使表格的行高为18px,以下方法中,正确的是( )

    A、
    <table height="18px">...</table>

    B、
    <th height="18px">...</th>

    C、
    <tr height="18px">...</tr>

    D、
    <td height="18px">...</td>

    4、下列选项中,用于设置表格标题的标签是( )

    A、
    <title>...</title>

    B、
    <h1>...</h1>

    C、
    <tags>...</tags>

    D、
    <caption>...</caption>

    5、下列设置单元格中文本对齐方式的选项中,正确的是( )

    A、
    <th align="center" valign="center">...</th>

    B、
    <th align="center" valign="middle">...</th>

    C、
    <th align="middle" valign="center">...</th>

    D、
    <th align="middle" valign="middle">...</th>

    6、下列选项中,用于设置表格内部边框线显示的属性是( )。

    A、
    border

    B、
    frame

    C、
    rules

    D、
    innerborder

    7、如果希望表格的外部边框只显示上下两条边框线,属性frame的取值应选( )。

    A、
    hsides

    B、
    vsides

    C、
    lhs

    D、
    rhs

    8、如果希望表格的内部边框只显示行线,则属性rules的取值应选( )。

    A、
    line

    B、
    rows

    C、
    cols

    D、
    groups

    9、HTML中,若合并两个水平方向单元格,应使用的属性是( )。

    A、
    colspan

    B、
    nospan

    C、
    rowspan

    D、
    colwrap

    10、<table rules=cols>,表示( )

    A、
    显示所有分隔线

    B、
    只显示组(Groups)与组之间的分隔线

    C、
    只显示行与行之间的分隔线

    D、
    只显示列与列之间的分隔线

    参考答案

    1、D
    2、B
    3、C
    4、D
    5、B
    6、C
    7、A
    8、B
    9、A
    10、D

    展开全文
  • 开发项目遇到的一个需求: 有个 table 表单,其中有一行的要填的数据不确定,可能是很多. 提交的时候为了方便处理数据, 后台要求拼成以逗号 ...动态生成tr标签</title> </head> <body> <tabl

    开发项目遇到的一个需求:
    有个 table 表单,其中有一行的要填的数据不确定,可能是很多. 提交的时候为了方便处理数据, 后台要求拼成以逗号 分割字符串,传送给后台存储.方便回显的时候处理.
    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>动态生成tr标签</title>
    	</head>
    	<body>
    
    		<table border="1" id="add-table">
    			<tr>
    				<th>项目一</th>
    				<th>项目二</th>
    				<th>项目三</th>
    				<th>操作</th>
    			</tr>
    			<tr class="item-tr">
    				<td class="item-1">1</td>
    				<td class="item-2">2</td>
    				<td class="item-3">3</td>
    				<td>
    					<button class="add_tr" type="button">添加</button>
    					<button class="remove_tr" type="button">删除</button>
    				</td>
    			</tr>
    		</table>
    		<br>-----------提交按钮------------
    		<button type="button" onclick="submitTable()">提交按钮</button>
    		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    		<script type="text/javascript">
    			// ${Math.floor(Math.random() * (50 - 1 + 1) + 1)}    生成1-50内的随机整数
    			// 绑定添加事件
    			$('#add-table').on('click', '.add_tr', function() {
    				$(this).parents('tr').after(
    					`<tr class="item-tr">
    				<td class="item-1">${Math.floor(Math.random() * (50 - 1 + 1) + 1)}</td>
    				<td class="item-2" >${Math.floor(Math.random() * (50 - 1 + 1) + 1)}</td>
    				<td class="item-3" >${Math.floor(Math.random() * (50 - 1 + 1) + 1)}</td>
    				<td>
    					<button class="add_tr" type="button">添加</button>
    					<button class="remove_tr" type="button">删除</button>
    				</td>
    			</tr>`
    				);
    			})
    			// 绑定移除事件
    			$('#add-table').on('click', '.remove_tr', function() {
    				$(this).parents('tr').remove();
    			})
    			// 提交事件
    			function submitTable() {
    				// 1:获取所有 class="item-tr" tr  对于length 进行循环
    				var item1 = '';
    				var item2 = '';
    				var item3 = '';
    				$("#add-table .item-tr").each(function() {
    					console.log($(this));
    					item1 += $(this).find('.item-1').text() + ',';
    					item2 += $(this).find('.item-2').text() + ',';
    					item3 += $(this).find('.item-3').text() + ',';
    				});
    				// 2:找到tr下面的子节点,  $('.item-1').text() ....  进行拼接,并赋值
    				console.log(item1.substr(0, item1.length - 1), 'item1');  //拼接好的字符串
    				console.log(item2.substr(0, item2.length - 1), 'item2');  //拼接好的字符串
    				console.log(item3.substr(0, item3.length - 1), 'item3');  //拼接好的字符串
    			}
    			
    		</script>
    	</body>
    </html>
    
    
    展开全文
  • tr标签和td标签 一个<tr></tr>标签代表一行 一个<td></td>代表一个单元格(一行中的一个元素) width hight是css样式 控制表的高和宽 borger标签 语法:border="1"可用来给表加边框 ""中的...

    table标签
    table标签是表格标签 用这个可以创建一个表格
    在标签中可以设置表格的相关属性
    tr标签和td标签
    一个<tr></tr>标签代表一行 一个<td></td>代表一个单元格(一行中的一个元素)
    width hight是css样式 控制表的高和宽
    borger标签
    语法:border="1"可用来给表加边框 ""中的数字代表最外层边框的宽 数字越大越宽
    cellspacing标签
    语法:cellspacing="0"用来设置单元格间距 ""中的数字越大越宽 间距为0并不意味着重合 而是两个紧挨着
    cellpadding
    语法:cellpadding="1"用来设置单元边沿与其内容之间的空白 ""中的数字越大越宽 间距为0并不意味着重合 而是两个紧挨着

    <body>
    		<table align="center" border="1" width="300" hight="300" cellspacing="0">
    			<!--
                	table标签是表格标签 用这个可以创建一个表格
                	width hight是css样式 控制表的高和宽
                	borger可用来给表加边框 ""中的数字代表最外层边框的宽 数字越大越宽
                	cellspacing用来设置单元格间距 数字越大越宽 间距为0并不意味着重合 而是两个紧挨着
    			-->
    			<tr>
    				<td align="center"><b>1+1</b></td>
    				<!--
    					align="center"用来设置单元格中元素对齐方式 
    					此处center表示居中 也可用于表格对齐方式
    					<b></b>标签用来文体加粗
    					这两个效果可用一个<th>"文本"</th>标签来表示
    					如下
    				-->
    				<th>1+2</th>
    				<td>1+3</td>
    			</tr>
    			<!--
                	一个<tr></tr>标签代表一行 一个<td>代表一个单元格(一行中的一个元素)
                -->
                <tr>
    				<td>2+1</td>
    				<td>2+2</td>
    				<td>2+3</td>
    			</tr>
    		</table>
    	</body>
    

    caption表格标题标签
    <caption>标题内容</caption>需要写在table表格里面里面,不然没用。

    align元素
    align用来设置单元格中元素对齐方式 语法:align=""
    align="center"表示居中 也可用于表格对齐方式
    b标签和th标签
    <b></b>标签用来文体加粗
    这两个效果可用一个<th>"文本"</th>标签来表示

    在这里插入图片描述

    <td align="center"><b>1+1</b></td>
    

    这个是左边的1+1
    同时上面的图片是cellspacing="0"即单元格间距为0
    下面的图片是cellspacing="5"即单元格间距为5

    <th>1+2</th>
    

    这个是中间的那个1+2
    同样的效果不同的标签

    展开全文
  • html元素tr标签的使用方法及作用

    千次阅读 2021-06-11 03:32:08
    html元素tr标签的使用方法及作用详解如下:标签的定义标签是"table row"的缩写,是定义HTML表格中的每一行;标签是成对出现的,以为开始,以为结束;标签包含一个或多个或标签。浏览器支持情况 标签已被所有主流...
  • tr标签单独添加border

    2019-10-21 11:50:38
    直接定义table tr{ border-bottom: 1px solid #e5e5e5;...必须在tr外层的table标签添加border-collapse: collapse;属性 table{ border-collapse: collapse; } table tr{ border-bottom: 1px solid #e5e5e5;...
  • 使用JavaScript根据后台获取的数据进行创建table标签下的tr标签 前端页面中的标签部分代码 <table class="layui-table lay-even" id="poweruser"> <thead> <tr> <th width="80">ID&...
  • vue: v-for在表格标签的tr标签里不能使用情况 v-for不能在以下标签里使用 <thead> <tbody> <tfoot> <th> <td> 表格标签只有<tr>里可以,但是只有<tr>或者套前在以上标签...
  • 修改tr标签的行距,tbale标签的td标签间距 看如下Css文件的代码,其都没有table的tr行距产生效果 tr{ margin-top: 10px; padding: 10px; } td{ margin-left: 2px; } 这个设置其实,会没有效果的,...
  • 正则表达式匹配指定的tr标签

    万次阅读 2019-05-13 08:52:16
    ,在这个tr标签中存在一个特殊的字符串“[$]”,要在多个tr标签中匹配出所有符合条件的<tr>。 样例输入 var str="<tr>123456</tr><tr>ABCD[$]12345678</tr><tr>3456789</t...
  • v-for在表格标签的tr标签里不能用

    千次阅读 2020-01-16 15:24:14
    v-for不能在以下标签里使用 <thead> <tbody> <tfoot> <th> <td> 表格标签只有<tr>里可以,但是只有<tr>或者套前在以上标签里,是不能成功的 在表格标签一般都是嵌套在<...
  • Jquery和JS获取Table中tr标签的值以及赋值 业务场景:根据 类型,给比例赋值,是当前td比例动态变化;废话少说,直接上代码 1、以下是HTML代码; <div class="col-xs-12 noTableTdBorder"> <table id=...
  • 简介 ... ... 表头单元格-包含头部信息(由th元素创建) 标准单元格-包含数据(有td元素创建) ...tr标签定义HTML表格的行,一个tr元素包含一个或多个th和td元素。 属性 字段 含义 rowspan ...
  • H5 table tr标签和td标签的区别

    万次阅读 2017-07-17 15:18:32
    标签定义 HTML 表格中的行。 一个 元素包含一个或多个 或 元素。 标签定义 HTML 表格中的标准单元格。 HTML 表格有两种单元格类型: 表头单元格 - 包含头部信息(由 元素创建) 标准单元格 ...
  • 要求从后台查询该省份的所有城市,然后动态的再前台固定的tr标签中添加相应的td标签来展示城市基本信息; 一、前台jsp及js源码 二、后台action 一、前台jsp及js源码 jsp:在固定的tr标签...
  • table标签用于定义一个表格,在网页当中加入一个table标签就相当于定义了一个表格。td和tr标签是table的子标签,分别用于定义行和列<!DOCTYPE html> <title></title> <meta charset="UTF-8"></meter> <tr>
  • html tr标签替换

    千次阅读 2016-01-26 11:38:40
    在table中读取不固定图片或者文本时会出现不好排的情况 ...这样就可以在一个原有的tr下生成多个tr标签。 $.get("../aaaa?action=getMoneyCost&orderid=" + getQueryString("orderid"), function (data) {
  • 在table中,如果在tr加上display样式时,会发生错乱如下: fa fa Gold Level Virtual Server 已完成 haha Platinum Level Virtual Server 正在执行 aha Hardware Switch 已完成 效果如图: ...
  • 点击tr标签,当前列选中

    千次阅读 2019-12-17 13:58:01
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js">... ...
  • 这个功能看起来很简单,但是其中却...但是,这样其实是取不到tr标签的,因为,我们的浏览器在构造table的时候,会默认把这些tr标签放在table的tbody标签中,因此,这样只能取到tbody标签。 要想取得tr标签,要先取到t
  • 现在我点击tr下的任一个td都会... <tr onclick="函数"> <td><input type="checkbox" ……/> <td></td> ……这里有n个td <td></td> <td></td> <td></td> </tr> ```
  • html中的tr,td,th标签

    千次阅读 2022-01-06 16:03:31
    tr是 table row 表格的行 HTML中 标签定义 HTML 表格中的行。tr 元素包含一个或多个 th 或 td 元素。 td是table data(表格数据) HTML中 标签定义 HTML 表格中的标准单元格。 元素中的文本通常是普通的左对齐文本。 ...
  • HTML的tr和td标签

    千次阅读 2021-06-13 17:13:05
    网页制作用的较多的就是这些常用的标签,现在将tr和td分析如下:1.HTML tr标签tr 标签 -- 代表HTML表格中的一行*tr标签是成对出现的,以开始,结束* 属性o Common-- 一般属性o align-- 代表行的水平对齐方式(left(左...
  • html的tr和td标签

    万次阅读 多人点赞 2019-01-30 19:58:16
    html的tr和td标签
  • HTML <tr> 标签

    千次阅读 2021-06-12 18:48:49
    定义和用法 标签定义 HTML 表格中的行。tr 元素包含一个或多个 th 或 td 元素。实例一个简单的 HTML 表格,包含两行两列: Month Savings January $100 TIYHTML 与 XHTML 之间的差异在 HTML 4.01 中,tr 元素的 ...
  • HTML学习之tr|td|th标签

    千次阅读 2021-04-08 00:07:53
    tr 标签 ——代表HTML表格中的一行,是table row的缩写 1) tr 标签是成对出现的,以开始,结束 2)属性 ——Common – 一般属性 1》align :代表行的水平对齐方式(left(左对齐) | center(居中对齐) |right(右对齐) | ...
  • 什么是<tr标签

    千次阅读 2020-08-22 10:02:29
    tr> 标签? 什么是<tr> 标签? <tr> 标签定义 HTML 表格中的行。 tr 元素包含一个或多个 th 或 td 元素 <a href="http://www.xinbiancheng.cn">xinbiancheng.cn</a> > ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 195,716
精华内容 78,286
关键字:

tr标签

友情链接: DateEdit.zip