使用鼠标悬停时获取数据
此代码有效,但您需要先选择或单击数据,然后再显示数据。我想要做的是使用鼠标悬停,然后将显示数据,因为输入和显示数据时有类似的数据,所以我认为我应该使用鼠标悬停,这样您就可以看到数据的差异。非常感谢您的帮助
<tr class='tr_input'>
<td><textarea rows="3" type='text' name='sear[]' class='form-control sear' id='sear_1'></textarea></td>
<td><textarea rows="3" type='text' name='fee[]' class='form-control fee' id='fee_1' ></textarea></td>
<td><textarea rows="3" type='text' name='description[]' class='form-control description' id='description_1' ></textarea></td>
<td><textarea rows="3" type='text' name='office[]' class='form-control office' id='office_1' ></textarea></td>
<td><input rows="3" type='text' name='amount[]' class='form-control amount payment' id='amount_1' ></td>
<td><input rows="3" type="text" id='fpay0' name='quantity[]' class="form-control qty payment" autocomplete="off"/></td>
<td><input type="text" class="form-control numeric_value0 subtotals" name="subtotal[]" id='subtotal_1' autocomplete="off"/></td>
</tr>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('keydown', '.sear', function() {
var id = this.id;
var splitid = id.split('_');
var index = splitid[1];
$( '#'+id ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "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 userid = ui.item.value; // selected id to input
// AJAX
$.ajax({
url: 'getDetails.php',
type: 'post',
data: {userid:userid,request:2},
dataType: 'json',
success:function(response){
var len = response.length;
if(len > 0){
var id = response[0]['id'];
var fee = response[0]['fee'];
var description = response[0]['description'];
var office = response[0]['office'];
var amount = response[0]['amount'];
var qty = response[0]['qty'];
var subtotal = response[0]['subtotal'];
document.getElementById('fee_'+index).value = fee;
document.getElementById('description_'+index).value = description;
document.getElementById('office_'+index).value = office;
document.getElementById('amount_'+index).value = amount;
}
}
});
return false;
}
});
});
// Add more
var index = 2;
$('#addmore').click(function(){
// Get last id
var lastarp_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
var split_id = lastarp_id.split('_');
// New index
var index = Number(split_id[1]) + 1;
// Create row with input elements
var html = "<tr class='tr_input'><td><textarea rows='3' type='text' name='sear[]' class='form-control sear' id='sear_"+index+"'></textarea></td><td><textarea rows='3' type='text' name='fee[]' class='form-control fee' id='fee_"+index+"' ></textarea></td><td><textarea rows='3' type='text' name='description[]' class='form-control description' id='description_"+index+"' ></textarea></td><td><textarea rows='3' type='text' class='form-control office' id='office_"+index+"' ></textarea></td><td><input rows='3' type='text' name='amount[]' class='form-control input-md amount paym' id='amount_"+index+"' ></td><td><input type='text' name='quantity[]' class='form-control qty paym' id='quantity_"+index+"' ></td><td><input type='text' class='form-control subtotals numeric_value' name='subtotal[]' id='subtotal_"+index+"' ></td></tr>";
// Append data
$('tbody').append(html);
$('.paym').keyup(function() {
var ids = $(this).attr("id").split("_");
// alert(ids[1]);
var sum = 0;
var f = $('#amount_'+ids[1]).val();
var p = $('#quantity_'+ids[1]).val();
sum = Number(f) * Number(p);
$('#subtotal_'+ids[1]).val(sum.toFixed(2));
var sums = 0;
$('.subtotals').each(function() {
sums += Number($(this).val());
});
sums = sums;
$('#total').val(sums.toFixed(2));
$('#tes').val(combines($('#total').val()));
});
index=index+1;;
});
$( "#delete" ).click(function() {
var rowCount = $('#tab_logic tr').length;
var del = rowCount - 2;
var ind = del-1;
if(del==2){
}else{
$("#tab_logic tr:eq("+ind+")").remove();
del=del-1;
var sums = 0;
$('.subtotals').each(function() {
sums += Number($(this).val());
});
sums = sums;
$('#total').val(sums.toFixed(2));
$('#tes').val(combines($('#total').val()));
}
});
//end
//start
$('.numeric_value').keyup(function() {
var sum = 0;
$('.numeric_value').each(function() {
sum += Number($(this).val());
});
sums = sums;
$('#total').val(sum.toFixed(2));
$('#tes').val(combines($('#total').val()));
});
$('.payment').keyup(function() {
var sum = 0;
var f = $('#fpay0').val();
var p = $('#amount_1').val();
sum = Number(f) * Number(p);
$('.numeric_value0').val(sum.toFixed(2));
var sums = 0;
$('.subtotals').each(function() {
sums += Number($(this).val());
});
sums = sums;
$('#total').val(sums.toFixed(2));
$('#tes').val(combines($('#total').val()));
});
//endold
})
</script>
this code works but you need to select or click the data first before displaying the data. What i want to do is to use mouse hover and data will display because there are similar data upon entering and displaying the data so i think i should use mouse hover so you can see the difference of the data. Your help is much appreciated
<tr class='tr_input'>
<td><textarea rows="3" type='text' name='sear[]' class='form-control sear' id='sear_1'></textarea></td>
<td><textarea rows="3" type='text' name='fee[]' class='form-control fee' id='fee_1' ></textarea></td>
<td><textarea rows="3" type='text' name='description[]' class='form-control description' id='description_1' ></textarea></td>
<td><textarea rows="3" type='text' name='office[]' class='form-control office' id='office_1' ></textarea></td>
<td><input rows="3" type='text' name='amount[]' class='form-control amount payment' id='amount_1' ></td>
<td><input rows="3" type="text" id='fpay0' name='quantity[]' class="form-control qty payment" autocomplete="off"/></td>
<td><input type="text" class="form-control numeric_value0 subtotals" name="subtotal[]" id='subtotal_1' autocomplete="off"/></td>
</tr>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('keydown', '.sear', function() {
var id = this.id;
var splitid = id.split('_');
var index = splitid[1];
$( '#'+id ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "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 userid = ui.item.value; // selected id to input
// AJAX
$.ajax({
url: 'getDetails.php',
type: 'post',
data: {userid:userid,request:2},
dataType: 'json',
success:function(response){
var len = response.length;
if(len > 0){
var id = response[0]['id'];
var fee = response[0]['fee'];
var description = response[0]['description'];
var office = response[0]['office'];
var amount = response[0]['amount'];
var qty = response[0]['qty'];
var subtotal = response[0]['subtotal'];
document.getElementById('fee_'+index).value = fee;
document.getElementById('description_'+index).value = description;
document.getElementById('office_'+index).value = office;
document.getElementById('amount_'+index).value = amount;
}
}
});
return false;
}
});
});
// Add more
var index = 2;
$('#addmore').click(function(){
// Get last id
var lastarp_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
var split_id = lastarp_id.split('_');
// New index
var index = Number(split_id[1]) + 1;
// Create row with input elements
var html = "<tr class='tr_input'><td><textarea rows='3' type='text' name='sear[]' class='form-control sear' id='sear_"+index+"'></textarea></td><td><textarea rows='3' type='text' name='fee[]' class='form-control fee' id='fee_"+index+"' ></textarea></td><td><textarea rows='3' type='text' name='description[]' class='form-control description' id='description_"+index+"' ></textarea></td><td><textarea rows='3' type='text' class='form-control office' id='office_"+index+"' ></textarea></td><td><input rows='3' type='text' name='amount[]' class='form-control input-md amount paym' id='amount_"+index+"' ></td><td><input type='text' name='quantity[]' class='form-control qty paym' id='quantity_"+index+"' ></td><td><input type='text' class='form-control subtotals numeric_value' name='subtotal[]' id='subtotal_"+index+"' ></td></tr>";
// Append data
$('tbody').append(html);
$('.paym').keyup(function() {
var ids = $(this).attr("id").split("_");
// alert(ids[1]);
var sum = 0;
var f = $('#amount_'+ids[1]).val();
var p = $('#quantity_'+ids[1]).val();
sum = Number(f) * Number(p);
$('#subtotal_'+ids[1]).val(sum.toFixed(2));
var sums = 0;
$('.subtotals').each(function() {
sums += Number($(this).val());
});
sums = sums;
$('#total').val(sums.toFixed(2));
$('#tes').val(combines($('#total').val()));
});
index=index+1;;
});
$( "#delete" ).click(function() {
var rowCount = $('#tab_logic tr').length;
var del = rowCount - 2;
var ind = del-1;
if(del==2){
}else{
$("#tab_logic tr:eq("+ind+")").remove();
del=del-1;
var sums = 0;
$('.subtotals').each(function() {
sums += Number($(this).val());
});
sums = sums;
$('#total').val(sums.toFixed(2));
$('#tes').val(combines($('#total').val()));
}
});
//end
//start
$('.numeric_value').keyup(function() {
var sum = 0;
$('.numeric_value').each(function() {
sum += Number($(this).val());
});
sums = sums;
$('#total').val(sum.toFixed(2));
$('#tes').val(combines($('#total').val()));
});
$('.payment').keyup(function() {
var sum = 0;
var f = $('#fpay0').val();
var p = $('#amount_1').val();
sum = Number(f) * Number(p);
$('.numeric_value0').val(sum.toFixed(2));
var sums = 0;
$('.subtotals').each(function() {
sums += Number($(this).val());
});
sums = sums;
$('#total').val(sums.toFixed(2));
$('#tes').val(combines($('#total').val()));
});
//endold
})
</script>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我无法发表评论(需要 50 声望),所以我发送了一个答案。
尝试鼠标悬停事件,替换点击。
就像那里:
I can't comment(need 50 reputation), so I send a answer.
Try mouseover event, in replace click.
like there: