1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
  2. 	<html>
  3. 	<head>
  4. 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. 	<title>Insert title here</title>
  6. 	<link rel="stylesheet" href="mytabletest.css" type="text/css">
  7. 	<script language="javascript" type="text/javascript">
  8. 	function $(id) {
  9. 		return document.getElementById(id);
  10. 	}
  11. 	function addHero() {
  12. 		var z;
  13. 		var i=$("ph").value;
  14. 		for (var j=1;j<$("mytable").rows.length;j++)   {
  15. 			if(parseInt(i)>=parseInt($("mytable").rows[j].cells[0].getElementsByTagName("input")[0].value))
  16. 			{
  17. 				z=j;
  18. 			}
  19. 		}
  20. 		var tableRow=$("mytable").insertRow(z+1);
  21. 		var Cell_0=tableRow.insertCell(0);
  22. 		Cell_0.innerHTML='<input value="'+$("ph").value+'"  readonly="true"/>';
  23. 		Cell_0.className="s1";
  24. 		var Cell_1=tableRow.insertCell(1);
  25. 		Cell_1.innerHTML='<input value="'+$("xm").value+'"  readonly="true"/>';
  26. 		Cell_1.className="s2";
  27. 		var Cell_2=tableRow.insertCell(2);
  28. 		Cell_2.innerHTML='<input value="'+$("ch").value+'"  readonly="true"/>';
  29. 		Cell_2.className="s3";
  30. 		var Cell_3=tableRow.insertCell(3);
  31. 		Cell_3.innerHTML="<a href='#' onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a>";
  32. 		Cell_3.className="s4";
  33. 		var Cell_4=tableRow.insertCell(4);
  34. 		Cell_4.innerHTML="<a href='#' onclick='edit(this.parentNode.parentNode)' class='edit'>修改</a>";
  35. 		Cell_4.className="s5";
  36. 	}
  37.  
  38. 	function Del(obj,val) {
  39. 		var a=window.confirm("您确定要删除吗？");
  40. 		if(a)  {
  41. 			$("mytable").deleteRow(val);
  42. 		}  else  {
  43. 			window.alert("未删除！");
  44. 		}
  45. 	} 
  46.  
  47. 	function edit(obj) {
  48. 		var inp = obj.getElementsByTagName("input");
  49. 		for (var i=0,len=inp.length;i<len;i++)
  50. 		{
  51. 			inp[i].readOnly=false;
  52. 		}
  53. 	}
  54. 	</script>
  55. 	</head>
  56. 	<body>
  57. 	<h1>梁山英雄排行榜</h1>
  58. 	<table id="mytable" cellspacing="0px" border="3" bordercolor="red">
  59. 		<tr>
  60. 			<td class="s_top">排行</td>
  61. 			<td class="s_top">姓名</td>
  62. 			<td class="s_top">绰号</td>
  63. 			<td class="s_top" colspan="2">操作</td>
  64. 		</tr>
  65. 		<tr>
  66. 			<td class="s1"><input value="1" readonly="true"/></td>
  67. 			<td class="s2"><input value="宋江" readonly="true"/></td>
  68. 			<td class="s3"><input value="呼保义" readonly="true"/></td>
  69. 			<td class="s4"><a href="#" onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a></td>
  70. 			<td class="s5"><a href="#" onclick='edit(this.parentNode.parentNode)'>修改</a></td>
  71. 		</tr>
  72. 		<tr>
  73. 			<td class="s1"><input value="2" readonly="true"/></td>
  74. 			<td class="s2"><input value="卢俊义" readonly="true"/></td>
  75. 			<td class="s3"><input value="玉麒麟" readonly="true"/></td>
  76. 			<td class="s4"><a href="#" onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a></td>
  77. 			<td class="s5"><a href="#" onclick='edit(this.parentNode.parentNode)'>修改</a></td>
  78. 		</tr>
  79. 		<tr>
  80. 			<td class="s1"><input value="3" readonly="true"/></td>
  81. 			<td class="s2"><input value="吴用" readonly="true"/></td>
  82. 			<td class="s3"><input value="智多星" readonly="true"/></td>
  83. 			<td class="s4"><a href="#" onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a></td>
  84. 			<td class="s5"><a href="#" onclick='edit(this.parentNode.parentNode)'>修改</a></td>
  85. 		</tr>
  86. 	</table>
  87.  
  88. 	<span class="span1">排行</span><input id="ph" type="text"/>
  89. 	<br>
  90. 	<span class="span1">姓名</span><input id="xm" type="text"/>
  91. 	<br>
  92. 	<span class="span1">绰号</span><input id="ch" type="text"/>
  93. 	<br>
  94. 	<input class="but" type="button" value="添加英雄" onclick="addHero()"/>
  95.  
  96. 	</body>
  97. </html>

　　

另外一种:

步骤：

1、获取表格的dom节点

2、通过rows和cells定位td单元格

3、通过修改innerHTML

示例代码

  1. <body>
    <table id='test'>  //定义一个table
    <tr>
      <td></td><td></td>
    </tr>
    </table>
    <script>
     var tb = document.getElementById('test');//获取表格的dom节点
     var td = tb.rows[0].cells[0];//获取0行0列的td单元格
     td.innerHTML = '222';//动态修改表格的内容为222
    </script>
    </body>

[HTML]js动态修改表格里面的内容的更多相关文章

  1. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  2. JavaScript动态改变表格单元格内容的方法

    本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...

  3. JS动态生成表格后 合并单元格

    JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...

  4. js 动态生成表格案例

    <1>布局:一个table表格,表格分为两个部分,上面是thead表头,表头里面仅一行,有4列(th),   下面是tbody表格内容,要求tbody中的每一行都是用js动态创建的 < ...

  5. 微信小程序 JS动态修改样式

    微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...

  6. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  7. JS动态修改微信浏览器中的title

    JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示． 平时使用JS修改title,直接document.title=新标题就好了 这样 ...

  8. js动态添加-表格逐行添加、删除、遍历取值

    关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可.功能包括:表格添加一行 ...

  9. js动态改变下拉框内容

    今天为大家分享一篇js动态设置select下拉菜单的默认选中项实例,具有很好的参考价值,希望对大家有所帮助. 代码实例如下: <!DOCTYPE html> <html lang=& ...

随机推荐

  1. redsocks 配合iptables设置全局sockts5代理

    参照:http://kuaile.in/archives/1370 架构图: 第一步,安装redsocks 1. 安装依赖 yum install libevent-devel 2. 下载编译 git ...

  2. Java基础之处理事件——实现低级事件监听器（Sketcher 2 implementing a low-level listener）

    控制台程序. 定义事件监听器的类必须实现监听器接口.所有的事件监听器接口都扩展了java.util.EventListener接口.这个接口没有声明任何方法,仅仅用于表示监听器对象.使用EventLi ...

  3. devexpress13学习系列（一）PDFViewer（2）

    DevExpress.XtraPdfViewer Namespace 该命名空间下,保留着pdfviewer组件需要的类,主要有:   Class Description   PdfCurrentPa ...

  4. PostgreSQL表空间

    postgres=# \h create tablespace Command: CREATE TABLESPACEDescription: define a new tablespaceSyntax ...

  5. JS练习题 显示登入者相关好友

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

  6. [原创]java WEB学习笔记69：Struts2 学习之路-- 消息处理与国际化，概述，配置国际资源文件，访问国际化消息，通过超链接切换语言

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  7. eclipse的自动提示功能

    一般情况下按ALT+/即可提示,若想按任意字母都有提示,则可以打开eclipse的自动提示功能,打开或关闭该提示功能的步骤如下: 打开eclipse后一次点Window->Perferences ...

  8. 【crunch bang】增加壁纸图片文件

    将你的壁纸图片复制到 ~/images/wallpapers/shared即可.当然你得在终端用cp命令,因为这个目录是有权限到

  9. Sqlserver 平面文件导入/ SSIS FlatFileSource导入文件时 出现LocaleID is not installed报错问题

    最近在使用SqlServer和SSIS导入一个CSV文件到数据库时(SSIS选用的FlatFileSource作为数据流源),老是遇到  The LocaleID 4 is not installed ...

  10. struts2 笔记04 杂记

    流程: 1. StrutsPrepareAndExcuteFilter:StrutsPrepareAndExcuteFilter作为前端控制器,是整个Struts2的调度中心. 2. ActionMa ...