表格的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. Nginx (基于linux)综合

    重启Nginx服务:centos:测试NGINX配置文件是否有效:/usr/local/nginx/sbin/nginx -t 平滑重启:/usr/local/nginx/sbin/nginx -s  ...

  2. plupload上传控件错误exec(this.uid, component, action, args)

    plupload上传控件错误exec(this.uid, component, action, args) --undefined is not a function 原因:Flash元素隐藏后调用控 ...

  3. volley开源库乱码问题总结(持续更新)

    之前Android开发一直用的是多层封装的Final框架.最近开始学习使用小巧的volley. 在使用该框架的过程中,出现了数次乱码问题,再次做以总结. 分别是返回数据乱码和提交参数乱码两个问题: 一 ...

  4. ios开发——实用技术总结Swift篇&swift常用开发技术总结

    swift常用开发技术总结 懒加载:属性,数组(字典),控件... 数组(懒加载): lazy var shops:Array<Dictionary<String, String>& ...

  5. [CodeEdit--Sublime]一些好用的Plugins

    Sublime Text 3 Plugins (**)packet control:plugin包管理器 (**)netuts-fetch: (**)markdown editing:Markdown ...

  6. oc-13-多文件

    Dog.h #import <Foundation/Foundation.h> @interface Dog : NSObject { @public NSString *_name; i ...

  7. 龙书(Dragon book) +鲸书(Whale book)+虎书(Tiger book)

    1.龙书(Dragon book)书名是Compilers: Principles,Techniques,and Tools作者是:Alfred V.Aho,Ravi Sethi,Jeffrey D. ...

  8. SimpleDateFormat使用详解及与毫秒的相互转换

    1. SimpleDateFormat使用详解 public class SimpleDateFormat extends DateFormat SimpleDateFormat 是一个以国别敏感的方 ...

  9. 精品教程--IOS零基础开发环境搭建

    下载源码 技术要点: 1. 启动XCODE开始开发 2. IOS项目文件结构分析 3. 添加视图label组件 4. 程序的入口以及启动流程 5. 源码详细的中文注释 ...... 详细介绍: 1. ...

  10. Jackson学习二之集合类对象与JSON互相转化--转载

    原文地址:http://lijingshou.iteye.com/blog/2003059 本篇主要演示如何使用Jackson对List, Map和数组与JSON互相转换. package com.j ...