html表格 | 易学教程

利用jquery动态添加和删除表格的一行，并且保存单行数据

阅读更多关于利用jquery动态添加和删除表格的一行，并且保存单行数据

开发时遇到一个需求：要求要在页面的表格可以添加和删除一行，并能填写对应的数据后保存这一行数据。 HTML代码界面使用了freemarker框架，teams是后台传过来的list类型数据 <form action="" id="" method="post"> ... <table id="addTable" > <tr class="first_tr"> <th>姓名</th> <th>国籍</th> <th>单位</th> <th>职务</th> <th>专业、特长</th> <th>操作</th> </tr> <#list teams as item> <tr> <input type="hidden" id="id" value="${item.id!}"/> <td>${item.name!}</td> <td>${item.gj!}</td> <td>${item.dw!}</td> <td>${item.zw!}</td> <td>${item.zytc!}</td> <td><input type="button" onclick="delRow(this)" value="-删除"/></td> </tr> </#list> </table> <table> <tr> <td celspan="6"> <input type="button" onclick=

纵向表格转为横向表格

阅读更多关于纵向表格转为横向表格

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>列表格转行表格</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" type="text/css" href="js/plugins/layui/css/layui.css" />  <style> #tableId th{ display: block; } #tableId thead{ float: left; } #tableId tbody td,#tableId tbody{ display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #tableId tbody{ font-size:

Javascript实现把网页中table的内容导入到excel中的几种方法

阅读更多关于 Javascript实现把网页中table的内容导入到excel中的几种方法

Javascript实现把网页中table的内容导入到excel中的几种方法一、直接拷贝整个表格到EXCEL中二、通过遍历表格，给EXCEL中相应的单元格赋值。三、把表格中的内容提取出来，利用IE的另存为.csv的格式。各方法的好处： 1. 直接拷贝表格，能够保留表格中的原有的格式，比如，列，行的合并，对齐方式，底色等等， 2. 通过遍历表格，比较灵活，可以遍历表格某些需要部分的内容。 3. 利用IE的另存为，不用创建ActiveXObject对象，可以处理表格合并方面的问题。各方法的缺点： 1. 可能弹出脚本错误：Automation不能创建对象。解决方法：启用IE安全设置中的：对没有标记为安全的ActiveX控件进行初始化和脚本运行。由于整个表格复制到EXCEL中，给表格加个标题，并加入到EXCEL中可能会遇到麻烦。解决方法：首先在表格中加入第一行 <tr><td colspan="x" align="center">&</td></tr> X，表示整个表格的列数，复制完整个表格后,加如下代码，oSheet为当前活动的sheet. oSheet.Range(oSheet.Cells(1, 1), oSheet.Cells(1, x)).value = "表格标题";//设置标题 oSheet.Rows(1).Font.Size = 16; //设置文字大小

《Head first HTML与CSS 第二版》读书笔记第十三章表格和列表

阅读更多关于《Head first HTML与CSS 第二版》读书笔记第十三章表格和列表

1、表格 HTML表格元素<table><tr><th><td>一起用来创建一个表格。 <table>元素定义并包围整个表格。 <tr>表示一行。 <td>表示一个单元格。 <th>用来表示行或列表头的单元格。 <caption>元素提供表格的额外信息（相当于表格的标题）。默认的，表头在表格的上方。table的CSS属性caption-side指定caption的位置，下面的代码将caption移动的表格下部： table { caption-side: bottom; } 对于表格的每个单元格，有内边距和边框，但是没有外边距。相对的table有一个border-spacing的CSS属性定义整个表格每个单元格共同的外边距。也可以定义垂直和水平方向上的外边距，例如： border-spacing: 10px 30px; 将border-collapse的CSS属性设置为collapse，可以使单元格之间没有边框间距。浏览器会忽略表格上设置的所有边框间距。另外还会把两个边框合并成一个边框。为表格设置间隔颜色的两种实现方法：（1）定义一个类，为其设置背景颜色，在需要的表格行<tr>指定其归属这个类；（2）使用伪类nth-child，表示一个元素相对于它兄弟元素的数字顺序： tr:nth-child(2n+1){ background-color: #fcba7a; }

动态创建表格1

阅读更多关于动态创建表格1

<!DOCTYPE HTML> <html> <head> <title>动态创建表格</title> <meta charset="utf-8" /> <style> table{width:600px; border-collapse:collapse; text-align:center; } td,th{border:1px solid #ccc} </style> </head> <body> <div id="data"> <table> <thead> <tr> <th>ename</th> <th>salary</th> <th>age</th> </tr> </thead> <tbody> </tbody> </table> </div> <script> var json=[ {"ename":"Tom", "salary":11000, "age":25}, {"ename":"John", "salary":13000, "age":28}, {"ename":"Mary", "salary":12000, "age":25} ]; var tbody=document.querySelector("table>tbody"); for(var emp of json){ var tr=document.createElement("tr"); tbody

在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript

阅读更多关于在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript

需求描述：用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示，具体表现如下图：如果如果输入框内容有一项为空，弹出对话框‘请将数据填入完全步骤： 1.按钮注册单击事件 2.获取并判断文本框的内容 4.创建行并添加到tbody中 5.创建列，并设置内容 6.把列添加到行中代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>在网页中添加表格</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 div { 13 width: 400px; 14 margin: 100px auto; 15 } 16 table { 17 margin-top: 10px; 18 width: 400px; 19 border: 2px solid #000; 20 border-collapse: collapse; 21 } 22 table thead tr { 23 background-color: purple; 24 color: #e0e0e0; 25 } 26 27 table tr { 28 background-color: pink; 29 } 30 31 table td {

用css样式，为表格加入边框

阅读更多关于用css样式，为表格加入边框

Table 表格在没有添加 css 样式之前，是没有边框的。这样不便于我们后期合并单元格知识点的讲解，所以在这一节中我们为表格添加一些样式，为它添加边框。在右侧代码编辑器中添加如下代码： <style type="text/css"> table tr td,th{border:1px solid #000;} </style> 上述代码是用 css 样式代码（后面章节会详细讲解），为 th ， td 单元格添加粗细为一个像素的黑色边框。结果窗口显示出结果样式：实例： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>为表格添加边框</title> <style type="text/css"> table tr td,th{border:1px solid #000;} </style> </head> <body> <table summary=""> <tr> <th>班级</th> <th>学生数</th> <th>平均成绩</th> </tr> <tr> <td>一班</td> <td>30</td> <td>89</td> </tr> <tr> <td>二班</td> <td>35</td>

表格

阅读更多关于表格

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ width: 300px; margin: 5px auto; /*table 和td之间默认会有一个距离，通过border-spacing设置为零*/ border-spacing: 0px; /*用于设置边框合并成一条线，则border-spacing自动失效*/ border-collapse: collapse; border: 1px solid black; } /*隔行变色*/ tr:nth-child(even){ background-color: dodgerblue; } /*选中变色*/ tr:hover{ background-color: red; } td , th{ border: 1px solid black; text-align: center; } </style> </head> <body>  <table> <thead> <th></th> </thead> <tbody> <tr></tr> </tbody> <tfoot> <tr><

节点操作案例7-动态创建表格

阅读更多关于节点操作案例7-动态创建表格

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box table { border-collapse: collapse; } </style> </head> <body> <div id="box"></div> <script src="common.js"></script> <script> // var s = {name: 'zs', subject: '语文', score: 90}; // 模拟数据 var datas = [ {name: 'zs', subject: '语文', score: 90}, {name: 'ls', subject: '数学', score: 80}, {name: 'ww', subject: '英语', score: 99}, {name: 'zl', subject: '英语', score: 100}, {name: 'xs', subject: '英语', score: 60}, {name: 'dc', subject: '英语', score: 70} ]; // 表头数据 var headDatas = ['姓名', '科目', '成绩', '操作']; // 1

表格

阅读更多关于表格

1、基本格式： <table>//定义一个完整的表格 <tr>//一行 <td></td>//一个单元格 <td></td> <td></td> </tr> </table> 用表格实现成绩登记表： <html> <head> <meta charset="utf-8"> <title>成绩登记表格</title> </head> <body> <table width="600" border="1" align="center" cellpadding="5" cellspacing="3">  <caption>成绩登记表</caption> <tr> <th bgcolor="blanchedalmond "align="middle" >序号</th>  <th bgcolor="blanchedalmond "align="middle ">学号</th> <th bgcolor="blanchedalmond "align="middle ">姓名</th> <th bgcolor="blanchedalmond "align="middle ">平时成绩</th> <th bgcolor="blanchedalmond "align="middle ">期末成绩

订阅 html表格