表格的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. A. Fox and Box Accumulation

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  2. 视频流服务器配置[windows平台][转]

    视频流服务器配置[windows平台] 搭建一个Flv视频播放服务器 作者:笨小孩 发布于:2013-9-1 20:18 分类:环境架设 IIS,Apache,Nginx环境都可以很好的支持视频的播放 ...

  3. 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. TOJ3651确定比赛名次

    确定比赛名次   Time Limit(Common/Java):1000MS/3000MS     Memory Limit:65536KByte Total Submit: 23          ...

  5. SQL注入原理解说，非常不错！

    原文地址:http://www.cnblogs.com/rush/archive/2011/12/31/2309203.html 1.1.1 摘要 日前,国内最大的程序猿社区CSDN站点的用户数据库被 ...

  6. android自定义TabWidget样式

    先看看效果图吧,个人觉得图标丑了点,不过还行,自己用PS做的 下面是全部代码和流程,一定要按流程顺序来,不然错误! 1.tabhost.xml <TabHost xmlns:android=&q ...

  7. IPC——信号

    Linux进程间通信——使用信号 一.什么是信号 用过Windows的我们都知道,当我们无法正常结束一个程序时,可以用任务管理器强制结束这个进程,但这其实是怎么实现的呢?同样的功能在Linux上是通过 ...

  8. NHibernate讲解

    第1章 NHibernate体系结构 总览 对NHibernate体系结构的非常高层的概览: 这幅图展示了NHibernate使用数据库和配置文件数据来为应用程序提供持久化服务(和持久化的对象). 我 ...

  9. [vba]excel中求选中数据和为给定数所有的组合

    昨天下午开始学习的vba,累死了,肯定有bug,待调试 vba程序如下: Dim aSum As Integer Dim tSum As Integer ) As Integer Dim arrMax ...

  10. Thrift安装问题

      1.error: Bison version 2.5 or higher must be installed on the system! 哈哈,Bison版本低了吧,用下面的命令 wget ht ...