js动态改变表格单元格内容例子

这是一个JavaScript与网页交互的简单实例，动态改变指定ID表格单元格的内容，通过select命令实现要改变的单元格，你会看到对应单元格的内容Ajax无刷新改变了，想学习Ajax功能的，这个例子比较容易看懂哦。
先来看JS部分代码

 代码如下 复制代码

<script>
var arr=new Array()
arr[0]="这是改变后的内容一";
arr[1]="这是改变后的内容二";
arr[2]="这是改变后的内容三";
</script>

把切换后的内容写在了JavaScript的数组里，这样方便。
使用上面的JavaScript：

 代码如下 复制代码

<select onchange="zz.cells[this.selectedIndex].innerHTML=arr[this.selectedIndex]">
<option value=a>改变第一格</option>
<option value=a>改变第二格</option>
<option value=a>改变第三格</option>
</select>
<table id=zz border=1>
<tr height=20>
<td width=220>第一格</td>
<td width=220>第二格</td>
<td width=220>第三格</td>
</tr>
</table>

把以上代码放入网页的<body></body>区间内即可。

上面是定义好的，我们如果要动态创建可以全用js实现，代码如下

代码如下

 代码如下 复制代码

var tableElem = document.getElementById("MyTable");
var tbodyElem = tableElem.getElementsByTagName("tbody")[0];
var trElem = document.createElement("tr");
var td1 = document.createElement("td");
td1.onclick = "EditCell()";

td1.width = "45%";
td1.innerText = " ";
trElem.appendChild(td1);
tbodyElem.appendChild(trElem);
alert(tbodyElem.innerHTML);

这段代码动态创建一个tr和td，并在td中设置了一个onclick事件，但是事实却是当点击td时，并没有出发点击时间调用EditCell函数。后来吧td1.onclick = "EditCell()";改成td1.attachEvent("onclick",EditCell)才成功调用

时间： 2024-09-16 23:08:36

js动态改变表格单元格内容例子的相关文章

JavaScript动态改变表格单元格内容的方法_javascript技巧

本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格内容 <!DOCTYPE html> <html> <head> <script> function changeContent() { var x=document.getElementById('myTable').rows[0].cells; x[0].i

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

 这篇文章主要介绍了JavaScript动态改变表格单元格内容的方法,涉及javascript操作html中table表格的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格内容 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

javascript动态改变表格单元格中的内容

说到用js动态的改变td里面的内容,我们就会想到dom 是吧,下面来看看简单的代码 <TABLE id="table1" border=1 width="150"> <TR> <TD align="center" width="50%">0,0</TD> <TD align="center">0,1</TD> </TR> &

JS动态改变表格边框宽度的方法

 本文实例讲述了JS动态改变表格边框宽度的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过表格对象的border属性修改表格边框宽度 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <!DOCTYPE html> <html> <head> <script> function changeBorder() { document.getElementById('

JS实现控制表格单元格垂直对齐的方法

 这篇文章主要介绍了JS实现控制表格单元格垂直对齐的方法,涉及javascript操作表单元素样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS实现控制表格单元格垂直对齐的方法.分享给大家供大家参考.具体如下: 下面的代码控制指定的单元格靠底部垂直对齐 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html> <html>

word文档中绘制表格单元格内容居中的问题介绍

  方法/步骤 绘制表格很简单,"插入"--"表格". 文档中绘制表格单元格内容居中的问题介绍-word表格单元格不居中"> 在制作表格的时候,应该会遇到要居中吧. 这个很简单,点击一下"居中"的按钮即可. 而这个想把它居中在单元格中间不能按上面的方法.简单的可以回车,也可以调整单元格拉动,但有时会拉错,弄得更复杂. 我们可以选中需要居中的内容,右击"单元格对齐方式" 点击中间那个 ,就能居中了. 也可以把&q

wps表格单元格内容的移动与复制

一.wps表格的内容的移动   1.欲将区域1的内容移动到区域2中,如图1所示,这是本次移动的最终目标.     图1   2.拖动鼠标选中区域1,当然还有其他的选中方式,在这里就不赘述了.选中后待出现如图2红圈所示的标识,便按住鼠标拖动所选中的区域至区域2.     图2   3.拖动中的状态如图3所示:     图3   4.拖至区域2后松开鼠标,即可看到区域1已经成功移至区域2了.     图4   二.wps表格的内容的复制   1.欲将区域1中的内容复制到区域2中,如图5所示:    

JS实现控制表格内指定单元格内容对齐的方法

这篇文章主要介绍了JS实现控制表格内指定单元格内容对齐的方法,涉及javascript操作表格单元格内容样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS实现控制表格内指定单元格内容对齐的方法.分享给大家供大家参考.具体如下: 下面的代码控制表格单元格的内容向右对齐 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE html> <html> &l

ios-动态改变UITable单元格的高度？

问题描述 动态改变UITable单元格的高度? 我需要根据单元格的内容可以动态的修改单元格的高度,已经试了好几种方法,不知道有没有人可以提供能实现的方法?谢谢 解决方案 你可以试试下面的例子: - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {NSDictionary *itemAtIndex = (NSDictionary *)[chatQuestion