| 用JavaScript为表格增删行数提交 ( 2024-03-31 ) + ( 853 ) | | https://blog.csdn.net/jiyoo/article/details/67636433?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-67636433-blog-88560037.235^v43^pc_blog_bottom_relevance_base7&spm=1001.2101.3001.4242.2&utm_relevant_index=4 |
用JavaScript为表格增删行数提交
大白菜Y
于 2017-03-28 14:28:59 发布
阅读量200
收藏
点赞数
文章标签： javascript
版权
<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 οnclick="insertable()" class="easyui-linkbutton" data-options="iconCls:'icon-more'">增加行</a>
</td>
<td style="border:0px">
<a οnclick="inser()" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">提交</a>
</td>
<td style="border:0px">
<a οnclick="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]); //删除最后一行数组
}
}
大白菜Y
关注
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/jiyoo/article/details/67636433 |