[英]how to add dynamic row jquery having dynamic dropdown in php
我可以添加許多行並為每個文本字段添加事件,並在第一行成功使用php成功動態添加dropdwon。
但是單擊下拉菜單中的添加按鈕事件時,我無法復制動態下拉菜單。
這是Javascript:
$(document).ready(function () {
var counter = 1;
$("#addrow").on("click", function () {
counter++;
var newRow = $("<tr>");
var cols = "";
cols += "<td><select name='draft_id" + counter + "'><option value=''>Pilih</option></select></td>"; //<select name="draft_id" id="draft_id"></select>
cols += "<td><input type='text' name='draft_qty" + counter + "' size='3'/></td>";
cols += "<td><input type='text' name='draft_isi" + counter + "' size='50'/></td>"; //<input type="text" name="draft_isi"/>
cols += "<td><input type='text' name='harga_satuan" + counter + "' size='8'/></td>"; //<input type="text" name="harga_satuan" id="harga_satuan" />
cols += "<td><input type='text' name='jumlah" + counter + "' readonly='readonly'/></td>";
cols += "<td><button type='button' class='deleteRow'>Del</button></td>"; //<button type="button" class="deleteRow">Del</button>
newRow.append(cols);
$("table.order-list").append(newRow);
});
$("table.order-list").on("change", 'input', function (event) {
hitungbaris($(this).closest("tr"));
hitung();
});
$("table.order-list").on("click", "button.deleteRow", function (event) {
$(this).closest("tr").remove();
hitung();
});
});
function hitung() { //fungsi hitung ini memiliki 2 fungsi sekaligus yaitu ...:
hitungGrandTotal();
hitungsisa();
}
function hitungbaris(row) {
var harga_satuan = +row.find('input[name^="harga_satuan"]').val();
var draft_qty = +row.find('input[name^="draft_qty"]').val();
row.find('input[name^="jumlah"]').val((harga_satuan * draft_qty).toFixed(2));
}
function hitungGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="jumlah"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").val(grandTotal.toFixed(2));
}
function hitungsisa() { //bisa juga di gunakan untuk menghitung uang kembali
//var sisa = "";
var bayar = parseFloat(document.formpenjualan.bayar.value);
var grandtotal = parseFloat(document.formpenjualan.grandtotal.value);
if (bayar < grandtotal){
//
sisa = "KREDIT";
}else{
//
sisa = "LUNAS";
}
$("#sisa").val(sisa);
}
的HTML
<input type="button" id="addrow" value="Tambah Baris" />
<table cellspacing="0" cellpadding="3"class="order-list table table-striped responsive-utilities jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title"><div align="center">Draft ID </div></th>
<th class="column-title"><div align="center">Qty</div></th>
<th class="column-title"><div align="center">Uraian</div></th>
<th class="column-title"><div align="center">Harga Satuan </div></th>
<th class="column-title"><div align="center">Jumlah</div></th>
<th class="column-title"><div align="center">Aksi</div></th>
</tr>
</thead>
<tr>
<td>
<?php
$result = mysql_query("select * from draft_order");
$jsArrayDO = "var draftID = new Array();\n";
?>
<select name="select" onchange="changeValue_draftID(this.value)" class="category-select">
<option>-Pilih-</option>
<?php while ($row = mysql_fetch_array($result)) {
$jsArrayDO .= "draftID['" . $row['draft_id'] . "'] = {draft_qty:'" . addslashes($row['draft_qty']) . "',draft_isi:'".addslashes($row['draft_isi'])."'};\n";?>
<option value="<?php echo $row['draft_id'];?>"><?php echo $row['draft_id'];?></option>
<?php } ?>
</select>
<script type="text/javascript">
<?php echo $jsArrayDO; ?>
function changeValue_draftID(id){
document.getElementById('draft_qty').value = draftID[id].draft_qty;
document.getElementById('draft_isi').value = draftID[id].draft_isi;
};
</script>
</td>
<td><input type="text" name="draft_qty" id="draft_qty" size="3"/></td>
<td><input type="text" name="draft_isi" id="draft_isi" size="50"/></td>
<td><input type="text" name="harga_satuan" id="harga_satuan" size="8"/></td>
<td align="right"><input type="text" name="jumlah" id="jumlah" readonly="readonly"/></td>
<td><button type="button" class="deleteRow">Del</button></td>
</tr>
<tfoot>
<tr>
<td> </td>
<td align="right"> </td>
<td align="right"> </td>
<td align="right" valign="middle">Grand Total : </td>
<td><input name="grandtotal" type="text" id="grandtotal" readonly="readonly"/></td>
<td align="right"> </td>
</tr>
<tr>
<td align="right"> </td>
<td align="right"> </td>
<td align="right"> </td>
<td align="right" valign="middle">Bayar : </td>
<td><input name="bayar" type="text" id="bayar" /></td>
<td align="right"> </td>
</tr>
<tr>
<td align="right"></td>
<td align="right"> </td>
<td align="right"> </td>
<td align="right" valign="middle">Sisa : </td>
<td><input name="sisa" type="text" id="sisa"readonly="readonly"/></td>
<td align="right"> </td>
</tr>
</tfoot>
</table>
您可以在JSFIDDLE上查看代碼
請幫助我如何首先使用php作為行來克隆/添加動態下拉列表。
需要幫忙
謝謝
使用jquery函數.clone()
在此之后插入insertAfter()
- 或appendTo()
的父的DOM元素select.clone().appendTo(select.parent());
JSFiddle-您可以復制/粘貼下拉菜單,如該JSFiddle所示
var select = $('.test'); $('#btn1').on('click', function () { select.clone().insertAfter(select); });
#btn1 { display:block; margin-bottom:10px; } .test{ display:block; margin-bottom:5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <button id="btn1">Duplicate</button> <select class="test"> <option value="1">option 1</option> <option value="2">option 2</option> <option value="3">option 3</option> <option value="4">option 4</option> <option value="5">option 5</option> </select>
更新:檢查此PHP Fiddle ,它演示了與您的問題類似的事情,它是可以從數據庫查詢或JSON響應中獲得的動態生成的下拉列表。
但是,如果要復制整個文本輸入集以及動態生成的下拉列表,請檢查此PHP Fiddle 2 ,該教程首先顯示了如何獲取容器div的內部html,然后附加了其他輸入集,並選擇。
更新2: 發表評論
要為每個下拉列表提供唯一的id
,請為第一個動態生成的下拉列表提供一個ID,以使用此js代碼代替:
var html = $('#container').html(),
id = $('.test').first().attr('id');
id = id.replace(/drop/, '');
$('#btn1').on('click', function () {
$('#container').append(html);
id++;
$('.test').last().attr('id', 'drop' + id);
});
就像在PHP Fiddle 3中一樣 ,檢查控制台日志以查看每個人的id
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.