`
lhy5201314
  • 浏览: 121050 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

AJAX动态创建表格实例

AjaxJavaHTML 
阅读更多
初学AJAX,把一些学习的点滴记录下来!以备以后参考 

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用DOM创建HTML表格</title>
<script type="text/javascript">
 function start(){
 //获取body标签
   var body = document.getElementsByTagName("body")[0];
   //创建一个<table>元素和一个<tbody>元素
    table = document.createElement("table");
    tablebody = document.createElement("tbody");
   // 将<tablebody>元素添加到<table>
    table.appendChild(tablebody);
    body.appendChild(table);
    //将表格table的border属性设置为2
    table.setAttribute("border","2");
 }
 function insertRow(){
  //创建一个<tr>
   current_row = document.createElement("tr");
    //创建一个<td>
   current_cell = document.createElement("td");
   //创建一个文本结点
   currenttext = document.createTextNode("单元格");
   //将创建的文本结点添加到<td>里面
   current_cell.appendChild(currenttext);
   //将创建的<td>添加到<tr>里面
   current_row.appendChild(current_cell);
   //将<tr>添加到<tbody>
   tablebody.appendChild(current_row);
 
 }
</script>
</head>
<body onload="start()">
  <input type="button" onclick="insertRow()" value=增加行>
</body>
</html>
分享到：
| Derby数据库环境变量的配置及简单操作
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery+ajax实现动态添加表格tr td功能示例

    主要介绍了jQuery+ajax实现动态添加表格tr td功能,结合实例形式分析了jQuery基于ajax动态创建页面table元素相关操作技巧,需要的朋友可以参考下

    PHP+Ajax网站开发典型实例

    实例49 客户端以表格形式显示数据 实例50 服务器端自动生成XML文件 实例51 客户端以指定CSS样式显示数据 实例52 用户登录校验 实例53 页面自动刷新时间 实例54 实现新闻滚动播放 第7章 实现高级Ajax技术 实例...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    12.7.htm 使用Ajax动态改变局部元素样式 CSSmenu 使用Ajax+CSS实现动态菜单效果 第13章（/C13/） 13.1.xml 一个简单的xml文件 13.1.xsl 使用XSLT将XML转换为HTML 13.2.xml ...

    jQuery ajax动态生成table功能示例

    主要介绍了jQuery ajax动态生成table功能,结合具体实例形式分析了jQuery基于ajax数据交互动态创建table表格的相关操作技巧,需要的朋友可以参考下

    【卷一/共两卷】AJAX实战pdf高清版90M

    第四部分 Ajax实例研究 第9章 动态双组合功能 9.1 双组合脚本 9.1.1 客户端解决方案的局限性 9.1.2 服务器端解决方案的限制 9.1.3 基于Ajax的解决方案 9.2 客户端架构 9.2.1 设计表单 9.2.2 设计客户端/服务器端交互...

    程序天下:JavaScript实例自学手册

    9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的交替行颜色 9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# ...

    AJAX 源码范例

    05/5.11.12.html 下拉框实例：二级联动的下拉列表菜单 &lt;br&gt;第6章 06/6.1.3.html 使用方括号（[]）引用对象的属性和方法范例 06/6.1.5.html 使用大括号（{}）语法创建无类型对象范例 ...

    《程序天下：JavaScript实例自学手册》光盘源码

    9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的交替行颜色 9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# ...

    JavaScript实例精通

    JavaScript实例精通 1．本书1~20章所附代码的运行环境 操作系统：Windows 2003、Windows XP Professional，或者Windows 2000 开发环境：、Dreamwave、Notepad、UltraEdit，或者其他文本编辑器 Web服务器：IIS 5.1及...

    精通CSS+DIV网页样式与布局视频教材

    6.3　表格实例二：鼠标经过时变色的表格 6.4　表格实例三：日历 6.5　CSS与表单 6.5.1　表单中的元素 6.5.2　像文字一样的按钮 6.5.3　七彩的下拉菜单 6.6　综合实例一：直接输入的Excel表格 6.7　...

    JAVA上百实例源码以及开源项目源代码

    　一个Java+ajax写的登录实例，附有JAVA源文件，JAVA新手朋友可以学习一下。 JAVA+JSP的聊天室 8个目标文件 简单 JavaScript万年历 显示出当前时间及年份，还可以选择年份及月份和日期 Java编写的HTML浏览器 一个...

    JAVA上百实例源码以及开源项目

    　一个Java+ajax写的登录实例，附有JAVA源文件，JAVA新手朋友可以学习一下。 JAVA+JSP的聊天室 8个目标文件 简单 JavaScript万年历 显示出当前时间及年份，还可以选择年份及月份和日期 Java编写的HTML浏览器 一个...

    java源码包---java 源码 大量 实例

    　一个Java+ajax写的登录实例，附有JAVA源文件，JAVA新手朋友可以学习一下。 JAVA+JSP的聊天室 8个目标文件 简单 JavaScript万年历 显示出当前时间及年份，还可以选择年份及月份和日期 Java编写的HTML浏览器 一...

    《JavaScript实例精通》[源代码]

    18_1.htm 动态表格和动态表单。 18_2.htm 输入框获得焦点、点击、划过时全选。 18_3.htm CSS 样式表动态选择。 18_4.htm jQuery的选择器之变态演示。 18_5.htm 让链接打开一个新窗口。 18_6.htm 键盘...

    jQuery完全实例.rar

    动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中。在这个函数的内部，是通过临时创建一个元素，并将这个元素的 innerHTML 属性设置为给定的标记字符串，来实现标记到 DOM 元素转换的。所以...

    最新Python3.5零基础+高级+完整项目（28周全）培训视频学习资料

    主机管理项目动态调用插件进行数据解析 主机管理项目对模块中的参数进行解析 第24周 本节题纲 上节内容回顾 ModelForm操作及验证 ajax操作-原生ajax ajax操作-JQuery的ajax ajax操作-伪ajax（iframe） ajax操作-...

    EXTJS 3.0中文版文档+实例

    ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。 功能丰富，无人能出其右。 无论是界面之美，还是功能之强，ext的表格控件都高居榜首。 单选行，多选行，高亮显示选中的行，拖拽...

Magicbox
Global site tag (gtag.js) - Google Analytics