效果图:
文章来源:https://www.toymoban.com/news/detail-702552.html
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模板网!