我一直在尝试做一些我认为非常简单的事情,但是不幸的是,我找不到合适的方法(我的PHP背景比jQuery / JS更强。
总体目标是添加一行,或者单击“添加更多”按钮,或者当用户单击任何自动完成字段时。
表代码为:
<div class="container">
<table border='1' style='border-collapse: collapse;' id="myTable">
<thead>
<tr>
<th>Product No</th>
<th>Qty</th>
<th>Description</th>
<th>Price</th>
<th>DEL</th>
</tr>
</thead>
<tbody>
<tr class='tr_input'>
<td><input type='text' class='produitno' id='produitno_1' placeholder='Enter productno' size="12"></td>
<td><input type='text' class='qty' id='qty_1' placeholder='Enter qty' size="5"></td>
<td><input type='text' class='description' id='description_1' size="50" readonly="readonly" ></td>
<td><input type='text' class='prix' id='prix_1' size="12" ></td>
<td><button onclick = "deleteRow(this)">REMOVE</button></td>
</tr>
</tbody>
</table>
<br>
<input type='button' value='Add more' id='addmore'>
</div>
脚本部分是:
<script>
//Count as a global variable, not local
var count=1;
$(document).ready(function(){
$(document).on('keydown', '.produitno', function() {
var id = this.id;
var splitid = id.split('_');
var index = splitid[1];
// Initialize jQuery UI autocomplete
$( '#'+id ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "db/getDetails.php",
type: 'post',
dataType: "json",
data: {
search: request.term,request:1
},
success: function( data ) {
response( data );
}
});
},
select: function (event, ui) {
$(this).val(ui.item.label); // display the selected text
var ID = ui.item.value; // selected value
// AJAX
$.ajax({
url: 'db/getDetails.php',
type: 'post',
data: {ID:ID,request:2},
dataType: "json",
success:function(response){
var len = response.length;
if(len > 0){
var produitno = response[0]['produitno'];
var description = response[0]['description'];
var prix = response[0]['prix'];
// Set value to textboxes
document.getElementById('description_'+index).value = description;
document.getElementById('prix_'+index).value = prix;
// ADD LINE
}
}
});
return false;
}
});
});
// Add more
$('#addmore').click(function(){
// Get last id
var produitno_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
var split_id = produitno_id.split('_');
// New index
var index = Number(split_id[1]) + 1;
// Create row with input elements
var html = "<tr class='tr_input'><td><input type='text' size='12' class='produitno' id='produitno_"+index+"' placeholder='Enter produitno'></td><td><input type='text' size='5' class='qty' id='qty_"+index+"' placeholder='Enter qty'></td><td><input type='text' class='description' size='50' readonly='readonly' id='description_"+index+"' ></td><td><input type='text' size='12' class='prix' id='prix_"+index+"' ></td><td><button onclick='deleteRow(this)'>REMOVE</button></td></tr>";
// Append data
$('tbody').append(html);
// Ajoute 1 à la variable count
count++;
});
});
function deleteRow(btn) {
if (count > 1){
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
count--;
};
};
</script>
我本来是想创建一个单独的名为“添加行”的函数,默认情况下,该函数将由$('#addmore')按钮调用,或者在设置文本框值后立即执行。这是正确的做法还是有更好的办法?
经过一整夜的睡眠,我终于找到了解决方案。我只是创建了一个单独的函数,该函数要么由按钮调用,要么在单击自动完成时执行。
...
// Set value to textboxes
document.getElementById('description_'+index).value = description;
document.getElementById('prix_'+index).value = prix;
addRow();
}
}
});
return false;
}
});
});
// Add more
$('#addmore')。click(addRow);
// FUNCTION
function addRow(){
// Get last id
var produitno_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
var split_id = produitno_id.split('_');
// New index
var index = Number(split_id[1]) + 1;
// Create row with input elements
var html = "<tr class='tr_input'><td><input type='text' size='12' class='produitno' id='produitno_"+index+"' placeholder='Enter produitno'></td><td><input type='text' size='5' class='qty' id='qty_"+index+"' placeholder='Enter qty'></td><td><input type='text' class='description' size='50' readonly='readonly' id='description_"+index+"' ></td><td><input type='text' size='12' class='prix' id='prix_"+index+"' ></td><td><button onclick='deleteRow(this)'>REMOVE</button></td></tr>";
// Append data
$('tbody').append(html);
// Ajoute 1 à la variable count
count++;
}
});