关闭

JavaScript实现动态添加页面的表格行数并获取数据

标签: javascript前端web
4028人阅读 评论(0) 收藏 举报
分类:

JavaScript实现动态添加页面的表格行数并获取数据,获取后的数据按照特殊的方式拼接存入数据库,用的时候再把它解析出来就行了。



<table cellpadding="0" cellspacing="0" id="myTable">
    <tr>
        <th>车型</th>
        <th>数量</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="text"  value=""  maxlength="255" placeholder="" title="车型" style="width:98%;"/></td>
        <td><input type="text"   value=""  maxlength="255" placeholder="" title="数量" style="width:98%;"/></td>
        <td><input type="hidden" id="reC" value="1" />
            <a class="btn btn-mini btn-info" onclick="addRows();">增加行</a>
            <a class="btn btn-mini btn-danger" onclick="saveTableValue();">表格数据</a>
        </td>
    </tr>
</table>
      function addRows() {
            //记录总共添加几行
            document.getElementById("reC").value = parseInt(document.getElementById("reC").value) + 1;//获取中的行数

            //添加一行
            var i = parseInt(myTable.rows.length);

            var newTr = myTable.insertRow();
            //添加列
            var newTd0 = newTr.insertCell();
            var newTd1 = newTr.insertCell();
            var newTd2 = newTr.insertCell();
            //设置列内容和属性

            newTd0.innerHTML = '<input type="text" id="dpDate' + i + '_dpDate' + i + '" style="width:98%;" title="车型" value="" />';
            newTd1.innerHTML = '<input type="text" id="txtR' + i + '_1" style="width:98%;" title="数量"  value=""/>';

            newTd2.innerHTML = '<input type="submit" class="btn btn-mini btn-warning"  value="删除该行" onclick="deleRow()" id="btnDele' + i + '" />';
//            saveTableValue();//保存值
            return false;
        }

        //删除一行
        function deleRow() {
            //获得行索引
            //两个parentElement分别是TD和TR,rowIndex是TR的属性
            var cGetRow = window.event.srcElement.parentElement.parentElement.rowIndex;
            alert("点击了第"+cGetRow);
            myTable.deleteRow(cGetRow);

//            saveTableValue();//保存值
            return false;
        }

        //保存表格中最新的值
        function saveTableValue() {

            var myTable = document.getElementById("myTable");
//            alert("表格总行数="+ parseInt(myTable.rows.length));

            tableValue="";
            for (var i=1;i<myTable.rows.length;i++){
                var value1 = myTable.rows[i].cells[0].getElementsByTagName("input")[0].value;//车辆类型
                var value2 = myTable.rows[i].cells[1].getElementsByTagName("input")[0].value;//派车数量
                var rowValue=value1+"_"+value2; //"_"来连接
                tableValue=tableValue+rowValue+"+";
            }

            alert("表格内拼接的值"+tableValue);

            $("#USECATTYPENUM").val(tableValue);//把表格的值付给input
        }

初始
这里写图片描述


添加数据后

这里写图片描述

1
0
查看评论

js实现表格行的动态添加

现代页面通常都是用div+css来进行设计,几乎很少再有用table来进行布局的了,但是这并不意味着table的重要性就降低了,事实上,table在数据处理上有着它独特的优势,所以对table的掌握还是很有必要的。 我们首先要记录的问题是:js动态的添加表格的行和列 我们先给定一个tab...
  • u012422446
  • u012422446
  • 2015-08-18 11:01
  • 5185

JavaScript动态添加/删除表格行

使用原生JavaScript来解决简单的table行动态增删问题
  • sqq0103
  • sqq0103
  • 2016-12-16 22:23
  • 1261

js 对表格的动态操作(动态添加行,删除该行,在指定位置添加控件)

*****************************************************************js动态添加表的列,并在列中添加控件的方法添加行function addrows(){ var table=document.getElementById(&q...
  • hongshan50
  • hongshan50
  • 2010-05-17 11:10
  • 18418

js实现动态添加表格的行

js实现动态添加表格的行
  • qq_15536303
  • qq_15536303
  • 2016-08-07 11:36
  • 749

js实现动态删除表格行和列

记录了动态添加表格的一行,当然这个一行是指一行数据,也就是说一行多少列也是加上的,并且第几列的内容都可以添加上,先来回顾下它的实现的关键点: 1、var row=table.insertRow();添加一行; 2、var cell1=row.insertCell();添加一个单元格;(如...
  • u012422446
  • u012422446
  • 2015-08-18 11:10
  • 5359

js动态添加表格的行与列

//动态添加行与列 function addHtml( )         {     var tab=document.getElementById("viewTabs"); //获得表格   ...
  • Long_carol
  • Long_carol
  • 2012-03-15 14:17
  • 12941

js动态添加表(table、行).html

  • 2010-08-24 12:17
  • 4KB
  • 下载

javascript 动态添加表格行

 javascript 动态添加表格行动态添加表格行 文/Ray表格部分代码如下:第一行第二行第三行动态添加表行的javascript函数如下:function addRow(){//添加一行var newTr = testTbl.insertRow();//添加两列var ne...
  • ajaxchen_615
  • ajaxchen_615
  • 2009-09-01 16:01
  • 5949

JavaScript实现动态添加表格中的行

  • 2009-03-27 15:04
  • 851B
  • 下载

Html+js实现表格可编辑,并能动态添加删除行

功能描述:单击页面使单元格td变成可编辑状态,输入内容后,当单元格失去焦点时,保存输入的内容。 点击增加行,在table的末尾增加一行;点击删除行,删除table中最末尾的一行。       ...
  • qqliang1314
  • qqliang1314
  • 2014-12-10 20:18
  • 11771
    个人资料
    • 访问:259413次
    • 积分:3984
    • 等级:
    • 排名:第9368名
    • 原创:163篇
    • 转载:0篇
    • 译文:0篇
    • 评论:72条
    博文声明
    博文主要参考网上资料,视频笔记,结合个人见解,仅供学习、交流使用,如有侵权,请联系博主删除。
    联系方式
    博客专栏