js实现对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; 
} 
</style> 
<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"; 
   } 
</script> 
</head> 
<body> 
<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();"/><br /> 
<input name="b2" type="button" value="删除第二行" onclick="javascript:delRow();"/><br /> 
<input name="b3" type="button" value="修改标题" onclick="javascript:updateRow();"/><br /> 
<div id="displayInfo"></div> 
</body> 
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • js导出table数据到excel即导出为EXCEL文档的方法

    复制代码 代码如下: <!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=&qu

  • js动态控制table的tr、td增加及删除的具体实现

    html: 复制代码 代码如下: <table id='wifi_clients_table' style="color:#0099CC;font-size:12px;" class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr class="success"> <th>序号</th&

  • js处理表格对table进行修饰

    js处理表格 1.行颜色间隔显示 css样式:两个选择器 复制代码 代码如下: <style type="text/css"> .one{ background-color:#33ffcc; } .two{ backgound-color:#ffff66; } </style> <script type="text/javascript"> function trcolor() //控制间隔行颜色显示不同 { var tabNod

  • JS动态添加Table的TR，TD实现方法

    本文实例讲述了JS动态添加Table的TR,TD实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html>  <head> <title></title> <SCRIPT language="JavaScript"> var tempRow=0; var maxRows=0; function insertRows(){ tempRow=table1.rows.length-1; maxRows=t

  • Js实现动态添加删除Table行示例

    Js实现动态添加删除Table行示例

    最近做项目遇到要动态添加.删除表格行的操作,实现如下 html代码 复制代码 代码如下: <table cellpadding="0" cellspacing="0" border="1" style="margin:auto; width:96%;" id="LearnInfoItem"> <tr > <td colspan="8" bgcolor=&qu

  • js无刷新操作table的行和列

    代码仅供参考 如果强行复制请修改页面id 复制代码 代码如下: //查询数据库符合条件的数据 function SelectAlterNativeVenues(field) { var xmlhttp; var pid = document.getElementById("nameandaddress").value; var url = "${RetrieveURL}?accessorType=${AccessorType}"; url = url+"&

  • 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>    <title></titl

  • js动态给table添加/删除tr的方法

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author"

  • js实现对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

  • 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="Co

  • javascript动态添加删除tabs标签的方法

    本文实例讲述了javascript动态添加删除tabs标签的方法.分享给大家供大家参考.具体实现方法如下: <html> <HEAD> <TITLE>网页对话</TITLE> <LINK href="style.css" type=text/css rel=stylesheet> <script> function $(obj) { var o = typeof(obj)=="object" ?

  • jQuery使用toggleClass方法动态添加删除Class样式的方法

    本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法.分享给大家供大家参考.具体分析如下: jQuery通过toggleClass方法动态添加删除Class,一次执行相当于addClass,再次执行相当于removeClass,运行下面的代码点击按钮可以看到文本段落字体在蓝色和黑色间切换 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"&

  • 利用jquery给指定的table动态添加一行、删除一行的方法

    利用jquery给指定的table动态添加一行、删除一行的方法

    $("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列 $("#mytable tr").find("td:nth-child(3)") 3表示获取每行的第三列 今天在项目中,刚好用到给指定的table添加一行.删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自己动手封装个,现就把代码分享出来,避免大伙重复造轮子,

  • JS实现对json对象排序并删除id相同项功能示例

    JS实现对json对象排序并删除id相同项功能示例

    本文实例讲述了JS实现对json对象排序并删除id相同项功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net json排序并删除ID相同项</title> </head> <body> <script type="text/javascript&

  • 基于JavaScript实现动态添加删除表格的行

    又一个动态控制表格的效果,用JavaScript动态生成表格行.表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能. 1.jsp <table id="viewTabs"> <thead> <tr> <th>产品名称</th> <th>编号</th> <th>数量</th> <th>重量</th> <t

  • jQuery给指定的table动态添加删除行的操作方法

    jQuery给指定的table动态添加删除行的操作方法

    最近写程序,碰巧有动态增加删除行的,下面就记录一下. $("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列 $("#mytable tr").find("td:nth-child(3)") 3表示获取每行的第三列 今天在项目中,刚好用到给指定的table添加一行.删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自

  • JQuery实现动态添加删除评论的方法

    本文实例讲述了JQuery实现动态添加删除评论的方法.分享给大家供大家参考.具体实现方法如下: <!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">

  • JS实现为表格动态添加标题的方法

    本文实例讲述了JS实现为表格动态添加标题的方法.分享给大家供大家参考.具体如下: JS中的表格对象带有一个createCaption方法用于为表格创建标题caption <!DOCTYPE html> <html> <head> <script> function createCaption() { var x=document.getElementById('myTable').createCaption(); x.innerHTML="My t

随机推荐