见一个可以想要几行就几行的表格:
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是一个强大的JavaScript库,专用于构建富客户端Web应用程序,尤其在创建交互式用户界面方面表现突出。动态生成表格是...
在IT领域,动态生成表格和跨框架交互是网页开发中的常见需求。动态表格允许开发者根据用户操作或服务器数据实时更新页面内容,而框架结构则能帮助组织和管理复杂的页面布局。下面将详细解释这两个概念以及如何实现...
在JavaScript(JS)中动态生成表格是一项常见的任务,特别是在网页交互和数据展示中。这篇文章将深入探讨如何利用JS实现这一功能,以及相关的源码和工具。 首先,我们要明白HTML表格的基本结构,它由`<table>`、`...
### Android开发之动态生成表格及其边框 #### 一、引言 在Android应用开发过程中,经常需要根据用户的操作或数据的变化动态地调整界面显示,其中动态生成表格及其边框是一项常见需求。本文将详细介绍如何在Android...
数据展示时候,经常从后台传入大小不等的矩阵。这里给出了根据不同矩阵大小,通过jquery的html()和append()方法动态生成html表格的实例。
04-动态生成表格案例.html
这是一个简单的js动态生成表格。。里面有三种生成表格的方法‘’‘’‘’‘’
动态生成删除表格,没有相关的数据库,主要是存在数组里面的数据来进行删除,设计的重点主要是对节点的操作
在IT行业中,动态生成表格是一种常见的需求,尤其是在Web开发领域。ASP(Active Server Pages)是微软推出的一种服务器端脚本语言,它允许开发者创建交互式的、动态生成的网页。随着技术的发展,ASP已经进化到ASP...
超全面javaweb第4天-_16_案例六动态生成表格
《docx4j 动态生成表格(一)》这篇博文主要探讨了如何使用docx4j库在Java环境中动态创建Word文档中的表格。docx4j是一个强大的开源Java库,它允许开发者对OpenXML格式(如.docx、.xlsx等)进行深度操作,包括创建、...
PHP 环境下动态生成表格 本文主要介绍了在 PHP 环境下动态生成表格的方法。表格的 HTML 代码中,<tr>...实际代表着表格的“行”,而介于<tr>...之间的代码标签<td>...等同于表格的“列”。在 PHP 环境下,我们要...
本资源"android表格控件动态生成表格源码"提供了一种解决方案,它基于Eclipse IDE,可以帮助开发者实现动态生成表格的功能,同时解决了表格内容显示不全的问题,通过集成滚动条确保所有数据都能被用户查看。...
在C#编程中,动态生成表格是一项常见的任务,特别是在网页应用、数据分析或报表展示等场景。本篇文章将详细解析如何使用C#实现动态生成表格的方法,以便为开发者提供实用的指导。 首先,我们需要理解动态生成表格的...
在IT行业中,动态生成表格是一项常见的需求,尤其是在数据展示、报表生成或用户交互场景下。本文将基于"动态生成表格工具类"这一主题,详细探讨如何利用Java编程语言来实现这样的功能。 首先,理解动态生成表格的...
这是一个动态生成表格的 HTML 页面,使用了 JavaScript 动态生成表格内容。这个表格显示了一组学生的成绩信息,包括姓名、科目和得分,并提供了删除操作。 在页面中,先声明了一个 table 元素,并设置了 id 为 ...
在JavaScript编程中,动态生成表格是一项常见的需求,特别是在网页交互设计中。本示例"js动态生成表格行列特效.zip"提供了实现这一功能的实例代码,包括HTML5、JavaScript和CSS三部分,允许开发者创建出具有视觉吸引...