Develop Reference

How to search by filter in a table with rowspan

I need to search all my table and display the corresponding line.
I can not display the result of the search correctly when the search is on the first column, this column contains a rowspan. Instead of displaying the 2 or 3 corresponding lines, it's just the first one displayed
Input search
<div>
<input id="searchInput" type="text" placeholder="Search.."
</div>
a table
<table border="1" id="mytable">
<thead>
<tr>
<th>Item1</th>
<th>Item2</th>
<th>Item3</th>
<th>Item4</th>
<th>Item5</th>
<th>Item6</th>
<th>Item7</th>
<th>Item8</th>
</tr>
</thead>
<tbody id="data">
<tr>
<td rowspan='1'>D20180910</td>
<td>10910</td>
<td>W1</td>
<td><input type="text" value="2018-09-11 07:36:32" id="iddb_164" ></td>
<td><input type="text" value="2018-09-11 18:47:00" id="iddb_320" ></td>
<td><input type="text" value="2018-09-11 20:28:54" id="iddb_166" ></td>
<td><input type="text" value="2018-09-13 11:40:00" id="iddb_318" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td rowspan='2'>D20180905</td>
<td>10905</td><td>T2</td>
<td><input type="text" value="2018-09-06 08:14:52" id="iddb_147" ></td>
<td><input type="text" value="2018-09-06 12:00:00" id="iddb_324" ></td>
<td><input type="text" value="2018-09-06 12:42:04" id="iddb_152" ></td>
<td><input type="text" value="" id="iddb_" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td>10905</td>
<td>W1</td>
<td><input type="text" value="2018-09-06 08:14:48" id="iddb_146" ></td>
<td><input type="text" value="2018-09-06 11:59:00" id="iddb_325" ></td>
<td><input type="text" value="2018-09-06 12:41:58" id="iddb_150" ></td>
<td><input type="text" value="2018-09-10 08:21:00" id="iddb_321" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td rowspan='3'>D20180905</td>
<td>20105</td><td>T2</td>
<td><input type="text" value="2018-09-06 08:14:52" id="iddb_112" ></td>
<td><input type="text" value="2018-09-01 12:12:00" id="iddb_753" ></td>
<td><input type="text" value="2018-10-06 12:50:04" id="iddb_725" ></td>
<td><input type="text" value="" id="iddb_" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td>20105</td>
<td>w1</td>
<td><input type="text" value="" id="iddb_146" ></td>
<td><input type="text" value="2018-07-06 10:00:00" id="iddb_412" ></td>
<td><input type="text" value="2018--07 13:21:58" id="iddb_356" ></td>
<td><input type="text" value="2018-07-10 09:51:00" id="iddb_741" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td>20105</td>
<td>F4</td>
<td><input type="text" value="2018-07-06 10:00:00" id="iddb_174" ></td>
<td><input type="text" value="" id="iddb_925" ></td>
<td><input type="text" value="" id="iddb_825" ></td>
<td><input type="text" value="2018-08-15 09:51:00" id="iddb_124" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
</tbody>
</table>
A javascript code
$(document).ready(function(){
$("#searchInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#mytable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});

How to get value of next input in <td> which is added dynamically

I append data to tbody which I get through ajax request. In backend I print data like this
echo "<tr>
<td><input type='text' name='sl_p_codes[]' id='p_code' value='{$data['p_code']}' ></td>
<td><input type='text' name='sl_products[]' id='qty' value='{$data['p_name']}' ></td>
<td><input type='text' id='product_qty' name='sl_p_qty[]' id='qt' value='01' size='2'></td>
<td><input type='hidden' name='sl_unit_cost[]' id='product_unit_price'></td>
<td><input type='text' id='product_total_cost' readonly name='sl_price[]' id='qty' value='{$data['p_price']}' ></td>
<td class='center'><a href='#' onclick='delrow(this);' class='btn btn-danger'>X</a></td>
</tr>";
If I change id='product_qty'(input field) the value of id='product_total_cost' (input field) should be updated with the value of id='product_unit_price'

You mean something like this:
$("#product_qty").on("change", function() {
$(this).closest("tr").find("#product_total_cost").val(
(parseFloat($(this).closest("tr").find("#product_unit_price").val()) * parseInt($(this).val())).toFixed(2)
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input type='text' name='sl_p_codes[]' id='p_code' value='ABC011'></td>
<td><input type='text' name='sl_products[]' id='qty' value='01'></td>
<td><input type='number' id='product_qty' name='sl_p_qty[]' id='qt' value='01' size='2'></td>
<td><input type='hidden' name='sl_unit_cost[]' id='product_unit_price' value="1.00"></td>
<td><input type='text' id='product_total_cost' readonly name='sl_price[]' id='qty' value='1.00'></td>
<td class='center'><a href='#' onclick='delrow(this);' class='btn btn-danger'>X</a></td>
</tr>
</table>

jquery nextall first get id

I am trying to get the id of the next input field when user exit the input field:
$("input").blur(function(){
var theid = $(this).attr('id');
var thefield = $(this).nextAll('input').first().attr('id');
alert(thefield);
});
Currently it returns undefined.
The HTML code is:
<table><tr>
<td>Number</td><td>Name</td>
<tr><td>1 <input type='text' name='deltagernummer[]' value='' size='6' id='r0' tabindex='1' /></td>
<td><input type='text' name='deltagernavn[]' value='' id='rr0' tabindex='-1' /></td></tr>
<tr><td>2 <input type='text' name='deltagernummer[]' value='' size='6' id='r1' tabindex='2' /></td>
<td><input type='text' name='deltagernavn[]' value='' id='rr1' tabindex='-1' /></td></tr>
</table>
What is the problem?
$("input").blur(function() {
var theid = $(this).attr('id');
var thefield = $(this).nextAll('input').first().attr('id');
alert(thefield);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>Number</td>
<td>Name</td>
<tr>
<td>1 <input type='text' name='deltagernummer[]' value='' size='6' id='r0' tabindex='1' /></td>
<td><input type='text' name='deltagernavn[]' value='' id='rr0' tabindex='-1' /></td>
</tr>
<tr>
<td>2 <input type='text' name='deltagernummer[]' value='' size='6' id='r1' tabindex='2' /></td>
<td><input type='text' name='deltagernavn[]' value='' id='rr1' tabindex='-1' /></td>
</tr>
</table>

.nextAll() scans for siblings. Although your <input>s are in the same level, they're not siblings. To "visualize", here's pseudo-HTML:
Child and child's sibling:
<parent>
<child>
<childs-sibling>
</parent>
Your case:
<parent>
<descendant>
<input>
</descendant>
<descendant-sibling>
<totally-unrelated-to-input>
</descendant-sibling>
</parent>
What you can do is climb up to the <tr> level, succeeding rows, get all inputs, get the first one and then get the id.
var id = $(this)
.closest('tr') // Get to the row level
.nextAll('tr') // Get all succeeding rows
.find('td > input') // Find the inputs. You may adjust the selector.
.eq(0) // Get the first input
.attr('id'); // Get its id, if any

Nextall() goes through siblings, your inputs have no siblings.
$("input").blur(function(){
var theid = $(this).attr('id');
var thefield = $(this).closest('tr').next().find('input').attr('id');
alert(thefield);
});
$("input").blur(function() {
var theid = $(this).attr('id');
var thefield = $(this).closest('tr').next().find('input').attr('id');
alert(thefield);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>Number</td>
<td>Name</td>
<tr>
<td>1 <input type='text' name='deltagernummer[]' value='' size='6' id='r0' tabindex='1' /></td>
<td><input type='text' name='deltagernavn[]' value='' id='rr0' tabindex='-1' /></td>
</tr>
<tr>
<td>2 <input type='text' name='deltagernummer[]' value='' size='6' id='r1' tabindex='2' /></td>
<td><input type='text' name='deltagernavn[]' value='' id='rr1' tabindex='-1' /></td>
</tr>
</table>

Update total in table row with jquery

I have a table
<table>
<tbody>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
</tbody>
</table>
How can I update the total input field when a change in quantity or price happens?
I have thought of something like
$('table tbody tr td').filter(':nth-child(1), :nth-child(2)').children('input').change(function() {
$(this).parent('td').siblings('td').filter(':nth-child(3)').val(?);
});
but it seems a bit unhandy.

You can use:
$('table tbody tr td').find('input').keyup(function() {
var total=0;
total=(parseInt($(this).parent('td').siblings('td').not(':nth-child(3)').find('input').val())||0)+(parseInt($(this).val())||0);
$(this).closest('tr').find('input:last').val(total)
});
Working Demo

Much easy to read and control if you can assign some dummy class to quantity, price and total input.
Something like this:
HTML
<table>
<tbody>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
</tbody>
</table>
Script
$('table tbody tr').find('.qty, .prc').on('keyup',function() {
var parent = $(this).parents('tr');
var quantity = parseInt(parent.find('.qty').val())||0;
var price = parseInt(parent.find('.prc').val())||0;
parent.find('.total').val(quantity*price);
});
Check working example here

Personally, i prefer not to select elements by their position. If you wind up changing them later, or adding another your code is broken.
I would do something like:
$(this).closest('tr').find('input[name=total]').val(?);

Using the same jQuery in multiple operations

I have a small question and I hope someone can help me with it :D
I’m trying to create a product table, in which a user just add the quantity of a product and the jquery makes the multiplication to its value and gives the result
I already made this, and it works well:
<script>
$(document).ready(function(){
$('#quantity_1').keyup(function(){
var price_1 = $("#price_1").val();
var quantity_1 = $("#quantity_1").val();
quantity_1 = quantity_1.replace(/[^0-9]+/g, '');
$("#quantity_1").val(quantity_1);
var total_1 = price_1 * quantity_1;
$( "#total_1" ).val( total_1.toFixed(2) );
});
});
</script>
<table border="1" cellpadding="5px" cellspacing="0" >
<tr>
<td>Product</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr>
<td>Product Name</td>
<td><input type="hidden" name="product[1][price]" id="price_1" value="10.00" />10.00</td>
<td><input type="text" name="product[1][quantity]" id="quantity_1" /></td>
<td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
</tr>
</table>
Working demo here:
http://jsfiddle.net/EnterateNorte/9kswL0gf/
But I would like to be able to add more than one line, like so:
<table border="1" cellpadding="5px" cellspacing="0" >
<tr>
<td>Product</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr>
<td>Name 1</td>
<td><input type="hidden" name="product[1][price]" id="price_1" value="10.00" />10.00</td>
<td><input type="text" name="product[1][quantity]" id="quantity_1" /></td>
<td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
</tr>
<tr>
<td>Name 5</td>
<td><input type="hidden" name="product[5][price]" id="price_5" value="10.00" />23.00</td>
<td><input type="text" name="product[5][quantity]" id="quantity_5" /></td>
<td><input type="text" name="product[5][total]" id="total_5" value="0" /></td>
</tr>
<tr>
<td>Name 3</td>
<td><input type="hidden" name="product[3][price]" id="price_3" value="130.00" />10.00</td>
<td><input type="text" name="product[3][quantity]" id="quantity_3" /></td>
<td><input type="text" name="product[3][total]" id="total_3" value="0" /></td>
</tr>
<tr>
<td>Name 4</td>
<td><input type="hidden" name="product[4][price]" id="price_4" value="12.00" />10.00</td>
<td><input type="text" name="product[4][quantity]" id="quantity_4" /></td>
<td><input type="text" name="product[4][total]" id="total_4" value="0" /></td>
</tr>
</table>
And if it isn’t to much trouble, I would be awesome if it would SUM all the totals and show a gran total at the end of the table :)

Use:
$(document).ready(function(){
$('[name*=quantity]').keyup(function(){
var price = $(this).parent().prev().find('input').val();
var quantity = $(this).val();
var total = price * quantity;
$(this).parent().next().find('input').val( total.toFixed(2) );
});});
Working Demo
Update: For showing Grand Total
var sum = 0;
//iterate through each textboxes and add the values
$('[name*=total]').each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseInt(this.value);
}
});
Working Demo

What you can do is to find the elements using their relative position instead of hard coded ids
$(document).ready(function () {
$('input[id^="quantity_"]').keyup(function () {
var $tr = $(this).closest('tr');
var price = $tr.find('input[id^="price_"]').val();
var quantity = this.value;
var total = (price * quantity) || 0;
$tr.find('input[id^="total_"]').val(total.toFixed(2));
});
});
Demo: Fiddle

I've updated your code in Fiddle. You need to change in your markup a bit.
<tr>
<td>Product Name</td>
<td><input type="hidden" class="price" ... />10</td>
<td><input type="text" class="quantity" ... /></td>
<td><input type="text" class="total" ... /></td>
</tr>
$(document).ready(function(){
$('.quantity').keyup(function(){
var parent = $(this).closest("tr");
var price = $(".price", parent).val();
var quantity = $(".quantity", parent).val();
var total = price * quantity;
$(".total", parent).val(total.toFixed(2));
});
});

I would recommend you to use common class
HTML:
<tr>
<td>Name 5</td>
<td>
<input type="hidden" class="price" value="10.00" />10.00</td>
<td>
<input type="text" class="quantity" />
</td>
<td>
<input type="text" class="total" value="0" />
</td>
</tr>
<tr>
<td>Name 3</td>
<td>
<input type="hidden" class="price" value="130.00" />130.00</td>
<td>
<input type="text" class="quantity" />
</td>
<td>
<input type="text" class="total" value="0" />
</td>
</tr>
Script:
$('.quantity').keyup(function () {
var tr = $(this).closest('tr');
var price = tr.find('.price').val();
var quantity = $(this).val();
var total = price * quantity;
tr.find('.total').val(total.toFixed(2));
});
DEMO

Modify your table:
<table border="1" cellpadding="5px" cellspacing="0" id='table' >
<!-- your rows with inputs -->
<tr>
<td>
<input id='totalSum' value='0' type='text' />
</td>
</tr>
</table>
Make all your 'total' inputs readonly by adding 'readonly' attribute.
js code:
$(document).ready(function(){
$('[name*=quantity]').keyup(function(){
var total = 0;
$('#table tr').each(function(i,item){
var price = parseFloat($(item).find('[name*=price]').val().replace(',','.'));
var quantity = parseInt($(item).find('[name*=quantity]').val());
if(!isNaN(price) && !isNan(quantity)){
total += price*quantity;
}
});
$("#totalSum").val(total.toFixed(2));
});
});