复制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.hqwc.cn/news/103963.html

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

相关文章

USB接口发展历程大全

1996年&#xff0c;由英特尔、微软、ibm等多家公司联合设计的usb标准问世&#xff0c;键盘、鼠标、智能手机以及打印机等等大多使用usb标准来实现供电和数据传输。 usb接口从诞生之初就是为了实现通用这个目的。在usb诞生之前&#xff0c;键盘、鼠标多使用ps二接口&#xff0c…

Arrays.copyOf 和System.arraycopy?深拷贝和浅拷贝?

Arrays.copyOf 和 System.arraycopy 1&#xff09;二者有何不同&#xff1f; System.arraycopy()方法 System.arraycopy(Object src, int srcPos, Object dest, int destPos, int length); 需主动创建目标对象dest可定义起始元素&#xff0c;灵活拷贝元素比较重要的一点&…

【python自动化】playwright长截图切换标签页JS注入实战

前言 当前教程使用的playwright版本为1.37.0,selenium版本为3.141.0 官方文档&#xff1a;https://playwright.dev/python/docs/screenshots 本教程目录如下 文章目录 前言playwright各类截图源码阅读ElementHandle类下的截图Page类下的截图Locator类下的截图 Playwright快速…

数据孤岛的突破口在哪里?

国务院于2021年12月发布的《“十四五”数字经济发展规划》中提到&#xff0c;我国数字经济发展中数字鸿沟问题未得到有效解决&#xff0c;各行业应充分发挥数据要素作用&#xff0c;加强数据治理和监管工作。“数据孤岛”问题虽早已被提出&#xff0c;但至今仍然存在&#xff0…

谷粒商城----缓存与分布式锁

1、缓存使用 为了系统性能的提升&#xff0c;我们一般都会将部分数据放入缓存中&#xff0c;加速访问。而 db 承担数据落盘工作。 哪些数据适合放入缓存&#xff1f;  即时性、数据一致性要求不高的  访问量大且更新频率不高的数据&#xff08;读多&#xff0c;写少&…

uniapp制作——交友盲盒

在小程序端可以有很多好玩的小玩意&#xff0c;目前网上比较有趣的就是有一个交友盲盒&#xff0c;能抽出和找出对象的一个有趣的小程序&#xff0c;所以今天给大家带来用uniapp搭建的交友盲盒&#xff0c;大家再根据自己的情况去搭建自己的后端和数据库来完成自己的一个小项目…

揭秘分布式文件系统大规模元数据管理机制——以Alluxio文件系统为例

作者简介&#xff1a; 辭七七&#xff0c;目前大&#xff0c;正在学习C/C&#xff0c;Java&#xff0c;Python等 作者主页&#xff1a; 七七的个人主页 文章收录专栏&#xff1a; 七七的闲谈 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f49…

方差分析的核心概念“方差分解“

方差是统计学中用来衡量数据集合中数值分散或离散程度的一种统计量。它表示了数据点与数据集合均值之间的差异程度&#xff0c;即数据的分散程度。方差越大&#xff0c;表示数据点更分散&#xff0c;而方差越小&#xff0c;表示数据点更集中。 方差的计算公式如下&#xff1a;…

【数据分析入门】【淘宝电商API接入与电商数据分析】初识Web API(一)

今天开始我们将学习如何使用Web应用变成借口(API)自动请求网站到特定信息而不是整个网站&#xff0c;再对这些信息进行可视化。由于这样编写到程序始终使用最新到数据来生成可视化&#xff0c;因此即便数据瞬息万变&#xff0c;它呈现到信息也都是最新的。比如&#xff0c;我们…

【监控系统】Promethus整合Alertmanager监控告警邮件通知

【监控系统】Promethus整合Alertmanager监控告警邮件通知 Alertmanager是一种开源软件&#xff0c;用于管理和报警监视警报。它与Prometheus紧密集成&#xff0c;后者是一种流行的开源监视和警报系统。Alertmanager从多个源接收警报和通知&#xff0c;并根据一组配置规则来决定…

Docker网络功能

基本网络功能 Docker 允许通过外部访问容器或容器互联的方式来提供网络服务。使用docker network子命令来管理Docker网络。 外部访问容器可通过端口映射实现&#xff0c;启动容器时使用-p参数指定映射关系。-p可多次使用来绑定多个端口。使用docker port命令查看当前映射的端…

vue3:16、Pinia的基本语法

选项式APi 组合式API src/store/counter.js import { defineStore } from "pinia"; import { computed, ref } from "vue";export const userCounterStore defineStore("counter",()>{//声明数据 state - countconst count ref(100)//声…