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

已于 2023-09-21 17:46:51 修改
阅读量565 收藏
点赞数
分类专栏： php jq js案例 文章标签： 前端 jquery php
于 2023-09-05 18:48:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23392319/article/details/132698273
版权
js案例 同时被 3 个专栏收录
22 篇文章 1 订阅
订阅专栏
php
16 篇文章 0 订阅
订阅专栏
jq
4 篇文章 0 订阅
订阅专栏

效果图：

在这里插入图片描述

2.Html

<tr style="height: 35px;">
		<td style="width:5%; text-align:center;font-weight: bold;" id="top_rowspan_id"></td>
		<td style="width:15%; text-align:center;font-weight: bold;" >
			<div>
				<span id="copy_select" class="select_option"  style="color:blue;font-size: 25px;cursor:hand;text-align: left;position: absolute;top:2px;width: 2%;height: 10%;">+</span>
				<span style="text-align: center;font-weight: bold;">1</span>
			</div>

		</td>
		<td style="width:8%; text-align:center;font-weight: bold;" >2</td>
		<td style="width:10%; text-align:center;font-weight: bold;" >3</td>
		<td style="width:8%; text-align:center;font-weight: bold;"  >4</td>
	</tr>

下面的复制的数据

<!--复制的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.坏的一面就是，直接在数据库插入数据，会频繁操作数据库。对数据库不好。

奶茶不甜o
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在table里动态获取tr里的所有数据
你说什么我听不见
11-20 3317
在一个table中点击一个td动态获取所在tr一行的数据 在点击每一行的td，需要获取对应行的第一列input的value值，对应的js代码参考下方： 百度出来的： function change(){ var text = $(this).parents('tr').children('td:eq(0)').text; console.log(text); }
layui使用表格渲染获取行数据的例子
01-19
需求：使用前端框架layui生成表格，点击表格中一行数据中的按钮，获取到这行数据。 解决办法： 在render中增加字段： done: function (res, curr, count) { // $('.x-body').find('.layui-table-body').find(table...
C#webform、web实现点击按钮copy功能
一只没有感情的AI机械猿
06-08 350
从DataTable单独复制出某一列数据鼠标全选不方便时可采用JS将内容复制到剪切板。// 将要复制的内容设置为文本输入框的值。// 创建一个临时的文本输入框元素。// 将文本输入框添加到页面中。// 选择文本输入框的内容。// 移除临时的文本输入框。
PHP数据复制
夏已微凉、
07-04 476
目录一、前言二、注意三、思路四、代码1、数据处理2、完整代码 一、前言 假如表中有8条类型为1数据，我们要再添加8条类型为2的数据，用sql语句执行也可以，我这里用PHP代码实现 二、注意 1、为了防止方法重复执行导致数据重复增加，我们添加了一个参数allow来控制复制的数据是否可以重复 2、很明显id字段是可以去除的（id为主键自增，sql添加数据时会自己计算id的值） 3、createTime，updateTime，也可以去除，因为insertAll方法中拼接上了 4、当字段类型为type时，把t
jquery复制当前tr行
Martin 的博客
06-28 4268
//复制 var vBudgetCompileObj = (function() { /*table新增/移除行，参数：tableId*/ var getMaxIndex; var funGenerateRow = function(tableId) { $("a[name='C
点击table中的一行获取这一行中的其他数据
csdnwhy941125的博客
04-08 6323
id username password gender eMail 1 张三 123 男 111@163.com 2 李四 321 女 222@163.com table id="table">     thead>  
jquery ajax 删除数据,jQuery Ajax从表和数据库中删除行
weixin_42099116的博客
08-05 436
我有一个html表，如果由mysql表的值填充。这条路：function getCategories(){$prod = new C_Product();$cat= $prod->getCategorieenAsArray();$tr = "";foreach ($cat as $key => $value){ $tr.="$value\n";}return $tr;}...
php取表格一行内容,jquery表格接受excel数据-用jquery怎么获取表格中的一行内容
weixin_39655981的博客
03-17 236
请教如何用JQuery导入导出excel表格提供你2中思路，具体代码写了生成表的时候给修改链接一个id，id保存当前行的主如id="tid" 主键，为它添加onclick方法，var id=this.id.replace("tid",""); 获取到主键把主到数据库中查到相应的数据行，赋值给表单，完成！var parents=$(this).parent().parent(); 获得tabel行...
Js/Jq点击按钮复制一断html代码
风吹无痕，雨过无迹
09-30 519
Js/Jq点击按钮复制一断html代码步骤： 1.拿到HTML代码， 2.复制一份， 3.增加到指定的地方 例如bootscriptJQ复制table中的一行 $(document).on("click", ".btn-addthis", function () { var that = this; var add_tr = that.parentNode.parentNode.cloneNode(true); console.log(add_t
jQuery实现html table行Tr的复制、删除、计算功能
10-19
主要介绍了jQuery实现html table行Tr的复制、删除、计算功能,涉及jQuery针对table表格的常见复制、添加、删除与计算行数等简单操作技巧,需要的朋友可以参考下
C#使用FileStream复制一个任意文件
12-31
复制一个文件的基本思路是：逐一读取原文件流的字节，逐一写入新文件流中。分别用到文件流的ReadByte()和WriteByte()方法。这里要注意的是，读取时以字节为单位，一个字节如下图所示 是一个0和1组合的序列。...
jquery动态添加删除一行数据示例
12-02
2. **元素克隆**：`var tempTr = $("tr:first").clone(true)`这行代码将表格的第一行（`tr:first`）克隆一份，`true`参数表示深拷贝，包括所有关联的数据和事件。 3. **属性设置**：对于新添加的行，清空输入框的值...
Nodejs Stream 数据流使用手册
12-30
本文介绍了使用 node.js streams 开发程序的基本方法。 <code class=hljs>We should have some ways of connecting programs like garden hose--screw in another segment when it becomes necessary to massage ...
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1590
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
高德地图离线版 使用高德地图api的方法
m0_62336925的博客
08-02 509
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
html+css+js实现一个简单的电商商城首页
爱敲代码的卡拉米的博客
08-02 257
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等!绿泡泡：XiaoMei_NN。
【面试经验】滴滴 秋招储备实习 前端面经
最新发布
litterfinger的博客
08-05 276
时间线：5.15 11点半一面，下午2点半二面。● 不知道盒子宽高情况下水平垂直居中。● scale是怎么放大盒子宽高的。● transform的属性。滴滴秋招储备实习 前端面经。● 文件断点续传+切片上传。● 自我介绍+项目介绍。
文章相关接口
qq_74474809的博客
08-03 218
跟着黑马程序员学习SpringBoot3+Vue3
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值