HTML-table单行操作

<div class="row m-b-sm m-t-sm" style="padding-top: 10px;"><div class="col-sm-12 form-horizontal"><label class="col-sm-2 control-label">具体事项</label><br/><div class="col-sm-10 col-sm-offset-1" style="padding: 2px;"><span style="padding:3px 5px;border-radius:3px;background-color:#e7f7ff;border:solid 1px #90d3ff;color:#6e6f6f;cursor:pointer;"><i class="fa fa-exclamation-circle text-info"></i>已选择<span id="item-rows-count"></span>项总价：<span id="item-money-count"></span>万</span><div style="float: right;"><button class="btn btn-primary" type="button" id="icon-add" onclick="add_tr();"><i class="fa fa-plus"></i><span class="bold"> 新增事项</span></button><button class="btn btn-danger" type="button" id="icon-delete" onclick="del_tr();"><i class="fa fa-remove"></i><span class="bold"> 删除事项</span></button></div>                             </div></div><div class="col-sm-12 form-horizontal"><div class="col-sm-10 col-sm-offset-1"><table class="table table-bordered" id="items_table" style="background-color: #eee;"><thead><tr style="height: 30px"><th width="8%"></th><th width="30%">事项</th><th width="22%">资金计划（元）</th><th width="40%">备注</th></tr></thead><tbody id="items_table_body"><tr id=""><td><label class="checkbox-inline i-checks"><input type="checkbox" name="checkbox_index" value="1"><span style="margin-left: 5px;">1</span></label></td><td><input name="itemName" value="事项1"></td><td><input name="itemCash" value="资金计划（元）1"></td><td><input name="mark" value="备注1"></td></tr><tr id=""><td><label class="checkbox-inline i-checks"><input type="checkbox" name="checkbox_index" value="2"><span style="margin-left: 5px;">2</span></label></td><td><input name="itemName" value="事项2"></td><td><input name="itemCash" value="资金计划（元）2"></td><td><input name="mark" value="备注2"></td>                                         </tr>                                     </tbody></table>                                    </div></div>
</div>

点击事件（按钮）

1.新增事项 javascript:add_tr()

获取table的DOM元素，document.getElementById('items_table')
DOM.rows
rows.length
变量_tr_html为单行的innerHTML
jQuery操作$(selector).append(""),这边默认的是<tbody></tbody>

function add_tr(){var tb = document.getElementById('items_table');    // table 的 idvar rows = tb.rows;                           // 获取表格所有行var index=rows.length;var _tr_html='<tr id="">'+'<td><label class="checkbox-inline i-checks"><input type="checkbox" name="checkbox_index" value="'+index+'"><span style="margin-left: 5px;">'+index+'</span></label></td>'+'<td>事项'+index+'</td>'+'<td>资金计划（元）'+index+'</td>'+'<td>备注'+index+'</td>'+'</tr>';$("#items_table_body").append(_tr_html);
}

2.删除事项 javascript:del_tr()

获取勾选行
遍历删除选中行
重置索引值，表的第一列1，2，3...

function del_tr(){$('input[name="checkbox_index"]:checked').each(function(index,element){$('#items_table_body').children().eq(this.value-1-index).remove();})resetFilesIndex();//重置索引
}
function resetFilesIndex(){var tb = document.getElementById('items_table');    // table 的 idvar rows = tb.rows;                           // 获取表格所有行for (var i = 1; i < rows.length; i++) {var _td_html='<label class="checkbox-inline i-checks"><input type="checkbox" name="checkbox_index" value="'+i+'"><span style="margin-left: 5px;">'+i+'</span></label>';rows[i].cells[0].innerHTML=_td_html;}
}

注意点：

规避删除时的索引，遍历选中行时（-index）

后续：

动态添加checkbox控件是，需要重新渲染
<td></td>内的文本框输入控件，后期添加监听事件，做数据校验，table左上角统计的自动计算

HTML-table单行操作相关推荐

通过ICursor对Table进行操作（添加、修改、删除）
通过ICursor对Table进行操作(添加.修改.删除) 连接上数据表的目的就是对其进行包括浏览.添加.修改.删除等基本操作. 浏览功能,之前文章中一提到,就是将Itable转换为DataTable ...
如何禁止数据库执行drop table的操作？
目录文档用途详细信息文档用途本文档旨在介绍如何在数据库中通过事件触发器禁止用户执行drop table的操作. 详细信息创建触发器函数: CREATE OR REPLACE FUNCTION ...
原生js封装table表格操作，获取任意行列td，任意单行单列方法
V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...
Mysql中对table的操作问题
今天利用一个mysql问题来对前期学习Mysql操作的一个小小的检验!!现在总结一下Mysql中对表格的建立.插入特定的数据.以及查询满足某一段条件的数据等等进行操作. 首先需要建立如下三个表(tab ...
4/5 MySQL入门总结：数据表（TABLE）操作
数据表操作数据表(或称表)是数据库最重要的组成部分之一,是其它对象的基础. 行:记录列:字段说明操作打开数据库 mysql> USE db_name; 查看数据表列表 mysql> ...
Hbase table CRUD操作及scala编程
Hbase shell操作 1) 插入数据:put只能插入一个单元格指定表名.行键.列名.列值.[时间戳] hbase(main):081:0> put 'ns3:emp','rk0001' ...
Hbase table DDL操作及scala API操作
Hbase shell操作table 建表直接创建 ns3 是namespace,emp是表,base_info是列簇 hbase(main):037:0> create 'ns3:emp', ...
Layui table表格操作列，按钮过多时展开点击失效问题解决方法
// 缓存当前操作的是哪个表格的哪个tr的哪个td $(document).off('mousedown','.layui-table-grid-down') .on('mousedown','.la ...
avue去除table表格操作列
过程 1.在对应的option中将设置:menu: false 2.此时操作列没有了,但是可能会变成一个空列,那可能是你option里的column中的lable设置了width,此时把这些width ...

HTML-table单行操作

点击事件（按钮）

1.新增事项 javascript:add_tr()

2.删除事项 javascript:del_tr()

注意点：

后续：

HTML-table单行操作相关推荐

最新文章

热门文章