ホームページ > 記事 > ウェブフロントエンド > テーブル内のDOMデータのみを削除する方法(コード)
この記事の内容は、フォーム内のDOMデータ(コード)のみを削除する方法についてです。必要な方は参考にしていただければ幸いです。
この記事では、テーブル dom データの削除操作のみを記録します。
//始める前に、誤解を避ける必要があります。たとえば、テーブルの行を正式に削除する場合、行を削除するだけなので、dom データも削除されます。は変更されていないため、ページング領域に表示されるアイテムの総数は変わりません。クリックしてページをめくると、以前の dom データがテーブルに再ロードされるため、重要な点は、データを再ロードすることから始めることです。テーブル! ! !
var table; var form; layui.use('table', function() { table = layui.table; form = layui.form; var a = 1; table.render({ elem : '#deptUser', id:'deptId', height : 380, width : 508 ,page : true //开启分页 ,limits: [10,20,50] ,cols : [ [ //表头 {type:'numbers', title : '序号',width : 44 },{field : 'CODE',title : '用户编号',width : 120 },{field : 'NAME',title : '用户名称' },{fixed: 'right', title : '操作', width: 60, align:'center', toolbar: '#barDemo' } ] ] }); /* var $ = layui.$; //表格顶部操作监听 $('.demoTable .layui-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); */ table.on('tool(deptU)', function(obj){ //注:tool是工具条事件名 //定义一个接收表格数据的变量 这个可以直接取得ajax返回的数据,也可以用 layui.table.cache.tableid 取得表格的数据 var userData = layui.table.cache.tableId; var user = obj.data //获得当前行数据 ,layEvent = obj.event; //获得 lay-event 对应的值 if(layEvent=="delete"){ //把删除后的新数据接收并返回给userData var newData = new Array(); var ni = 0; for(var i=0;i<userData.length;i++){ if(userData[i].ID != user.ID){ newData[ni] = userData[i]; ni++; } } userData = newData; //所获得的 tableIns 即为当前容器的实例 重点就是这里容易被忽视的,最简单却最不起眼。。。。 var tableIns = table.render({ elem: '#deptUser' ,id:'deptId' ,height : 380 ,width : 508 ,page : true //开启分页 ,limits: [10,20,50] ,data : newData ,cols : [ [ //表头 {type:'numbers', title : '序号',width : 44 },{field : 'CODE',title : '用户编号',width : 120 },{field : 'NAME',title : '用户名称' },{fixed: 'right', title : '操作', width: 60, align:'center', toolbar: '#barDemo' } ] ] }); //上边定义的tableIns可以 使用reload方法,我这里重新渲染就可以了就没用到 } }); });
関連する推奨事項:
DOMノード削除関数removeChild()の使用例_javascriptスキル
JavaScriptでDOM要素コードを素早く動的に削除する方法
以上がテーブル内のDOMデータのみを削除する方法(コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。