表格的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. hdu 3790 最短路径问题(两个限制条件的最短路)

    http://acm.hdu.edu.cn/showproblem.php?pid=3790 有两个条件:距离和花费.首先要求距离最短,距离相等的条件下花费最小. dijkstra,仅仅是在推断条件时 ...

  2. 最长公共子序列（LCS问题）

    先简单介绍下什么是最长公共子序列问题,其实问题很直白,假设两个序列X,Y,X的值是ACBDDCB,Y的值是BBDC,那么XY的最长公共子序列就是BDC.这里解决的问题就是需要一种算法可以快速的计算出这 ...

  3. js实现按回车自行提交

    <script type="text/javascript"> document.onkeydown = function (e) { var theEvent = w ...

  4. C++ CreateDirectory

    创建文件夹 关键点 CreateDirectory The CreateDirectory function creates a new directory. If the underlying fi ...

  5. 全面整理的C++面试题

    C++面试题 1.是不是一个父类写了一个virtual 函数,假设子类覆盖它的函数不加virtual ,也能实现多态? virtual修饰符会被隐形继承的. private 也被集成,仅仅事派生类没有 ...

  6. 深入研究Clang（三） libclang

    作者:史宁宁 如今的Clang,不不过一个编译器前端,同一时候也能够作为一个库使用.作为一个库使用的时候,能够用它去分析C/C++/ObjectC语言代码,能够分析源代码得到AST,也能够获取已经分析 ...

  7. Android集成支付宝接口 实现在线支付

    手机的在线支付,被认为是2012年最看好的功能,我个人认为这也是移动互联网较传统互联网将会大放光彩的一个功能. 人人有手机,人人携带手机,花钱买东西,不再需要取钱付现,不再需要回家上网银,想买什么,扫 ...

  8. android IPC及原理简介

    什么是Android操作系统,所谓的Android:是基于Linux内核的软件平台和操作系统,早期由Google开发,后由开放手机联盟Open Handset Alliance)开发.   Linux ...

  9. [Node.js] npm init && npm install

    npm init: For create package.json file which will recode the dependence. npm install: You can also w ...

  10. Android （cocos2dx 网络访问）访问权限设置

    Android开发应用程序时,如果应用程序需要访问网络权限,需要在 AndroidManifest.xml 中加入以下代码: 同样的如果用到其它的权限,也需要作出声明,部分权限列表如下: androi ...