<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. 传智168期JavaEE就业班 day03-js

    * 课程回顾: * CSS * CSS的简介 * 层叠样式表. * CSS与HTML的结合(4种) * HTML的标签提供了属性 style="CSS的代码" * HTML提供了标 ...

  2. java.io.stream

    1. package com.io.Stream; import java.io.*; public class NyFileInputStream1 { /** * 读取文件的streamIO * ...

  3. Qt *.pro编写一般规则

    qmake 之 CONFIG 与 QT 乱谈 看qtcn论坛中经常有人忘记 QT+=network 等语句.随便写写吧,或许对他人有帮助. 写来写去,发现越写越乱,就这样吧,反正主要的内容很简单. d ...

  4. knockout_主页的demo复习

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. hdu1520 树形dp

    树形dp入门,在树上进行dp. 状态转移方程: dp[i][0] = max(dp[j][0], dp[j][1]);//i为j的上司 并且i不来 dp[i][1] = dp[j][0];//i来了 ...

  6. 项目跑起来之后,一会儿后台就会报错Illegal access: this web application instance has been stopped already. Could not load [com.mchange.v2.resourcepool.BasicResourcePool$1DestroyResourceTask]. The following stack trace

    一月 24, 2016 6:42:54 下午 org.apache.catalina.loader.WebappClassLoaderBase checkStateForResourceLoading ...

  7. 洛谷P2014 TYVJ1051 选课

    题目描述 在大学里每个学生,为了达到一定的学分,必须从很多课程里选择一些课程来学习,在课程里有些课程必须在某些课程之前学习,如高等数学总是在其它课程之前学习.现在有N门功课,每门课有个学分,每门课有一 ...

  8. ECSHOP Inject PHPCode Into \library\myship.php Via \admin\template.php && \includes\cls_template.php Vul Tag_PHP_Code Execute Getshell

    目录 . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 PHP语言作为开源社区的一员,提供了各种模板引擎,如FastTemplate,Sm ...

  9. 由chrome剪贴板问题研究到了js模拟鼠标键盘事件

    写在前面 最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了.下面来说一下今天遇到的一个问题吧 大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示 window.cli ...

  10. uva 10723 Cyborg Genes（LCS变形）

    题目:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=107450#problem/C 题意:输入两个字符串,找一个最短的串,使得输入的两个 ...