用JavaScript为表格增删行数提交

本文介绍如何利用EasyUI库实现网页上表格的动态增删行功能,并通过JavaScript将表格内容整合为字符串形式,以便于通过表单提交至后台进行进一步处理。此方法适用于需要频繁更新表格内容的应用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<table id="table" align="center" width="100%">

    <tr id="trs">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    </tr>

</table>


按钮功能键用了easyUI的样式

<table align="center" width="100%" style="text-align:center;margin-top:1em;">

    <tr>
    <td style="border:0px">
    <a onclick="insertable()" class="easyui-linkbutton" data-options="iconCls:'icon-more'">增加行</a>
    </td>
    <td style="border:0px">
    <a onclick="inser()" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">提交</a>
    </td>
    <td style="border:0px">
    <a onclick="deleattr()" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除行</a>
    </td>
   </tr>
</table>


用了JS把各个input的内容拼接起来放入多行文本中  用form提交到后台  后台再进按字符拆分成数组  用于循环添加到数据库

<form id="subform" method="post" action="<%=path %>/huifang.do" >

  <textarea id="texts" name="bstr" style="display:none"></textarea>
</form>

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<script type="text/javascript" charset="utf-8">
  
    //增加一行
  function insertable(){
    $("#table").append("<tr><td style=''><input type='text'/></td><td><input type='text'/></td><td><textarea></textarea></td><td><textarea></textarea></td><td><textarea></textarea></td><td><textarea></textarea></td><td><textarea></textarea></td><td><textarea></textarea></td><td><textarea></textarea></td><td><textarea></textarea></td><td><textarea></textarea></td></tr>");
    }
    //提交信息
    function inser(){
    var columnsize  = document.getElementById("table").getElementsByTagName("tr").length;//获取总共有多少行
    var bstr=""; // 空字符串 用于接受拼接的字符串
    for(var i=1;i<columnsize;i++){
    var a = document.getElementById("table").rows[i].cells[0].childNodes[0].value;  //获取表格的第几行  第几列  第一个子节点的内容
    var b  = document.getElementById("table").rows[i].cells[1].childNodes[0].value;
    var c  = document.getElementById("table").rows[i].cells[2].childNodes[0].value;
    var d  = document.getElementById("table").rows[i].cells[3].childNodes[0].value;
    var e  = document.getElementById("table").rows[i].cells[4].childNodes[0].value;
    var f  = document.getElementById("table").rows[i].cells[5].childNodes[0].value;
    var g  = document.getElementById("table").rows[i].cells[6].childNodes[0].value;
    var h  = document.getElementById("table").rows[i].cells[7].childNodes[0].value;
    var j  = document.getElementById("table").rows[i].cells[8].childNodes[0].value;
    var k  = document.getElementById("table").rows[i].cells[9].childNodes[0].value;
    var l  = document.getElementById("table").rows[i].cells[10].childNodes[0].value;
    bstr+=a+" __"+b+" __"+c+" __"+d+" __"+e+" __"+f+" __"+g+" __"+h+" __"+j+" __"+k+" __"+l+" @@";   //用于字符串的拼接  后台用于拆分
    }
    var t = document.getElementById("texts"); 
    t.value = bstr;   //把拼接后的字符串放入多行文本域中 用于提交
    document.getElementById("subform").submit();  //表单提交
    }
    //删除一行
    function deleattr(){
    var columnarray = document.getElementById("table").getElementsByTagName("tr");        //获取到父节点tr为数组
    var columnsize  = document.getElementById("table").getElementsByTagName("tr").length; //统计有多少行
    if(columnsize>2){
    columnarray[columnsize-1].parentNode.removeChild(columnarray[columnsize-1]); //删除最后一行数组
    }
    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值