それはあなたが何をしようとして決定するために少し難しいです。私はここでそれを刺した。
例：https://jsfiddle.net/Twisty/1L152xyj/
はJavaScript
function cloneRow($obj) {
$obj = $obj.length ? $obj : $("#table tbody");
counter++;
if (counter >= 7) {
$(".btn-plus").button("disable");
return;
} else {
var b = $obj.find("tr:first");
$trLast1 = $obj.find("tr:last");
$trNew = b.clone();
$trNew.find(".btn-plus").remove();
$trNew.find("td:first").append($("<button>", {
type: "button",
class: "btn btn-minus custom-icon glyphicon glyphicon-minus",
title: "Remove Row"
}).button({
icon: "ui-icon-minus"
}).click(function() {
deleteRow(this);
}));
$trLast1.after($trNew);
}
}
function deleteRow(a) {
$(a).closest("tr").remove();
$(".btn-plus").button("enable");
counter--;
}
var counter = 0;
$(function() {
$(".btn-plus").button({
icon: "ui-icon-plus"
});
$(".btn-plus").click(function() {
cloneRow($("#table tbody"));
});
});
お役に立てば幸いです。
更新
私は、これはあなたが記述されたものに近いかもしれないと思います。コメントしてお知らせください。
https://jsfiddle.net/Twisty/1L152xyj/6/
HTMLスニペット
<tr id="row-1">
<td>
<button type="button" class="btn btn-plus custom-icon glyphicon glyphicon-plus" title="Add Row"></button>
</td>
<td>
<select class="selectedItem form-control" name="selectedItem[]" id="selectedItem_1">
<option value="entityName">Entity Name</option>
<option value="transmitter_mac">Tag Mac</option>
<option value="tag_number">Tag Number</option>
<option value="sub_category">Sub Category</option>
<option value="name">Department Name</option>
<option value="in_time">In Time</option>
<option value="out_time">Out Time</option>
</select>
</td>
<td>
<input class="form-control searchItem" placeholder="Enter Search item" name="searchItem[]" />
<!-- <input type="hidden" name="counterValue" id="counterValue" value=""> -->
</td>
</tr>
**JavaScript
はJavaScript
function cloneRow($obj) {
$obj = $obj.length ? $obj : $("#table tbody");
counter++;
if (counter >= 7) {
$(".btn-plus").button("disable");
return;
} else {
var selectIndex = $obj.find("tr:first option:selected").index();
var b = $obj.find("tr:first");
$trLast1 = $obj.find("tr:last");
$trNew = $("<tr>", {
id: "row-" + counter
});
b.find("td").each(function() {
$(this).clone().appendTo($trNew);
});
$trNew.find(".btn-plus").remove();
$trNew.find("td:first").append($("<button>", {
type: "button",
class: "btn btn-minus custom-icon glyphicon glyphicon-minus",
title: "Remove Row"
}).button({
icon: "ui-icon-minus"
}).click(function() {
deleteRow(this);
}));
$trNew.find("select")
.attr("id", "selectedItem_" + counter)
.find("option").eq(selectIndex).prop("selected", true);
$trLast1.after($trNew);
}
}
function deleteRow(a) {
$(a).closest("tr").remove();
$(".btn-plus").button("enable");
counter--;
}
var counter = 1;
$(function() {
$(".btn-plus").button({
icon: "ui-icon-plus"
});
$(".btn-plus").click(function() {
cloneRow($("#table tbody"));
});
});
これは、すべてのクローンが、それらはユニークであることを確認するためにid属性を更新します。また、オプションの選択したプロパティをクローンします。
アップデート2
あなたはそうのように行うことができ、行が複製されるオプション、無効にしたい場合：
$trNew.find("select")
.attr("id", "selectedItem_" + counter)
.find("option").eq(selectIndex).prop("disabled", true);
例：https://jsfiddle.net/Twisty/1L152xyj/7/
アップデート3
このオプションを他のselect要素のppearも、最初の選択が変更されたときはいつでも削除する必要があります。
var options = [{
value: "entityName",
label: "Entity Name",
}, {
value: "transmitter_mac",
label: "Tag Mac"
}, {
value: "tag_number",
label: "Tag Number"
}, {
value: "sub_category",
label: "Sub Category"
}, {
value: "name",
label: "Department Name"
}, {
value: "in_time",
label: "In Time"
}, {
value: "out_time",
label: "Out Time"
}];
このオプションでは、いつでもオプションを追加、削除、変更できます。簡単な関数は、これを助けることができる：
function replaceSelect($target, key) {
$target.find("select").find("option").remove();
$.each(options, function(k, v) {
if (key !== k) {
$target.find("select").append($("<option>", {
value: v.value
}).html(v.label));
}
});
}
実施例：https://jsfiddle.net/Twisty/1L152xyj/8/
を見ることができますHTML内にID「dltbtn」の要素を追加します。 – Twisty