`

使用JS创建table的高效方法

阅读更多
关键字: 使用js动态创建table
1,我有一个a.jsp页面
   a.jsp页面上有个按钮,点击需要弹出个一个对话框跳到b.jsp
   b.jsp页面上显示的数据,是根据a.jsp页面动态来取得的


a.jsp页面的button onclick()事件
//税额统计
function checkAmount()
{
window.showModalDialog("b.jsp?rad="+Math.random (), window ,"dialogHeight:300px;dialogWidth:1000px;dialogLeft:300px;dialogTop:330px;center:no;help:no;resizable:no;status:no;");  

}
对于showModalDialog其中的参数第一个参数rad是每次打开新窗口前随机生成的,那样就保证了每次的url是不一样的,那样在你的客户端缓存中就没有与之匹配的缓存记录了。

b.jsp页面需要获得a.jsp页面上的一些参数,然后显示在b.jsp页面上
获得参数列表方法:
var productCode = window.dialogArguments.document.getElementsByName ('productCode') ;  //产品代码
var desc = window.dialogArguments.document.form1.tt.value;
这样都可以取得a.jsp页面的参数的值

此时想在b.jsp显示一个table,该table是从a.jsp页面获取的一些参数的值然后拼凑的
可以在body 的onload()事件里面写个函数
js创建table
<SCRIPT LANGUAGE="JavaScript">
<!--
var _table = document.getElementById("_table");
var _row;
var _cell;

for(var i = 0; i < 1000; i++) {
_row = document.createElement("tr");
document.getElementById("_table").appendChild(_row);
for(var j = 0; j < 10; j++) {
_cell = document.createElement("td");
_cell.innerText = "222";
_row.appendChild(_cell);
}
}
//-->
</SCRIPT>


b.jsp页面body部分
<BODY>  
  <table width="100%" >  
    <tbody id="_table">  
    </tbody>  
  </table>  
</BODY>  

这样父页面的值就可以传到子页面,然后在子页面通过JS就可以动态的创建table了。
注意关闭时候,在b.jsp页面加个button 对其onclick事件window.close()就OK了
分享到:
评论

相关推荐

    table 使用js 高效 动态添加行

    在网页开发中,表格(Table)是展示数据的常用元素,而JavaScript(js)则提供了强大的功能来操作DOM(文档对象模型),包括动态地向表格中添加行。本篇文章将详细探讨如何使用JavaScript高效地实现表格动态添加行,...

    【JavaScript源代码】vue 中使用 vxe-table 制作可编辑表格的使用过程.docx

    本文将详细介绍如何使用`vxe-table`库来创建一个高效的可编辑表格,以解决类似的问题。 首先,`vxe-table`是一个功能强大的表格组件,相比Element UI的`el-table`,它提供了更多高级特性,如动态渲染、高性能以及...

    dwr城市选择的联动,util.js方法的使用,动态table

    总结起来,"dwr城市选择的联动,util.js方法的使用,动态table"涉及的技术主要包括DWR框架、JavaScript DOM操作以及服务器端与客户端的数据交互。这些技术的综合运用,可以创建出高效、实时的Web应用,满足用户对...

    bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例

    总的来说,`bootstrap-table`结合`bootstrap-editable`插件,提供了一种高效的方法来创建交互式、功能丰富的表格,特别是当需要在表格中实现下拉框编辑时。这种技术在数据管理、报表展示和用户输入场景中非常有用,...

    bootstrap table editable js

    总的来说,Bootstrap Table Editable JS 提供了一种高效且用户友好的数据管理解决方案,尤其适用于需要在前端进行数据编辑和管理的应用场景。通过灵活的配置和丰富的API,开发者可以定制出满足特定需求的表格,提升...

    bootstrap table-js.rar

    Bootstrap Table是一款基于Bootstrap框架的动态数据表格插件,它提供了丰富的功能,如排序、过滤、分页、自定义列等,极大地...同时,不断学习和理解Bootstrap Table的API和配置选项,将有助于你更高效地使用这个工具。

    js-table-sorter(纯js实现点击表头排序)

    - **初始化表格**:在JavaScript中,找到需要排序的表格元素,并调用`js-table-sorter`的初始化方法,如`table.init()`。 - **配置选项**:`js-table-sorter`提供了丰富的配置项,可以设置默认排序列、排序方向、...

    js-table分页

    `js-table`可能是指一个专门处理JavaScript表格和分页的库,虽然没有提供具体的库名称,但我们可以探讨一下JavaScript中实现表格分页的一般方法和相关的Java知识点。 在前端开发中,JavaScript通常用于创建动态和...

    一个用于将JSON数据转换为Table的JavaScript库

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,被广泛用于Web应用程序之间传递数据。在前端开发中,我们经常需要将从...了解和掌握这个库的使用方法,将有助于你在实际项目中更有效地处理数据展示。

    EasyTable.js插件1.0

    EasyTable.js插件1.0是一款专为HTML页面前端表格布局设计的JavaScript工具,它旨在简化和优化网页中表格的创建和管理。在HTML中,表格的构建通常涉及大量繁琐的HTML标记,而EasyTable.js则通过提供简洁的API,使得...

    D3.JS 基于javascript的图表展示库<四>----基本元素选择与Table

    2. **创建表格结构**:接着,使用`append()`方法创建表格的基本结构,包括`&lt;table&gt;`、`&lt;thead&gt;`、`&lt;tbody&gt;`等元素。在`&lt;thead&gt;`中,可以创建表头`&lt;th&gt;`来表示数据列的名称。 3. **创建行和单元格**:在`&lt;tbody&gt;`内...

    js 实现根据数组分组动态生成table(合并相同项)

    可以使用`document.createElement`方法创建`&lt;table&gt;`、`&lt;thead&gt;`、`&lt;tbody&gt;`等元素,并通过`innerHTML`设置单元格内容。同时,我们需要处理合并相同项的问题,这可以通过计算`rowspan`属性来实现。以下是一个简单的...

    原生js table表格插件制作表格自动排序效果

    这里涉及到数组的排序算法,例如冒泡排序、选择排序或快速排序,但考虑到性能,可以使用JavaScript内置的`sort`方法,它接受一个比较函数作为参数。 比较函数应根据表格数据类型进行设计。如果数据是数字,可以直接...

    javascript Table排序

    本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先,我们需要理解HTML `&lt;table&gt;`元素的基本结构。一个表格由`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;th&gt;`(表头)和`&lt;td&gt;`(单元格)组成。在JavaScript中,我们...

    javascript清空table表格的方法

    JavaScript清空table表格的方法 在开发Web应用时,经常需要对表格数据进行动态操作,包括清空表格中的所有数据。在JavaScript中,可以通过多种方法来清空一个HTML的table元素。本文将详细介绍几种常见的清空table...

    table JS 添加行和删除行

    在本话题中,我们将深入探讨如何使用JavaScript来添加和删除HTML表格(table)中的行。这对于构建数据展示或者管理界面非常实用。 首先,让我们了解HTML表格的基本结构。一个简单的HTML表格由`&lt;table&gt;`标签定义,每...

    js动态生成table

    1. **创建表格**:首先,你需要在HTML中设置一个空的表格容器,然后使用JavaScript创建表格元素。 ```javascript var table = document.createElement('table'); var thead = document.createElement('thead'); var...

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

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

    jQuery实现动态给table赋值的方法示例

    最后,我们使用`appendTo()`方法将新创建的行添加到表格的tbody部分。 通过这种方式,我们可以利用jQuery动态地生成表格,而无需在HTML中硬编码数据。这种方法的优点在于,当数据源发生变化时,只需更新JavaScript...

    javascript动态生成table及处理.

    ### JavaScript 动态生成 Table 及处理 在现代 Web 开发中,动态生成 HTML 元素是一种非常实用的技术,尤其当涉及到数据展示时,如表格(`&lt;table&gt;`)。通过 JavaScript 动态生成表格可以更加灵活地管理和更新数据。...

Global site tag (gtag.js) - Google Analytics