复制tr的一行数据或者复制数据使用，使用jq和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>
1
2
3
4
5
6
7
8
9
10
11
12
13

下面的复制的数据

<!--复制的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----------------------------------------------------------------------------------------------->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

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.= '
        


    



     




     

';


      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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

6.注意

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