js在不刷新的情况下动态添加表格行
2015-12-13 13:43
597 查看
<!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>
相关文章推荐
- JavaScript 模块的循环加载实现方法
- Javascript实用方法二
- js数据类型检测方法(总结)
- javascript返回上一级(页)的方式
- JavaScript:验证input[type=‘text’]输入框动态数据
- json中的值类型及输出对象的所有名称和对应的值
- js-window对象的方法和属性资料
- javascript日期验证之输入日期大于等于当前日期
- JS+HTML5的Canvas画图模拟太阳系运转
- Javascript学习笔记-2(对象、函数)
- 详解JavaScript正则表达式之RegExp对象
- this详解:JAVASCRIPT中的this到底是谁?
- this详解:JAVASCRIPT中的this到底是谁?
- [ExtJs] ExtJs4.2 数据模型Ext.data.Model学习
- Javascript学习笔记-1(类型、变量、for语句、数组、字符串、原型对象、函数对象)
- javascript自执行函数
- this详解:JAVASCRIPT中的this到底是谁?
- js继承的实现
- this详解:JAVASCRIPT中的this到底是谁?
- 详解JavaScript基于面向对象之继承