复制tr的一行数据或者复制数据使用,使用jq和php

效果图:

在这里插入图片描述

2.Html

<!--复制的tr数据,s----------------------------------------------------------------------------------------------->{foreach from=$arrs key=kk item=vv}
<tr><td style="text-align:center;"  >1</td><td style="text-align:center;" >2</td><td style="text-align:center;" >3</td><td style="text-align:center;"  >4</td></tr>
{/foreach}<!--定位复制要加入的位置-->
<tr class="del_rukou" id="copy_rukou" style="display: none;"></tr><!--复制的tr数据,e----------------------------------------------------------------------------------------------->

3.js

<script>//复制tr$(function () {$(".select_option").click(function (){add_tr('copy_rukou');})})function add_tr(id) {// 获取所有的tr元素// var rows = $('tr');// 创建新的tr元素var newRow = $('<tr style="height: 35px;"></tr><tr id="copy_rukou2" class="del_rukou2" style="display: none;"></tr>');//ajax获取添加的复制数据var tr_str = get_tr_fee('{$work_qid}')// 在新tr元素中添加数据newRow.html(tr_str); // 这里可以根据需要添加更多的数据// 将新的tr元素插入到指定id的tr元素之后$('#' + id ).after(newRow);//把第一个复制的定位的id删除,不然复制的数据在上面,不在下面$('.del_rukou').remove();//替换class,如果使用一样的class会都删除$(".del_rukou2").attr("id", "copy_rukou");$(".del_rukou2").attr("class", "del_rukou");//最上面的rowspan1叠加,这里是处理单元格的合并问题,可去掉var rowspan1 = $("#top_rowspan_id").attr("rowspan");rowspan1 = parseInt(rowspan1)var rowspan_new = rowspan1 + 1;$("#top_rowspan_id").attr("rowspan",rowspan_new);//文件上传的rowspan1叠加,这里是处理单元格的合并问题,可去掉var file_rowspan_val = $("#file_rowspan_id").attr("rowspan");file_rowspan_val = parseInt(file_rowspan_val)var file_rowspan_val = file_rowspan_val + 1;$("#file_rowspan_id").attr("rowspan",file_rowspan_val);}function get_tr_fee(wid) {var str = '';Ajax.call('customer_quote2worker.php?act=get_tr_fee&wid='+ wid, '', function(result){if(result.error==0){str =  result.str;}else{alert(result.message);}}, 'GET', 'JSON',false);return str;}/*function showCopyTrStr(resule){var resule_json = JSON.parse(resule);}*///删除事件function removeTr(e,wid,id){$(e).parents("tr").remove();//把合并的单元格-1//最上面的rowspan1叠加,这里是处理单元格的合并问题,可去掉var rowspan1 = $("#top_rowspan_id").attr("rowspan");rowspan1 = parseInt(rowspan1)var rowspan_new = rowspan1 - 1;$("#top_rowspan_id").attr("rowspan",rowspan_new);//文件上传的rowspan1叠加,这里是处理单元格的合并问题,可去掉var file_rowspan_val = $("#file_rowspan_id").attr("rowspan");file_rowspan_val = parseInt(file_rowspan_val)var file_rowspan_val = file_rowspan_val - 1;$("#file_rowspan_id").attr("rowspan",file_rowspan_val);//删除id数据,删除数据库的数据ajax_delete_tr(wid,id)}function ajax_delete_tr(wid,id) {Ajax.call('customer_quote2worker.php?act=ajax_delete_tr&wid='+ wid +'&id=' + id, '', function(result){if(result.error==0){}else{alert(result.message);}}, 'GET', 'JSON',false);}</script>

4.Php

elseif ($_REQUEST['act'] == 'get_tr_fee')//获取复制的tr数据,拼接到html中
{$wid        = intval($_REQUEST['wid']);$error_msg         = 'wid缺少';if(!$wid){echo json_encode(array('error'=>3,'message'=>$error_msg));exit;}$work_quote_row = db_class::getInfo($wid);//获取这个id的全部数据if(!$work_quote_row){echo json_encode(array('error'=>3,'message'=>'数据不存在'));exit;}$add_data                = [];$add_data['ref_wid']     = $wid;$add_data['add_time']    = get_todaytime();$add_data['add_user_id'] = get_admin_id_session();$add_id = db_class::add($add_data);$getCopyTrHtml = db_class::getCopyTrHtml($wid,$add_id);echo json_encode(array('error'=>0,'message'=>'','str'=>$getCopyTrHtml));exit;
}elseif ($_REQUEST['act'] == 'ajax_delete_tr')//删除复制的tr数据
{$wid        = intval($_REQUEST['wid']);$id        = intval($_REQUEST['id']);$error_msg         = 'wid缺少';if(!$wid){echo json_encode(array('error'=>3,'message'=>$error_msg));exit;}$work_quote_row = db_work_quote::getInfo($wid);$fee_row = db_work_quote_copy_fee::getInfo($id);if(!$work_quote_row){echo json_encode(array('error'=>3,'message'=>'数据不存在'));exit;}if(!$fee_row){echo json_encode(array('error'=>3,'message'=>'删除的数据不存在'));exit;}$res = db_work_quote_copy_fee::remove($id);if(!$res){echo json_encode(array('error'=>1,'message'=>'删除失败'));exit;}echo json_encode(array('error'=>0,'message'=>'','str'=>$getCopyTrHtml));exit;
}删除tr的方法,删除数据库的。看需求
5.类的方法
static function add($data)
{$res = $GLOBALS['db']->autoExecute(self::$table, $data, 'INSERT');$id  = $GLOBALS['db']->insert_id();//上面代码意思是写入数据库的数据,就是insert..return $res ? $id : false;
}/*** 获取复制的tr数据* @param $id* @return string*/static function getCopyTrHtml($wid,$id){$str = '';if(!$wid){return '';}if(!$id){return '';}$str.= '<td style="text-align:center;"  ><span><input name="name1" value="" type="text"></span>
</td>
<td style="text-align:center;" ><span><input name="name2" value="" type="text"></span>
</td>
<td style="text-align:center;" ><span><input name="name3" value="" type="text"></span></td>
<td style="text-align:center;"  ><span><input name="name4" value="" type="text"></span></td>';return $str;}这个方法,把多个td加入tr中/*** 直接删除,杀无赦* @param $id* @return bool*/
static function remove($id)
{if(!$id){return false;}$sql = "delete from " . self::$table. " WHERE id = ".$id;$res = $GLOBALS['db']->query($sql);if(!$res){return false;}return true;
}

6.注意

1.插入tr就是在数据库加入一条数据。如果想td都为空,把它删除,可以在刷新的时候,判断td是否都为空那就删除。
2.删除tr就是先删除dom节点,然后再删除数据库的数据。
3.这个操作有好的一面,就是用户在刷新后,也可以保存数据的完整性。如果使用jq复制的数据,刷新就会消失。还有降低对jq的操作复杂度,如果使用jq写也可以。
4.坏的一面就是,直接在数据库插入数据,会频繁操作数据库。对数据库不好。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/130961.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【工作记录】MQTT介绍、安装部署及springboot集成@20230912

背景 近期公司可能会有物联网设备相关项目内容&#xff0c;提前对用到的mqtt协议做预研和初步使用。 最初接触到mqtt协议应该是早些年的即时通讯吧&#xff0c;现在已经是物联网设备最热门的协议了。 作为记录&#xff0c;也希望能帮助到需要的朋友。 MQTT介绍 《MQTT 协议规…

84 # koa 实现文件上传功能

下面使用实现文件上传功能&#xff0c;先新建文件夹&#xff0c;结构如下&#xff1a; index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-…

java企业数据管理系统

项目介绍 此项目为企业数据管理系统的后端部分&#xff0c;前端部分请参考vue-admin&#xff0c;项目实现了菜单管理、用户管理、角色管理和权限管理四个基础模块&#xff0c;前端菜单管理结合动态路由可自由添加菜单。结合Shiro权限管理实现了菜单和按钮的权限控制。 ❝ 前端…

Revit SDK 介绍:CurtainWallGrid 幕墙网格

前言 这个例子介绍如何创建幕墙&#xff0c;以及如何通过 API 编辑幕墙。 内容 运行效果&#xff1a; 创建幕墙 幕墙在 Revit 体系里面属于墙的一种&#xff0c;因此&#xff0c;它对应的 API 类型仍然为 Wall&#xff0c;只是类型有差异。 // WallGeometry::CreateCurt…

Docker容器技术实战-1

1.docker容器 docker就好比传统的货运集装箱 每个虚拟机都有独立的操作系统&#xff0c;互不干扰&#xff0c;在这个虚拟机里可以跑任何东西 如应用 文件系统随便装&#xff0c;通过Guest OS 做了一个完全隔离&#xff0c;所以安全性很好&#xff0c;互不影响 容器 没有虚拟化…

数据结构与算法(一)数组的相关概念和底层java实现

一、前言 从今天开始&#xff0c;笔者也开始从0学习数据结构和算法&#xff0c;但是因为这次学习比较捉急&#xff0c;所以记录的内容并不会过于详细&#xff0c;会从基础和底层代码实现以及力扣相关题目去写相关的文章&#xff0c;对于详细的概念并不会过多讲解 二、数组基础…

【数据结构】树的基础知识及三种存储结构

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …

科教兴国 | 拓世集团携手中国航天广电集团,打造《AI+教育平台》

在这个时代&#xff0c;人工智能的奇迹交织成一片璀璨的星河。在这片星河中&#xff0c;各大企业如同星辰&#xff0c;闪烁着探索的光芒&#xff0c;寻找着那些志同道合的伙伴。我们并肩飞翔&#xff0c;穿越信息的海洋&#xff0c;共同描绘出未来的蓝图。每一次合作&#xff0…

GB28181学习(三)——心跳保活

心跳保活 要求&#xff1a; 1. 当原设备发现工作异常时&#xff0c;应立即向本SIP监控域的SIP服务器发送状态信息&#xff1b; 2. 无异常时&#xff0c;定时向本SIP监控域的SIP服务器发送状态信息&#xff1b; 3. 状态信息报送采用**MESSGAE**方法&#xff1b; 4. SIP设备宜在…

基于YOLOv8模型的80类动物目标检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要&#xff1a;基于YOLOv8模型的80类动物目标检测系统可用于日常生活中检测与定位车辆目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目标检测算法训练数…

使用 YCSB 和 PE 进行 HBase 性能压力测试

HBase主要性能压力测试有两个&#xff0c;一个是 HBase 自带的 PE&#xff0c;另一个是 YCSB&#xff0c;先简单说一个两者的区别。PE 是 HBase 自带的工具&#xff0c;开箱即用&#xff0c;使用起来非常简单&#xff0c;但是 PE 只能按单个线程统计压测结果&#xff0c;不能汇…

Linux--进程间通讯--FIFO(open打开)

1. 什么是FIFO FIFO命名管道&#xff0c;也叫有名管道&#xff0c;来区分管道pipe。管道pipe只能用于有血缘关系的进程间通信&#xff0c;但通过FIFO可以实现不相关的进程之间交换数据。FIFO是Linux基础文件类型中的一种&#xff0c;但是FIFO文件在磁盘上没有数据块&#xff0c…

2011-2022年北大法宝省市县环保行政处罚数据

2011-2022年北大法宝省市县环保行政处罚数据 1、时间&#xff1a;2011-2022年 2、范围&#xff1a;全国各省份、各城市、各区县 3、来源&#xff1a;北大法宝 4、数据指标&#xff1a;地区代码、地区名称、地区等级、所属省份、所属城市、处罚年份、主题分类、案件数目 5、…

glTF和GLB有什么区别?

推荐&#xff1a;使用 NSDT场景编辑器快速搭建3D应用场景 自1960年代末开始以来&#xff0c;3D扫描突飞猛进&#xff0c;彻底改变了我们创建真实世界物体和环境的数字模型的方式。虽然很容易考虑它在建筑、工程和游戏等领域的使用&#xff0c;但实际应用要广泛得多。2023年&…

基本Dos命令

1.打开cmd的方式 &#xff08;1&#xff09;winR&#xff0c;输入cmd即可 &#xff08;2&#xff09;在任意文件夹下面&#xff0c;按住shift键后点击鼠标右键&#xff0c;即可在此文件夹目录下打开命令行窗口。 &#xff08;3&#xff09;资源管理器的地址栏前面加上 cmd…

包管理工具--》npm的配置及使用(二)

在阅读本篇文章前请先阅读包管理工具--》npm的配置及使用&#xff08;一&#xff09; 包管理工具系列文章目录 一、包管理工具--》npm的配置及使用&#xff08;一&#xff09; 二、包管理工具--》npm的配置及使用&#xff08;二&#xff09; 三、包管理工具--》发布一个自己…

歌曲推荐《最佳损友》

最佳损友 陈奕迅演唱歌曲 《最佳损友》是陈奕迅演唱的一首粤语歌曲&#xff0c;由黄伟文作词&#xff0c;Eric Kwok&#xff08;郭伟亮&#xff09;作曲。收录于专辑《Life Continues》中&#xff0c;发行于2006年6月15日。 2006年12月26日&#xff0c;该曲获得2006香港新城…

SQL5 将查询后的列重新命名

描述 题目&#xff1a;现在你需要查看前2个用户明细设备ID数据&#xff0c;并将列名改为 user_infos_example,&#xff0c;请你从用户信息表取出相应结果。 示例&#xff1a;user_profile iddevice_idgenderageuniversityprovince12138male21北京大学Beijing23214male复旦大学…

网工内推 | 运营商技术支持,数通基础扎实,最高17k

01 新华三技术有限公司 招聘岗位&#xff1a;运营商技术支持工程师 职责描述&#xff1a; 1、负责新华三产品产品和方案在运营商客户的日常运维和技术支持&#xff1b; 2、为运营商客户提供网上问题处理、业务变更支持&#xff1b; 3、负责对应运营商客户日常维系&#xff0…

如何写好新闻稿,新闻稿怎么撰写?

新闻稿是企业宣传、产品发布、事件报道等重要信息的传播方式之一。一篇优秀的新闻稿能够吸引读者的注意力&#xff0c;传递清晰、凝练的信息&#xff0c;并引发读者的兴趣。本文伯乐网络传媒将分享五个关键要素&#xff0c;助您撰写出引人入胜的新闻稿。 第一关键要素&#xff…