`
lhy5201314
  • 浏览: 122957 次
  • 性别: 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数据库环境变量的配置及简单操作
评论
发表评论

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

相关推荐

    ajax实例实例实例

    首先，我们看到一个名为`DraggableTBHeader`的项目，这可能是一个实现了拖动表格表头功能的Ajax实例。在Web开发中，允许用户自由拖动表格列头以重新排序或调整列宽，可以极大地提高交互性和可操作性。 1. **Web....

    PHP+Ajax网站开发典型实例

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

    ASP.NET源码——动态添加表格实例.zip

    在这个“ASP.NET源码——动态添加表格实例.zip”压缩包中，包含了一个具体的示例，展示了如何在ASP.NET应用中动态创建和操作HTML表格。 在ASP.NET中，动态添加表格通常是通过后端代码（如C#或VB.NET）来实现的。这...

    jQuery生成SKU表格实例代码.zip

    3. **动态表格生成**：实例中可能会使用jQuery动态创建表格元素，包括`&lt;tr&gt;`（行）、`&lt;td&gt;`（单元格）等，以及根据用户选择动态添加或删除行。 4. **Ajax交互**：如果项目需要与服务器进行数据交换，jQuery的`$....

    JSP.Ajax网站开发典型实例

    1. **动态表格**：使用Ajax异步请求数据，JSP处理后返回，动态更新表格内容。 2. **分页显示**：通过Ajax获取不同页码的数据，无需每次点击分页按钮都刷新整个页面。 3. **表单验证**：客户端使用Ajax即时验证输入，...

    使用AJAX动态生成table表格数据和jquery.pagination.js 的分页栏

    在JavaScript中，我们可以创建一个新的XMLHttpRequest实例，然后设置其请求方法（GET或POST）、URL、以及是否异步执行。当请求发送到服务器后，我们可以通过监听`onreadystatechange`事件来处理服务器的响应。当`...

    Tablecloth漂亮的Ajax+CSS表格

    4. **自定义样式**：通过修改默认的CSS样式或创建新的样式类，可以进一步定制表格的外观，如字体、颜色、边框等。 5. **添加事件处理**：Tablecloth允许添加事件监听器，实现如点击、排序等交互功能。 ### ...

    extjs动态生成表格,前台+后台

    6. 动态生成：通过JavaScript代码动态创建ColumnModel和Store，从而实现表格的动态生成。 通过理解和掌握这些知识点，开发者可以构建出高度灵活、响应式的前端表格应用，同时充分利用后端数据源提供动态内容。

    ASP.NET-[其他类别]动态添加表格实例v1.0.zip

    在这个“ASP.NET-[其他类别]动态添加表格实例v1.0.zip”中，我们很显然会探讨如何在ASP.NET中动态地创建和管理表格。动态添加表格是Web开发中的常见需求，尤其是在处理大量数据或者需要用户交互时，比如表格的增删改...

    jQuery仿淘宝商品发布动态生成SKU表格实例代码

    本实例代码“jQuery仿淘宝商品发布动态生成SKU表格”着重于实现电商平台的商品发布功能，特别是如何动态生成包含不同组合的SKU（Stock Keeping Unit）表格。这个功能在电商网站中至关重要，因为它允许商家根据商品的...

    jquery表格操作实例

    例如，使用`$.ajax()`或`$.get()`可以向服务器请求数据，然后动态填充表格： ```javascript $.ajax({ url: "data.json", type: "GET", dataType: "json", success: function(data) { $.each(data, function...

    ajax WebService 对表格数据的异步获取和处理 实例.doc

    Ajax（Asynchronous JavaScript and XML）和WebService的结合使用使得网页可以在不刷新整个页面的情况下与服务器进行交互，从而实现动态更新表格数据。本实例将详细介绍如何利用Ajax技术与WebService进行表格数据的...

    Ajax程序开发经典实例随书源码

    1. **异步数据加载**：可能包括从服务器获取数据并在不刷新页面的情况下动态填充表格。 2. **表单验证**：使用Ajax即时验证用户输入，提供实时反馈，提高用户体验。 3. **分页和滚动加载**：当用户滚动页面时，自动...

    datatables使用ajax实例

    而`Ajax`则是异步JavaScript和XML的缩写，是Web开发中用于创建动态网页的关键技术。在本实例中，我们将深入探讨如何在datatables中整合Ajax，实现数据的动态加载和更新。 首先，了解`datatables`的基本使用。...

    Ajax高级程序设计实例

    在这个"Ajax高级程序设计实例"中，我们将深入探讨如何利用Ajax技术与ASP.NET框架相结合，实现高效、动态的Web应用程序。 **ASP.NET与Ajax结合** ASP.NET是由Microsoft开发的一种用于构建Web应用程序的框架，它提供...

    extjs动态表格实例(封装GRID,从STRUTS2读取后台数据 )

    在这个"extjs动态表格实例"中，我们将探讨如何使用ExtJS封装Grid并从Struts2框架的后台获取数据。 首先，让我们了解ExtJS中的Grid组件。Grid是ExtJS的一个关键组件，它用于展示结构化数据，并支持多种操作，如排序...

    Ajax编程技术与实例（光盘）

    5. **局部刷新**：如何利用Ajax更新表格、图片、下拉菜单等页面元素，而不重新加载整个页面。 6. **Ajax库的使用**：如jQuery、Prototype等库简化了Ajax的使用，书中可能包含这些库的Ajax操作示例。 7. **实战项目...

    jquery 动态增加删除表格. 实例

    本实例将深入探讨如何利用jQuery实现动态增加和删除表格行的功能，这对于创建数据表或者交互式表单来说非常实用。 首先，我们需要一个基本的HTML结构来展示表格。表格通常由`&lt;table&gt;`元素定义，每一行由`&lt;tr&gt;`元素...

    jQuery实现表格动态修改和隐藏 实例

    本实例将深入探讨如何使用jQuery来实现表格的动态修改和隐藏功能，这对于创建交互式用户界面至关重要。 首先，让我们理解jQuery的核心概念。jQuery通过封装JavaScript API，使得选择元素、操作元素、添加事件监听器...

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