表格的colspan和rowspan属性参考：http://erpoperator.blog.163.com/blog/static/17899637220123993031921/

colspan是行，rowspan是列。

<!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=gb2312" />

<title>操作表格</title>

<style type="text/css">

body{

    font-size:13px;

    line-height:25px;

    }

table{

    border-top: 1px solid #333;

    border-left: 1px solid #333;

    width:300px;

}

td{

    border-right: 1px solid #333;

    border-bottom: 1px solid #333;

    }

.center{

    text-align:center;

}

</style>

<script type="text/javascript">

function addRow(){

var fRow=document.getElementById("row3");

var newRow=document.createElement("tr")    ;

 //创建行节点

var col1=document.createElement("td");

 //创建单元格节点

col1.innerHTML="幸福从天而降";

    //为单元格添加文本

var col2=document.createElement("td");

col2.innerHTML="&yen;18.50";

col2.setAttribute("align","center");

newRow.appendChild(col1);

  //把单元格添加到行节点中

newRow.appendChild(col2);

document.getElementById("row3").parentNode.insertBefore(newRow,fRow);

//把行节点添加到表格末尾

    }

function updateRow(){

    var uRow=document.getElementById("row1");

    //标题行设置为字体加粗、文本居中显示，背景颜色为灰色

   uRow.setAttribute("style","font-weight:bold;text-align:center;background-color: #cccccc;");

    }

function delRow(){

    var dRow=document.getElementById("row2");

    //访问被删除的行

     dRow.parentNode.removeChild(dRow);

        //删除行

    }

function copyRow(){

    var oldRow=document.getElementById("row3");

     //访问复制的行

    var newRow=oldRow.cloneNode(true);

     //复制指定的行及子节点

    document.getElementById("myTable").appendChild(newRow); //在指定节点的末尾添加行

    }

</script>

</head>

<body>

<table border="0" cellspacing="0" cellpadding="0" id="myTable">

  <tr id="row1">

    <td>书名</td>

    <td>价格</td>

  </tr>

  <tr id="row2">

    <td>从你的全世界经过</td>

    <td class="center">&yen;30.00</td>

  </tr>

  <tr id="row3">

    <td>追风筝的人</td>

    <td class="center">&yen;32.00</td>

  </tr>

</table>

<input name="b1" type="button" value="增加一行" onclick="addRow()" />

<input name="b2" type="button" value="删除第2行"  onclick="delRow()"/>

<input name="b3" type="button" value="修改标题样式"  onclick="updateRow()"/>

<input name="b4" type="button" value="复制最后一行"  onclick="copyRow()" />

</body>

</html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>操作表格</title>
<style type="text/css">
body{
font-size:13px;
line-height:25px;
}
table{
border-top: 1px solid #333;
border-left: 1px solid #333;
width:300px;
}
td{
border-right: 1px solid #333;
border-bottom: 1px solid #333;
}
.center{
text-align:center;
}

</style>
<script type="text/javascript">
function addRow(){
var fRow=document.getElementById("row3");
var newRow=document.createElement("tr") ;
//创建行节点
var col1=document.createElement("td");
//创建单元格节点
col1.innerHTML="幸福从天而降";
//为单元格添加文本
var col2=document.createElement("td");
col2.innerHTML="¥18.50";
col2.setAttribute("align","center");
newRow.appendChild(col1);
//把单元格添加到行节点中
newRow.appendChild(col2);
document.getElementById("row3").parentNode.insertBefore(newRow,fRow);
//把行节点添加到表格末尾
}
function updateRow(){
var uRow=document.getElementById("row1");
//标题行设置为字体加粗、文本居中显示，背景颜色为灰色
uRow.setAttribute("style","font-weight:bold;text-align:center;background-color: #cccccc;");
}

function delRow(){
var dRow=document.getElementById("row2");
//访问被删除的行
dRow.parentNode.removeChild(dRow);
//删除行
}

function copyRow(){
var oldRow=document.getElementById("row3");
//访问复制的行
var newRow=oldRow.cloneNode(true);
//复制指定的行及子节点
document.getElementById("myTable").appendChild(newRow); //在指定节点的末尾添加行
}
</script>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" id="myTable">
<tr id="row1">
<td>书名</td>
<td>价格</td>
</tr>
<tr id="row2">
<td>从你的全世界经过</td>
<td class="center">¥30.00</td>
</tr>
<tr id="row3">
<td>追风筝的人</td>
<td class="center">¥32.00</td>
</tr>
</table>
<input name="b1" type="button" value="增加一行" onclick="addRow()" />
<input name="b2" type="button" value="删除第2行" onclick="delRow()"/>
<input name="b3" type="button" value="修改标题样式" onclick="updateRow()"/>
<input name="b4" type="button" value="复制最后一行" onclick="copyRow()" />
</body>

CSS之表格操作的更多相关文章

  1. 这些HTML、CSS知识点，面试和平时开发都需要 No10-No11（知识点：表格操作、代码编写规则）

    系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...

  2. 【jQuery基础学习】04 jQuery中的表格操作及cookie插件的使用

    这章本来准备写成jQuery的表单操作和表格操作的. 然而昨天吧jQuery的表单操作看完,发现全部在炒之前章节的剩饭,所以就没写出来. 那么今天就来看看表格吧. 因为平常做的都是公司的内部管理系统, ...

  3. CSS控制表格（table）样式

    CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}

  4. jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点

    css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...

  5. [办公应用]我的WORD文档表格操作不灵活 无法调整列宽

    最近同事的一个word文档中的表格操作非常不灵活,用鼠标直接调整列宽时总觉得很不灵活.她的操作系统为XP,office 为微软office 2003. 我首先检查了木马,检查了输入法等,结果都没有问题 ...

  6. 四个好看的CSS样式表格

    文章来源 http://www.cnphp6.com/archives/58020 1. 单像素边框CSS表格 这是一个非经常常使用的表格样式. 源码: 2. 带背景图的CSS样式表格 和上面差点儿相 ...

  7. 常用的四种CSS样式表格

    1. 单像素边框CSS表格 这是一个很常用的表格样式. [html] <style type="text/css"> table.gridtable { font-fa ...

  8. 原生js封装table表格操作，获取任意行列td，任意单行单列方法

    V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...

  9. DOM表格操作

    注意:就算代码中不包含<tbody>标签,浏览器解析时也可能会自动添加,因此需要注意子元素的选择 表格操作用到的属性: 1.tHead 2.tBodies 3.tFoot 更为细致的有: ...

随机推荐

  1. PL/pgSQL学习笔记之九

    http://www.postgresql.org/docs/9.1/static/plpgsql-declarations.html 39.3.2. ALIAS newname ALIAS FOR ...

  2. cdoj 25 点球大战(penalty) 模拟题

    点球大战(penalty) Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/2 ...

  3. c#winform使用WebBrowser 大全[超长文转载]

    1.主要用途:使用户可以在窗体中导航网页. 2.注意:WebBrowser 控件会占用大量资源.使用完该控件后一定要调用 Dispose 方法,以便确保及时释放所有资源.必须在附加事件的同一线程上调用 ...

  4. java学习笔记（3）——面向对象

    this关键字 this是当前对象的引用,是运行期间当前对象本身. 可以使用this明确的访问当前对象的属性或者方法,类似于“我” this()可以调用本类的其他构造器,可以使用构造器的重用简化代码的 ...

  5. Microsoft.AlphaImageLoader滤镜解说

    Microsoft.AlphaImageLoader是IE滤镜的一种,其主要作用就是对图片进行透明处理.尽管FireFox和IE7以上的IE浏览器已经支持透明的PNG图片,可是就IE5-IE6而言还是 ...

  6. LFS7.4编译笔记（1）

    由于第一次编译,花了不少时间,也不知道能不能成功,所以就没有记笔记,现在重新编译一次,这次不装U盘而是装到我的移动硬盘上面.步骤差不多,因为我感觉硬盘的速度会比U盘快. 至于LFS的优点,我就不多说了 ...

  7. [Angular2 Router] Configuring a Home Route and Fallback Route - Learn An Essential Routing Concept

    In this tutorial we are going to learn how to configure the Angular 2 router to cover some commonly ...

  8. iOS开发——UI篇Swift篇&玩转UItableView（一）基本使用

    UItableView基本使用 class ListViewController: UIViewController , UITableViewDataSource, UITableViewDeleg ...

  9. MySQL mysqldump数据导出详解 --dump-slave 注意事项

    http://www.cnblogs.com/chenmh/p/5300370.html 介绍 在日常维护工作当中经常会需要对数据进行导出操作,而mysqldump是导出数据过程中使用非常频繁的一个工 ...

  10. Nhibernate详解

    http://sifang2004.cnblogs.com/archive/2005/09/05/230713.html 本文约定:1. Nhibernate简写为NHB;2. 本文例子的开发平台为w ...