DOM(七)使用DOM控制表格

1.插入一行

<script type="text/javascript">
window.onload=function(){
    var oTr = document.getElementById("member").insertRow(2);    //插入一行
    var aText = new Array();
    aText[0] = document.createTextNode("fresheggs");
    aText[1] = document.createTextNode("W610");
    aText[2] = document.createTextNode("Nov 5th");
    aText[3] = document.createTextNode("Scorpio");
    aText[4] = document.createTextNode("1038818");
    for(var i=0;i<aText.length;i++){
        var oTd = oTr.insertCell(i);
        oTd.appendChild(aText[i]);
    }
}
</script>

<table class="datalist" summary="list of members in EE Studay" id="member">
    <caption>Member List</caption>
    <tr>
        <th scope="col">Name</th>
        <th scope="col">Class</th>
        <th scope="col">Birthday</th>
        <th scope="col">Constellation</th>
        <th scope="col">Mobile</th>
    </tr>
    <tr>
        <td>isaac</td>
        <td>W13</td>
        <td>Jun 24th</td>
        <td>Cancer</td>
        <td>1118159</td>
    </tr>
    <tr>
        <td>girlwing</td>
        <td>W210</td>
        <td>Sep 16th</td>
        <td>Virgo</td>
        <td>1307994</td>
    </tr>
    <tr>
        <td>tastestory</td>
        <td>W15</td>
        <td>Nov 29th</td>
        <td>Sagittarius</td>
        <td>1095245</td>
    </tr>
</table>
时间: 2024-10-12 12:54:41

DOM(七)使用DOM控制表格的相关文章

轻松学习JavaScript二十三:DOM编程学习之操作表格

一使用HTML标签创建表格: 代码: <span style="font-size:18px;"><table border="1px"width="300px"> <caption>人员表</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th>

JavaScript学习 七、DOM

DOM(文档对象模型)是针对HTML和XML文档的一个API.DOM描绘了一个层次化的节点树.允许开发人员添加.移除.修改页面的某一部分. 节点层次 文档节点是每个文档的根节点,文档元素是文档的最外层元素,文档中其他说有的元素都包含在文档元素中,每个文档只能有一个文档元素,在HTML 中,文档元素始终是<html> 元素,在XML 中没有预定义的元素,因此任何元素都可能成为文档元素. 每一段标记都可以通过树中的一个节点来表示:HTML 元素通过元素节点表示,特性(attribute)通过特性节

JavaScript的BOM、DOM操作、节点以及表格(二)

BOM操作 一.什么是BOM BOM(Browser Object Model)即浏览器对象模型.     BOM提供了独立于内容 而与浏览器窗口进行交互的对象:     BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性: 二.BOM常用的对象 Screen对象:尺寸 window.screen; screen.width screen.height screen.availHeight//可用高度 = 可用高度-底部任务栏高度 screen.availWidth//可用宽度 L

第10章 DOM (2 DOM操作技术)

10.2 DOM操作技术 10.2.1 动态脚本 使用<script>元素可以向页面中插入JavaScript 代码,一种方式是通过其src 特性包含外部文件,另一种方式就是用这个元素本身来包含代码.而这一节要讨论的动态脚本,指的是在页面加载时不存在,但将来的某一时刻通过修改DOM 动态添加的脚本.跟操作HTML 元素一样,创建动态脚本也有两种方式:插入外部文件和直接插入JavaScript 代码. 动态加载的外部JavaScript 文件能够立即运行,比如下面的<script>元

DOM扩展:DOM API的进一步增强[总结篇-下]

本文承接<DOM扩展:DOM API的进一步增强[总结篇-上]>,继续总结DOM扩展相关的功能和API. 3.6 插入标记 DOM1级中的接口已经提供了向文档中插入内容的接口,但是在给文档插入大量HTML标记的时候操作还是很繁杂的,每次插入一个元素,不仅要调用创建元素和文本节点的接口,还要调用appendChild等向文档中添加元素的接口,而且在添加时还要按照正确的顺序.而如果使用插入标记的方法,直接向文档中插入HTML字符串,由执行环境自动解析HTML字符串并创建相应的节点并添加到文档中,这

【DOM】1.DOM优化

1.JS include :DOM BOM ECMA 2.Browser 分别独立实现dom & JS as if two isolated islands 3.JS操作DOM from the island to the other one 4.DOM性能 The bridges between islands,charge everytime passing by 尽量减少过桥次数 5.innerHTML vs dom method webkit:eg, chrome, dom>inne

走进DOM:HTML DOM

DOM(Document Object Model)即文档对象模型.针对HTML和XML 文档的API(应用程序接口). DOM描绘了一个层次化的节点树,执行开发者加入.移除和改动页面的某一部分.当然这样说有些笼统.咱们接着往下看. 一.认识DOM DOM 中的三个字母.D(文档)能够理解为整个Web载入的网页文档.O(对象)能够理解为类似window对象之类的东西.能够调用属性和方法,这里我们说的是document对象:M(模型)能够理解为网页文档的树型结构. 通过 JavaScript,您能

CSS控制表格嵌套

1. [图片] table.jpg ?2. [代码]用CSS处理表格嵌套完整代码 <style type="text/css">.form-table{    border-collapse:collapse;    border-spacing:0px;    border-style:solid solid solid solid;    border-width:1px;    border-color:#000000;}.form-table table{    b

10.1 控制表格

表格是网页上最常见的元素.在传统的网页设计中表格除了显示数据外,还常常被用采作为整个页面布局的手段.在Web标准逐渐深入设计领域以后,表格逐渐不再承担布局的任务,但是表格仍然都在网页设计中发挥着重要的作用. 本章继续挖掘 CSS的强大功能,让普普通通的表格也表现出精彩的一面. 表格作为传统的HTML元素,一直受到网页设计者们的青睬.使用表格米表示数据.制作词查表等应用在网络中屡见不鲜.同时因为表格框架的简单.明了,使用没有边框的表格来排版,也受到很多设计者的喜爱.本节主要介绍CSS控制表格的方法

AppBoxPro - 细粒度通用权限管理框架(可控制表格行内按钮)源码提供下载

特别声明: 提供的源代码已经包含了 AppBoxPro 的全部源代码,用 VS2012 打开项目后,直接 Ctrl+F5 可以运行起来(默认使用VS自带的LocalDB数据库). FineUIPro是商业程序,仅包含v1.7.0公测版的DLL:当然你也可以自行把 FineUIPro 换成 FineUI(开源版),开源版下载地址. AppBoxPro 是基于 FineUIPro 和 Entity Framework 的通用权限管理框架,包括用户管理.职称管理.部门管理.角色管理.角色权限管理等模块