`
xhs10195
  • 浏览: 3315 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

动态生成表格

阅读更多
见一个可以想要几行就几行的表格:
html代码:
<table cellpadding="0" width="100%" cellspacing="0">
    <thead>
    <tr>
    <td class="td_border1" align="center">机头号</td>
    <td class="td_text_border" align="center">存货型号</td>
    <td class="td_border" align="center"> 存货代码</td>
    <td class="td_border" align="center">外包装及机台新旧程度</td>
    <td class="td_border" align="center">退回原因</td>
    </tr>
    </thead>
    <tbody id="hbody">
    <td class="td_border1" align="center">1:<input type="text" name="headCode1" id="headCode1" class="texts" style="width: 96;"></td>
    <td class="td_border" align="center">
    <input class="texts" type="text" readonly="readonly" style="width: 110;" name="stockType1" id="stockType1">
<input type="button" value="..." class="buttons" onclick="openStock(1);" />
</td>
<td class="td_border2" align="center">
<input class="texts" type="text" readonly="readonly" name="stockCode1" id="stockCode1" style="width: 100;">
<input type="hidden" name="stockId1" id="stockId1">
</td>
   <td class="td_border" align="center"><input type="text" name="oldnewPercent1" id="oldnewPercent1" class="texts" style="width: 120;"></td>
   <td class="td_border" align="center"><input type="text" name="backReason1" id="backReason1" class="texts" style="width: 200;"></td>
    </tbody>
    </table>

js代码:
function addhrows(){
var num=document.getElementById("backNumber").value;
var hbody=document.getElementById("hbody");
var nums = parseInt(num);
DWRUtil.removeAllRows("hbody");
for(var i=1;i<= nums ;i++){

var hrow=hbody.insertRow();
hrow.align="center";

var htdhc=hrow.insertCell();
var htdst=hrow.insertCell();
var htdsc=hrow.insertCell();
var htdonp=hrow.insertCell();
var htdbr=hrow.insertCell();

htdhc.className = "td_border1";
htdst.className = "td_border";
htdsc.className = "td_border2";
htdonp.className = "td_border";
htdbr.className = "td_border";

htdhc.innerHTML= i +":<input type='text' name='headCode"+ i +"' id='headCode"+ i +"' class='texts' style='width: 96;'>";
htdst.innerHTML="<input class='texts' type='text' readonly='readonly' style='width: 110;' name='stockType"+ i +"' id='stockType"+ i +"'><input type='button' value='...' class='buttons' onclick='openStock("+i+");' />";
htdsc.innerHTML="<input type='text' name='stockCode"+ i +"' id='stockCode"+ i +"' style='width: 100;' class='texts'><input type='hidden' name='stockId"+ i +"' id='stockId"+ i +"'>";
htdonp.innerHTML="<input type='text' name='oldnewPercent"+ i +"' id='oldnewPercent"+ i +"' style='width: 120;' class='texts'>";
htdbr.innerHTML="<input type='text' name='backReason"+ i +"' id='backReason"+ i +"' style='width: 200;' class='texts'>";
}
}

如上,提交虽然是动态生成的数据表格,但后台依然可以准确的获得每一行的数据。依次方法,动态生成任意形状的表格应不难实现。
分享到:
评论

相关推荐

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

    在本文中,我们将深入探讨如何使用ExtJS框架在前端动态生成表格,并结合后端数据进行展示。ExtJS是一个强大的JavaScript库,专用于构建富客户端Web应用程序,尤其在创建交互式用户界面方面表现突出。动态生成表格是...

    最简单的动态生成表格并实现不同框架打印

    在IT领域,动态生成表格和跨框架交互是网页开发中的常见需求。动态表格允许开发者根据用户操作或服务器数据实时更新页面内容,而框架结构则能帮助组织和管理复杂的页面布局。下面将详细解释这两个概念以及如何实现...

    js动态生成表格

    在JavaScript(JS)中动态生成表格是一项常见的任务,特别是在网页交互和数据展示中。这篇文章将深入探讨如何利用JS实现这一功能,以及相关的源码和工具。 首先,我们要明白HTML表格的基本结构,它由`&lt;table&gt;`、`...

    Android开发之动态生成表格及其边框

    ### Android开发之动态生成表格及其边框 #### 一、引言 在Android应用开发过程中,经常需要根据用户的操作或数据的变化动态地调整界面显示,其中动态生成表格及其边框是一项常见需求。本文将详细介绍如何在Android...

    jquery实现动态生成表格

    数据展示时候,经常从后台传入大小不等的矩阵。这里给出了根据不同矩阵大小,通过jquery的html()和append()方法动态生成html表格的实例。

    04-动态生成表格案例.html

    04-动态生成表格案例.html

    三种js 动态生成表格的方法

    这是一个简单的js动态生成表格。。里面有三种生成表格的方法‘’‘’‘’‘’

    案例:动态生成表格.html

    动态生成删除表格,没有相关的数据库,主要是存在数组里面的数据来进行删除,设计的重点主要是对节点的操作

    动态生成表格(ASP)

    在IT行业中,动态生成表格是一种常见的需求,尤其是在Web开发领域。ASP(Active Server Pages)是微软推出的一种服务器端脚本语言,它允许开发者创建交互式的、动态生成的网页。随着技术的发展,ASP已经进化到ASP...

    超全面javaweb第4天- 16 案例六动态生成表格

    超全面javaweb第4天-_16_案例六动态生成表格

    docx4j 动态生成表格 (一 )

    《docx4j 动态生成表格(一)》这篇博文主要探讨了如何使用docx4j库在Java环境中动态创建Word文档中的表格。docx4j是一个强大的开源Java库,它允许开发者对OpenXML格式(如.docx、.xlsx等)进行深度操作,包括创建、...

    PHP环境下动态生成表格

    PHP 环境下动态生成表格 本文主要介绍了在 PHP 环境下动态生成表格的方法。表格的 HTML 代码中,&lt;tr&gt;...实际代表着表格的“行”,而介于&lt;tr&gt;...之间的代码标签&lt;td&gt;...等同于表格的“列”。在 PHP 环境下,我们要...

    android表格控件动态生成表格源码

    本资源"android表格控件动态生成表格源码"提供了一种解决方案,它基于Eclipse IDE,可以帮助开发者实现动态生成表格的功能,同时解决了表格内容显示不全的问题,通过集成滚动条确保所有数据都能被用户查看。...

    C#实现动态生成表格的方法

    在C#编程中,动态生成表格是一项常见的任务,特别是在网页应用、数据分析或报表展示等场景。本篇文章将详细解析如何使用C#实现动态生成表格的方法,以便为开发者提供实用的指导。 首先,我们需要理解动态生成表格的...

    动态生成表格工具类

    在IT行业中,动态生成表格是一项常见的需求,尤其是在数据展示、报表生成或用户交互场景下。本文将基于"动态生成表格工具类"这一主题,详细探讨如何利用Java编程语言来实现这样的功能。 首先,理解动态生成表格的...

    JavaScript动态生成表格案例

    这是一个动态生成表格的 HTML 页面,使用了 JavaScript 动态生成表格内容。这个表格显示了一组学生的成绩信息,包括姓名、科目和得分,并提供了删除操作。 在页面中,先声明了一个 table 元素,并设置了 id 为 ...

    js动态生成表格行列特效.zip

    在JavaScript编程中,动态生成表格是一项常见的需求,特别是在网页交互设计中。本示例"js动态生成表格行列特效.zip"提供了实现这一功能的实例代码,包括HTML5、JavaScript和CSS三部分,允许开发者创建出具有视觉吸引...

Global site tag (gtag.js) - Google Analytics