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

这篇具有很好参考价值的文章主要介绍了复制tr的一行数据或者复制数据使用,使用jq和php。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图:

复制tr的一行数据或者复制数据使用,使用jq和php,php,jq,js案例,前端,jquery,php

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.坏的一面就是,直接在数据库插入数据,会频繁操作数据库。对数据库不好。文章来源地址https://www.toymoban.com/news/detail-702552.html

到了这里,关于复制tr的一行数据或者复制数据使用,使用jq和php的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 完整指南:如何使用 Node.js 复制文件

    文件拷贝指的是将一个文件的数据复制到另一个文件中,使目标文件与源文件内容一致。 Node.js  提供了文件系统模块 fs,通过该模块可以访问文件系统,实现文件操作,包括拷贝文件。 在 Node.js 中,有几种常用的方法可以用来实现文件拷贝: 1.使用 fs.copyFile()  Node.js v8.5.

    2024年02月07日
    浏览(47)
  • 关于css中设置变量用于全局Css或者Js中使用

    一、配置变量css文件 src/styles/variables.scss 二、在组件中使用变量

    2024年02月07日
    浏览(40)
  • (二十一)大数据实战——Flume数据采集之复制和多路复用案例实战

    本节内容我们完成Flume数据采集的一个多路复用案例,使用三台服务器,一台服务器负责采集本地日志数据,通过使用Replicating ChannelSelector选择器,将采集到的数据分发到另外俩台服务器,一台服务器将数据存储到hdfs,另外一台服务器将数据存储在本机,使用Avro的方式完成

    2024年02月09日
    浏览(47)
  • 前端开发过程中,经常遇到复制粘贴后自动空白一行,该如何解决这个问题哪?

    在前端开发中,我们经常会遇到复制粘贴的需求,不论是从其他地方复制代码还是从网上找到的资料,都需要进行粘贴操作。但是,在进行粘贴操作时,很容易出现一个问题:自动添加空白行。这种情况下,如果不处理,就会影响页面的美观和性能,甚至会导致代码无法正常

    2024年02月04日
    浏览(63)
  • 前端html中让两个或者多个div在一行显示,用style给div加上css样式

    DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。DIV在编程中又叫做整除,即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。 我们知道,默认情况下每个div都是单独一

    2024年02月14日
    浏览(55)
  • 使用Notepad++将多行数据合并成一行

    1、按Ctrl+F,弹出“替换”的窗口; 2、选择“替换”菜单; 3、“查找目标”内容输入为:rn; 4、“替换为”内容为空; 5、“查找模式”选择为正则表达式; 6、设置好之后,点击“全部替换”,即可将多行数据合并成一行

    2024年01月23日
    浏览(36)
  • 【Python】Pyside2 可视化实现:每秒复制源文件一行到目标文件并打印日志

    博主在某个项目中,需要模拟每秒钟生成一行数据,所以有了该博客的想法,其中有线程的内容,为了防止主界面卡住

    2024年01月18日
    浏览(91)
  • 如何使用JS拦截并禁止用户复制、剪切、粘贴、鼠标右键(含破解方法)

    想必大家经常会遇到这样的需求,禁止用户复制、剪切、另存为、鼠标右键的操作等。今天一篇文章学会拦截并禁止用户特定操作及破解方法。正所谓道高一尺魔高一丈啊能禁止也能破解 在相关dom标签上给元素onselectstart 赋值为return false 或者在script中写类似下面这种代码:

    2024年02月12日
    浏览(42)
  • .NET使用EF批量插入数据,一行代码性能飙升!

    背景 小编最近接到一个任务,批量获取内部网站用TXT生成的日志,在闲时把日志插入到MySql数据库做分析。为了快速开发小编选择了Entity Framework Core,很快开发完成了。测试数据不是很多,批量插入数据很快完成,效率很高。但是部署到线上问题来了,最开始也挺快,越到后

    2024年02月13日
    浏览(46)
  • vue2 使用pdf.js 实现pdf预览,并可复制文本

            需求:pdf预览,并且可以选中pdf的内容进行复制。                 在ruoyi的vue前端项目中用到,参考了网上不少文章,因为大部分没给具体的pdf.js版本,导致运行过程中报各种api 错误,经过尝试以下版本可用,故记录一下:         安装依赖:         vue 页面

    2024年01月19日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包