表格的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. XHTML标签的嵌套规则--很基础很重要

    XHTML的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span. strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套 ...

  2. easy Html5 - Jquery Mobile之ToolBars(Header and Footer)

    jquery 在web js框架上的风暴还在继续却也随着移动终端走向了mobile:那么jquery mobile到底包括些什么呢 简介工具栏是在移动网站和应用中的头部,尾部或者内容中的工具条:Jqu ...

  3. 【C语言】模拟实现库函数strcat函数

    //模拟实现库函数strcat函数 #include <stdio.h> #include <string.h> #include <assert.h> char ...

  4. 【JavaScript】javascript常用的东西

    DOM编程.AJAX编程.异步编程(nodejs会涉及的相对多一点,事件.ajax) 函数.函数表达式.回调函数是基础. JavaScript的函数是一个核心. 回调函数有点类似于Android中的回 ...

  5. [CSS] Introduction to CSS Columns

    Learn how to use CSS columns to quickly lay out fluid columns that are responsive, degrade gracefull ...

  6. Java SSH远程执行Shell脚本实现(转)

    前言 此程序需要ganymed-ssh2-build210.jar包(下载地址:http://www.ganymed.ethz.ch/ssh2/) 为了调试方便,可以将\ganymed-ssh2-bu ...

  7. C++调用C#库简单例程

    有些时候,为了使用别人已经写好的C#库文件,我们需要使用C++调用C#库文件: 以下做了一简单的调用工程,步骤如下: 1.准备C#库 (dll文件)   1)创建C#库:     2)编写C#类:   ...

  8. MVC验证01-基础、远程验证

    本文体验MVC服务端和客户端验证.主要涉及:※ 基础验证※ 远程验证1个或多个属性及注意点 基础体验 创建MVC4的Internet项目,本身包含了基本的Model,Views,Controller. ...

  9. HDU 4605 Magic Ball Game 树状数组

    题目大意很简单. 有一颗树(10^5结点),所有结点要么没有子结点,要么有两个子结点.然后每个结点都有一个重量值,根结点是1 然后有一个球,从结点1开始往子孙结点走. 每碰到一个结点,有三种情况 如果 ...

  10. jquery冲突

    今天修改一个项目发现,前辈们自己写的一些方法和jquery冲突了,也就是$的冲突,以至于自己用jquery编写的新功能无法正常使用,细究后发现解决办法如下:使用 noConflict() 方法为 jQ ...