这是一个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%"; |
这段代码动态创建一个tr和td,并在td中设置了一个onclick事件,但是事实却是当点击td时,并没有出发点击时间调用EditCell函数。后来吧td1.onclick = "EditCell()";改成td1.attachEvent("onclick",EditCell)才成功调用
时间: 2024-11-21 06:47:01