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

最新推荐文章于 2018-10-15 18:09:00 发布
最新推荐文章于 2018-10-15 18:09:00 发布
阅读量130 收藏
点赞数
分类专栏： javascript 文章标签： JavaScript XHTML CSS HTML ViewUI

<!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="生成输入框" οnclick="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
iteye_3224
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS@DOM：向表格中动态添加行显示信息，做到滚动效果
Waitforsniping的专栏
06-15 3695
最近在学习D3，很多时候都用到了表格，并且在js中动态地添加和删除表格，在这里总结一下js关于表格的操作： 首先要知道，js中没有提供关于列的操作，所以关于列的操作只能通过操作行来实现，比如获得列的数量，只能通过获得行的单元格数量来获得列数（这里也有缺陷，如果某个单元格设置了colspan属性，就会出错）。 table.rows.length//获得表格的行数 table.rows[0].c
js动态添加表(table、行).html
08-24
js动态添加表(table、行).html 点击可直接运行，或查看源码
js 添加表格的行
乐在其中/Leo在其中
04-12 125
function addRow(content)  {      //添加一行      var newTr = listTable.insertRow();      //添加一列      var newTd0 = newTr.insertCell();      //设置列内容和属性      newTd0.innerHTML = content;  }  &lt;input type=...
js与ajax页面动态添加表格,避免重复
tongjun_zhou的博客
03-28 516
js与ajax动态添加表格，并避免重复添加 New Document function test() { var html='AAABBBCCC' $.ajax({ type: 'POST', url: '$path/test!show.do', dataType:'JSON', success:function...
js简单的表格添加行和删除行操作.
怀揣梦想,永不止步.
03-30 3819
//创建一个html元素 function $c(tagname){ return document.createElement(tagname); } //文档加载完成后要执行的内容 $(document).ready(function(){ //绑定添加行按钮的单击事件 $("#addrow").bind("click",function(){ // 取得table var
js在不刷新的情况下动态添加表格行[脚本之家强烈推荐]
12-09
550)this.width=550;”> 动态添加表格行 添加产品品种数: 产品编号 产品名称 数量 单价 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
动态添加/删除表格行并提交内容到后台
07-19
动态添加/删除表格行并实现前后台的互动，用最基础的c#和js知识实现，可以作为新手参考。
VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）
11-21
而纵向添加的数据，因为没有事先在 el-select v-modle=”” 里面定义好字段，定义好的option是通过v-for出来的(option是写死的就不会有这个问题)，就会出现选择后，select元素上无法展示，但是其实数值已经绑定上去...
js表格刷新、全选、全不选、添加、拷贝、上下移动、删除行功能实现
08-12
对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术。 js刷新、复选框全选，全不选，添加，拷贝，上下移动，删除功能实现。
pyqt5 tablewidget 利用线程动态刷新数据的方法
01-20
问题 知道要用线程，所以就先尝试写了一个线程，...为了做出对比，我将作业名的表格填写改成table.setItem的方式，其他格子用信号量机制，可以很清楚的看到问题所在！！！！ 解决方法 核心是要通过qt的槽函数来发射信
javascript实现动态添加删除表格行
04-13
NULL 博文链接：https://1148130696.iteye.com/blog/1726191
js实现无刷新监听URL的变化的示例代码
10-15
主要介绍了js如何无刷新监听URL的变化,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
js如何动态添加表格行
热门推荐
weixin_42630877的博客
10-15 1万+
一、总结 方法一：添加可通过在table的innerHTML属性中添加tr和td来实现 方法二：通过table的属性insertRow()，deleteRow()来实现 方法一和方法二对比： 二、js如何实现动态的在表格中添加和删除行？ 1、插入删除行案例说明 2、用到table相关的属性和方法 三、代码   &gt;  一、总结（点击显示或隐藏总结内容） 1、ta...
使用JavaScript实现表格添加行
薄冰的专栏
12-29 1223
     var objtbl = document.all.tblTable;    function addRow(objEle)    {        if (objEle.value == "增加")  { alert(objtbl.rows.length);            Common(objtbl.rows.length);   }        else        {/
js添加table的行和列 具体实现方法
rrz634171的专栏
06-26 653
function addRow() {             var newTR = document.getElementById("testTable").insertRow(document.getElementById("testTable").rows.length);             var newNameTD = newTR.insertCell(0);       
页面表格实现不刷新排序 - javaScript
veverrr的专栏
05-29 1308
<br />页面表格实现不刷新排序<br />一．预备知识：<br />Javascript 的 sort(sortBy)方法：<br />sortBy( )规定排序规则，其必须是函数，而这个函数通常由我们根据排序规则自己进行编写。<br />arrayObject.sort(sortBy) :  数组对象调用带有sortBy 参数的sort() 方法，则会返回排序完成后的数组。<br />如果sort（）函数不加 sortBy 函数，即array.sort()  则对array 的元素按照字符编码的顺序进
更改select标签实现无刷新动态取值
分享
04-21 1401
/*  *动态选择JS代码  */ function getProduct(){ var pruductNo=$("#productsNo option:selected").text(); //获取select标签中选择的值 $.getJSON('/order/OrderController/getProductByNo?product='+pruductNo, function(
用JAVASCRIPT实现表格行自动增加，同时自动向上移动有数据的行，无数据的行向下移动
elimago的专栏
03-25 1797
//記入行数の選択function doSelectKey(){//alert("key>>>"+event.keyCode); if(event.keyCode != 9){  event.returnValue=false; }}//記入行マウスのスクロールfunction doSelectRoll(){ event.returnValue=false;} //システム日付の取得f
js 动态添加行，删除行，并获得select中值赋予 input
weixin_30470643的博客
06-20 100
<html><head> <title>Ace Test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script l...
HTML 表格 点击增加一行 自动添加行号并且刷新行号
最新发布
05-11
2. 在 JavaScript 中定义一个函数 `addRow()` ，用于在表格中添加一行，并更新行号。示例代码如下： ``` function addRow() { // 获取表格对象和 tbody 对象 var table = document.getElementById("myTable"); ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值