<style type="text/css">

body{

    font-size:13px;

    line-height:25px;

    }

table{

    border-top: 1px solid #;

    border-left: 1px solid #;

    width:300px;

}

td{

    border-right: 1px solid #;

    border-bottom: 1px solid #;

    }

.center{

    text-align:center;

}

.title{

    text-align:center;

    font-weight:bold;

    background-color: #cccccc;

}

#displayInfo{

    color:red;

}

</style>

<script src="js/table.js"></script>

</head>

<body>

<table border="" cellspacing="" cellpadding="" 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>60个瞬间</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()"/>

<div id="displayInfo"></div>

</body>
function addRow(){

    var tableObj=document.getElementById("myTable");

    var rowNums=tableObj.rows.length;

    var newRow=tableObj.insertRow(rowNums);

    var col1=newRow.insertCell();

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

    var col2=newRow.insertCell();

    col2.innerHTML="&yen;18.5";

    col2.align="center";

    var divInfo=document.getElementById("displayInfo");

    divInfo.innerHTML="添加商品成功！"

}

function updateRow(){

    var uRow=document.getElementById("myTable").rows[];

    uRow.className="title";

}

function delRow(){

   document.getElementById("myTable").deleteRow();

   var divInfo=document.getElementById("displayInfo");

   divInfo.innerHTML="删除商品成功！"

}

table动态添加删除一行和改变标题的更多相关文章

  1. Jquery动态添加/删除表格行和列

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 用Javascript动态添加删除HTML元素实例 (转载)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. ASP.NET给Table动态添加删除行，并且得到控件的值

    ASP.NET给Table动态添加控件并且得到控件的值 由于跟老师做一个小的项目,可是我自己又不太懂js,所以一直为动态建立表格并且能动态的取值和赋值感到苦恼.起初在网上找到了一些js资源,解决了动态 ...

  4. 编辑 Ext 表格（一）——— 动态添加删除行列

    一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除.   (1) 动态添加表格的行  gridS ...

  5. js实现网页收藏功能，动态添加删除网址

    <html> <head> <title> 动态添加删除网址 </title> <meta charset="utf-8"&g ...

  6. jquery动态添加删除div--事件绑定,对象克隆

    我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...

  7. jQuery动态添加删除CSS样式

    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...

  8. JS动态添加删除html

    本功能要求是页面传一个List 集合给后台而且页面可以动态添加删除html代码需求如下: 下面是jsp页面代码 <%@ page language="java" pageEn ...

  9. table 排序 添加 删除 等操作

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. java操作mysql中的编码问题解决

    要注意以下几点 1.在连接mysql数据库时 jdbc:mysql://localhost:3306/xiaonei?useUnicode=true&characterEncoding=utf ...

  2. maven初学（二）archeType插件使用

    archeType是一个maven插件,它的主要功能是根据模板来创建工程结构 创建工程结构: 1,创建工程目录 2,输入命令:mvn archetype:generate 3,选择需要的archety ...

  3. 基本的mediaQuery写法,不复习又忘记了

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. 【UVA 11462】 Age Sort（基数排序）

    题 题意 给你最多2000000个数据,大小是1到99的数,让你排序输出. 分析 快排也可以过.不过这题本意是要基数排序(桶排序),就是读入年龄age, a[age]++,然后输出时,从1到99岁(看 ...

  5. eclipse错误：Unable to read workbench state. Workbench UI layout will be reset.XML document structures

    Unable to read workbench state. Workbench UI layout will be reset.XML document structures must start ...

  6. 初学JDBC，调用存储过程

    在JDBC简单封装的基础上实现 public class UserDao{ public static void testGetUser(String userName) throws Excepti ...

  7. 如何起草你的第一篇科研论文——应该做&避免做

    如何起草你的第一篇科研论文——应该做&避免做 导语:1.本文是由Angel Borja博士所写.本文的原文链接在这里.感谢励德爱思唯尔科技的转载,和刘成林老师的转发.2.由于我第二次翻译,囿于 ...

  8. 终端terminal配色

    切换到~/.bash_profile,无此.bash_profile文件可创建 在文件内粘入以下代码: #enables colorin the terminal bash shell export ...

  9. TCP/IP协议栈概述

    TCP/IP协议栈概述 这篇文章虽然只是很粗浅的介绍了ISO/OSI 网络模型,但确实把握住了关键点,某种意义上,简单回顾一下就可以加深对TCP/IP协议栈的理解. 原作者:阮一峰 链接: http: ...

  10. whereis命令

    whereis命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件(参数-s).如果省略参数,则返回所有信息. 和find相比,whereis查找的速度非 ...