`
txf2004
  • 浏览: 7065755 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

在不刷新的情况下动态添加表格行

阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<style type="text/css">
<!--
td{width:300px;text-align:center;margin:0px;padding:0px}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
function show(){
var num=document.getElementById("test").getElementsByTagName("input")[0].value;
var y=parseInt(num);
for(var i=0;i<y;i++){
var strS='<table cellpadding="0" cellspacing="0" border="1px solid black"><tr><td><select style="width:102px"><option>选择产品编号</option></select></td><td><input type="text" style="width:99px" /></td><td><input type="text" style="width:100px" />(数字)</td><td><input type="text" style="width:100px" /></td></tr></table>';
document.getElementById("change").innerHTML+=strS;
}
}
//-->
</script>
<div id="test">
添加产品品种数:<input type="text" name="text" value="" />
<input type="button" name="submit" value="生成输入框" onclick="show()" />
</div>
<table cellpadding="0" cellspacing="0" border="1px solid #ccc">
<tr style="background-color:#009999">
<td>产品编号</td>
<td>产品名称</td>
<td>数量</td>
<td>单价</td>
</tr>
</table>
<div id="change">
</div>
</body>
</html>

http://www.corange.cn//uploadfiles/06_163214_1111_24488.jpg
分享到:
评论

相关推荐

    动态添加/删除表格行并提交内容到后台

    在动态添加表格行的场景中,JavaScript可以监听用户的操作,如点击按钮,然后在HTML表格中插入或移除行。以下是一个简单的示例: ```html 内容 &lt;td&gt;&lt;button onclick="addRow()"&gt;添加&lt;/button&gt;&lt;/td&gt; &lt;td&gt;...

    javascript动态添加表格数据行

    这个功能允许用户在不刷新整个页面的情况下添加新的记录,提高了用户体验。在这个例子中,我们将探讨如何利用JavaScript在HTML表格中实现动态添加行,并将数据提交到服务器进行存储。 首先,我们需要创建一个基本的...

    jquery表格动态添加删除行代码.zip

    这个代码实现了一个功能,即在表格中动态地添加和删除行,这对于数据展示和编辑是非常实用的。 首先,让我们了解一下这个功能的核心概念: 1. **HTML结构**:基础的HTML表格由`&lt;table&gt;`元素定义,包括`&lt;thead&gt;`...

    表格动态插入行

    在网页开发中,表格是一种常见的数据展示方式,而动态插入行是提高用户体验和交互性的重要技术。本知识点主要探讨如何使用JavaScript(简称JS)来实现表格动态插入行的功能。JavaScript是一种广泛使用的客户端脚本...

    安卓开发-android动态添加表格行.zip

    在Android开发中,动态添加表格行是一个常见的需求,特别是在创建数据展示或用户输入的应用场景中。这个压缩包“安卓开发-android动态添加表格行.zip”很可能包含一个示例项目,演示了如何在Android应用中实现这一...

    js在不刷新的情况下动态添加表格行[脚本之家强烈推荐]

    在不刷新页面的情况下,利用JavaScript动态地向网页表格中添加行是一项非常实用的技术,它可以使网页与用户的交互更加流畅,提高用户体验。在本知识点中,我们将重点解析如何实现这一功能,并将详细介绍其背后的原理...

    Android高级应用源码-android动态添加表格行.zip

    在Android开发中,动态添加表格行是一个常见的需求,特别是在创建数据展示或者用户输入表单时。这个"Android高级应用源码-android动态添加表格行.zip"压缩包提供的示例项目,`TableLayoutDemo`,旨在帮助开发者理解...

    Ajax动态表格,可适时添加行、删除行、复制行

    它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容,从而提供了更好的用户体验。本话题将深入探讨如何实现一个动态表格,用户可以适时添加、删除和复制表格中的行。 首先,我们需要理解...

    jQuery不刷新分页动态数据表格代码.zip

    本资源“jQuery不刷新分页动态数据表格代码”是针对网页开发中的一个常见需求——实现数据表格的分页功能,且无需页面整体刷新。这种功能对于提高用户体验至关重要,特别是在处理大量数据时。 首先,我们要理解...

    js表格刷新、全选、全不选、添加、拷贝、上下移动、删除行功能实现

    本示例主要涉及了六个关键功能:表格的刷新、复选框的全选与全不选、行的添加、拷贝、上下移动以及删除。以下是对这些功能的详细解释: 1. **表格刷新**: 刷新表格通常是为了更新表格中的数据,这可能是因为后台...

    QT5.5 动态刷新tabview

    在QT5.5框架下,实现表格控件QTableView的动态刷新是一项常见的需求,尤其是在处理大量数据时,为了保持界面的流畅性,我们通常会采用异步更新的方式,即多线程来实现实时更新。本教程将深入探讨如何在QT5.5中通过多...

    jquery插件,基于jquery的表格控件无刷新实现添加编辑删除统计功能

    - 添加:用户填写新数据后,使用Ajax提交到服务器,成功后在表格末尾插入新行。 - 编辑:选中某行后,显示可编辑字段,编辑完成后同样使用Ajax更新服务器数据,再刷新对应行。 - 删除:点击删除按钮,确认后发送...

    .net动态添加行

    标题中的".net动态添加行"指的是在.NET框架中,特别是在ASP.NET环境中,如何在网页上动态地添加表格(如HTML表格或GridView等)的行。这种功能常用于数据输入场景,用户可以一次处理多条记录,提高用户体验,尤其是...

    树形表格菜单 动态添加节点/动态删除节点/动态移动节点

    10.树状结构可以选择出现在某一列,不一定要在第一列 11.支持theme,纯css定制表格树,可以自由定制theme,包括图标/节点大小等 12.表格树从右到左显示 13.本地节点搜索,服务器端节点搜索(未实现待完成) 14.无变化重新...

    jQuery表格添加行数据代码.zip

    在这个"jQuery表格添加行数据代码"中,我们主要关注的是如何利用jQuery来动态地向表格中添加、编辑和删除行数据。这个压缩包包含了一些关键文件,如CSS样式文件、HTML页面、JavaScript脚本以及说明文件。 首先,`...

    Layui表格行添加编辑删除操作和保存数据代码.zip

    本资源“Layui表格行添加编辑删除操作和保存数据代码.zip”包含了一个完整的示例,演示了如何在Layui表格中实现动态的行添加、编辑和删除功能,并且将这些操作与数据保存相结合。下面我们将详细探讨这些知识点。 ...

    javascript页面表格实现不刷新排序的例子

    本示例"javascript页面表格实现不刷新排序的例子"正是针对这一需求,通过JavaScript技术来实现在不刷新页面的情况下对表格数据进行排序。 首先,JavaScript是网页动态效果的核心,它可以在浏览器端运行,为网页添加...

    自动增加行的动态表格

    它会包含处理用户交互、动态添加表格行的函数,可能使用了DOM操作、事件监听等技术。 综合这些信息,创建自动增加行的动态表格通常需要以下步骤: 1. **HTML结构**:在`MainPage.html`中,设置一个基本的HTML表格...

    jquery添加表格行

    使用jQuery添加表格行,可以先创建一个新的`&lt;tr&gt;`元素,然后将它插入到表格中。以下是一个简单的示例: ```javascript // 创建新行 var newRow = $("&lt;tr&gt;&lt;td&gt;新数据1&lt;/td&gt;&lt;td&gt;新数据2&lt;/td&gt;&lt;/tr&gt;"); // 将新行插入...

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

    使用UpdatePanel或jQuery AJAX,可以在不刷新整个页面的情况下动态更新表格内容,提供更快的响应速度。 5. **用户交互**: 动态表格通常会伴随着用户交互功能,比如添加、删除行,或者编辑单元格内容。在ASP.NET中...

Global site tag (gtag.js) - Google Analytics