js实现对table动态添加、删除和更新的要领

来源: 电脑维修教程 阅读:     发表时间:

js实现对table动态添加、删除和更新的要领,涉及javascript针对html中table表格节点的操纵技巧,具有必然参考借鉴价值,需要的伴侣可以参考下 本文实例讲述了

js实现对table动态添加、删除和更新的要领,涉及javascript针对html中table表格节点的操纵技巧,具有必然参考借鉴价值,需要的伴侣可以参考下

本文实例讲述了js实现对table动态添加、删除和更新的要领。分享给各人供各人参考。具体实现要领如下:

代码如下:

<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=utf-8" />;

<title>;表格操纵</title>;

<style type="text/css">;

body {

font-size: 13px;

line-height: 25px;

}

table {

border-top: 1px solid #333;

border-bottom: 1px solid #333;

width: 300px;

}

td {

border-right: 1px solid #333;

border-bottom: 1px solid #333;

}

.title {

text-align: center;

font-weight: bold;

background: #ccc;

}

.center {

text-align: center;

}

#displayinfo {

color: red;

}

;

<script type="text/javascript">;

function addrow() { //增加一行

var tableobj = document.getelementbyid('mytable');

var rownums = tableobj.rows.length;

var newrow = tableobj.insertrow(rownums);

var col1 = newrow.insertcell(0);

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

var col2 = newrow.insertcell(1);

col2.innerhtml = "$18.5";

col2.align = "center";

var divinfo = document.getelementbyid('displayinfo');

divinfo.innerhtml = "添加商品乐成";

}

function delrow() { //删除第二行

document.getelementbyid('mytable').deleterow(1);

var divinfo = document.getelementbyid('displayinfo');

divinfo.innerhtml = "删除商品乐成";

}

function updaterow() { //更新行的信息

var urow = document.getelementbyid('mytable').rows[0];

urow.classname = "title";

}

;

;

;

<table border="0" cellpadding="0" cellspacing="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>;60个瞬间</td>;

<td class="center">;$32.00</td>;

</tr>;

</table>;

<input name="b1" type="button" value="增加一行" onclick="javascript:addrow();"/>;
;

<input name="b2" type="button" value="删除第二行" onclick="javascript:delrow();"/>;
;

<input name="b3" type="button" value="修改标题" onclick="javascript:updaterow();"/>;
;

<div id="displayinfo">;

;

;

但愿本文所述对各人的javascript措施设计有所帮手。

电脑维修视频教程

以上是:解决js实现对table动态添加、删除和更新的要领问题的详细资料教程