iT邦幫忙

1

複製tr資料並新增入資料庫

不好意思又來打擾了
有些問題想請教一下各位大大

目前的需求是先按下按鈕添加一列欄位
且欄位中有複製的按鈕
按下後可以複製整個tr
不用再手動添加後一個一個輸入相同資料

var current_material_item_row_index = 0;

按下"添加"之按鈕後會新增一列

function add_material_item(){

current_material_item_row_index = current_material_item_row_index+1;
									 
html +="<tr id='material_tr_"+current_material_item_row_index+"'>";
									 
html +="<td><a href='javascript:void(0);' onclick='delete_material_item(\""+current_material_item_row_index+"\");'>刪除</a><br><br><a href='javascript:void(0);' onclick='copy_material_item_field(\""+current_material_item_row_index+"\");'>複製</a></td>";
									 
html +="<td>";						                             
html +="<input type='hidden' name='material_row_source[]' id='material_row_source_"+current_material_item_row_index+"' data-element_index='"+current_material_item_row_index+"' value=''/>";            
html +="<input type='hidden' name='material_row_id[]' id='material_row_id_"+current_material_item_row_index+"' data-element_index='"+current_material_item_row_index+"' value=''/>";
html +="<span id='material_item_no_span_"+current_material_item_row_index+"' class='material_item_no_span'>"+current_material_item_row_index+"</span>";
html +="</td>";

html +="<td><input type='text' name='material_product_model_name[]' id='material_product_model_name_"+current_material_item_row_index+"' data-element_index='"+current_material_item_row_index+"' size='20' value=''/><br><span id='material_product_model_name_error_span_"+current_material_item_row_index+"' class='error_span'></span></td>";
									 
html +="</tr>";

}

目前想法是按下複製後,會傳送值並依據id克隆那個tr
再改變每一個的id

function copy_material_item_field(element_index){

current_material_item_row_index+=1;

var new_element_index = current_material_item_row_index ;

var copy__material_item = $("#material_tr_"+element_index).clone(true).attr
('id', 'material_tr_'+new_element_index);

copy__material_item.find("#material_row_source_"+element_index).attr({id:"material_row_source_"+new_element_index});

copy__material_item.find("#material_row_id_"+element_index).attr("id","material_row_id_"+new_element_index);

copy__material_item.find("#material_item_no_span_"+element_index).attr("id","material_item_no_span_"+new_element_index);

copy__material_item.find("#material_product_model_name_"+element_index).attr("id","material_product_model_name_"+new_element_index);

$("#material_tr_"+element_index).after(copy__material_item);

}

動作是按下按鈕後會出現一列 且 tr 的 id是 material_tr_1
再按下複製後就會克隆並出現一個 id 是 material_tr_2
但我onlick傳送的值不正確(?),又或者是我copy_material_item_field()這個function少了一些東西
導致我在 material_tr_2 (由material_tr_1複製而來的)按下複製,卻跑去克隆 material_tr_1
所以想請教的是我該如何修改,按下複製才能clone到正確的tr?

又或者有其他的做法能複製並新增至MySQL中 謝謝!


看起來是clone事件時有需要修改的地方
也就是當我克隆 material_tr_1 時候
裡面的onclick假設傳送的是1
生成 material_tr_2 之後
裡面onclick函數夾帶的值似乎也還是1,並不會動態的改變成2(?)

ms0369033 iT邦新手 5 級 ‧ 2020-04-06 14:36:57 檢舉
你呼叫copy_material_item_field()的CODE呢
> 你呼叫copy_material_item_field()的CODE呢
最後一段程式碼即是
因為縮排感覺沒更方便看
所以就在外面註明了@@

2 個回答

3
listennn08
iT邦高手 9 級 ‧ 2020-04-06 17:30:00
最佳解答

id 如果要按照序列順序排,我不覺得先加入元素會比較好處理
先處理好原本的 id 再加入 clone 出來的 row
之前有做了動態表格,再加入你的問題
用 clone 的確很方便
附上 codepen 給你參考

let newObj = $('#row' + index).clone().attr('id','row' + (idx))

不好意思請教一下大大
這是把第幾個tr做clone並更改id嗎?
可是我看複製出來只有input的欄位值有被複製
其他都被reset

index 是你按複製的那行 row 的 id
idx 是index +1

我新增跟複製的資料是一樣的,所以我新增了一個input 讓你看被複製的情況
我唯一有改的是 No 的部分
我現在把 No 改成不被 reset 這樣你比較清楚

謝謝大大的回答~

1
浩瀚星空
iT邦超人 1 級 ‧ 2020-04-06 14:35:35

提示你一下

1.將要copy的tr元件,另外存到一個變數。並將其id值移除掉。
2.再拿該變數,先加好新的id值後。再做容器插入。

你碰到的問題是,你想要直接去變動容器內的id值。
可惜你那時已經發生了重覆id的問題。造成要變動也找不到。

所以最好是obj化處理完後。再送出去給容器。免得發生重覆的id

大大不好意思能再提示及解釋多一點嗎
初次使用clone這個函數

原本有想過copy_material_item_field函數裡面是先做添加的動作(add_material_item)
然後再一個一個去指定每一個text的val
例如:

function copy_material_item_field(element_index){

var new_element_index = parseInt(element_index) + 1;
add_material_item();
$('#material_product_model_name_'+new_element_index).val($('#material_product_model_name_'+element_index).val());

}

目前初步看起來是能達到我要得成果
但關於clone方面也還是想要知道一下
還麻煩大大能否解釋詳細一點,謝謝!

我要發表回答

立即登入回答