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>
Related
I have the following table structure
<form method=POST class='form leftLabels'>
<table >
<tr >
<th >Code:</th>
<td ><input type='text' name='f[id]' size='60' value='10' /></td>
</tr>
<tr ><th >Name:</th>
<td ><input type='text' name='f[name]' size='60' value='Aa' /></td>
</tr>
// <<<< Here I would like to add a row
<tr >
<td class=' nogrid buttonsClass'><button type=submit>Save</button>
</td>
</tr>
</table>
</form>
The row that I am trying to add should have the following html:
<tr>
<th> Delete the record?</th>
<td><input type='checbox' name='delete' value=1></td>
</tr>
I have the following Javascript / jQuery code:
var trCnt=0;
$('table tr').each(function(){
trCnt++;
});
rowToInsertCheckbox = trCnt - 1;
$('table').after(rowToInsertCheckbox).append(
$(document.createElement('tr')),
$(document.createElement('td').html('Delete the record'),
$(document.createElement('td').html('Checkbox here?')),
);
which does find the right row after which the insert should be done, but the code does not work.
after() adds the new content after the target element, but outside it. tr need to be inside the table. In addition you need to append the td to the tr, not the table.
To place the new tr in your target position you can select the last tr in the table and use insertBefore(), like this:
let $newRow = $('<tr />').insertBefore('table tr:last');
$('<td>Delete the record?</td>').appendTo($newRow);
$('<td><input type="checkbox" name="delete" value="1"></td>').appendTo($newRow);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" class="form leftLabels">
<table>
<tr>
<th>Code:</th>
<td><input type="text" name="f[id]" size="60" value="10" /></td>
</tr>
<tr>
<th>Name:</th>
<td><input type="text" name="f[name]" size="60" value="Aa" /></td>
</tr>
<tr>
<td class="nogrid buttonsClass"><button type="submit">Save</button></td>
</tr>
</table>
</form>
One way to locate the row after which the content should be added is:
var tr = $("th").filter(function () {
return $(this).text() == "Name:";
}).closest("tr");
Then add the row:
$(tr).after("<tr><th> Delete the record?</th><td><input type='checkbox' name='delete' value=1></td></tr>");
$(document).ready(function() {
var tr = $("th").filter(function() {
return $(this).text() == "Name:";
}).closest("tr");
$(tr).after("<tr><th>Delete the record?</th>" +
"<td><input type='checkbox' name='delete' value=1></td>" +
"</tr>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method=POST class='form leftLabels'>
<table>
<tr>
<th>Code:</th>
<td><input type='text' name='f[id]' size='60' value='10' /></td>
</tr>
<tr>
<th>Name:</th>
<td><input type='text' name='f[name]' size='60' value='Aa' /></td>
</tr>
<tr>
<td class=' nogrid buttonsClass'><button type=submit>Save</button>
</td>
</tr>
</table>
</form>
Right now str.replace is only working for 1st row , i want str.replace to work on selected radio button row.
<tr>
<td><input onclick="myFunction()" type="radio" name="test" value="1"></td>
<td id = "demo">System Architect1 #BLANK1# test #BLANK2#</td>
<td>Edinburgh</td>
</tr>
<tr>
<td><input onclick="myFunction()" type="radio" name="test" value="2"></td>
<td id = "demo">System Architect2 #BLANK1# test #BLANK2#</td>
<td>Edinburgh</td>
</tr>
<tr>
<td><input onclick="myFunction()" type="radio" name="test" value="3"></td>
<td id = "demo">System Architect3 #BLANK1# test #BLANK2#</td>
<td>Edinburgh</td>
</tr>
<script>
function myFunction() {
var str = document.getElementById("demo").innerHTML;
var res = str.replace("#BLANK1#", "<input type='text' name='BLANK1' maxlength='50' />")
.replace("#BLANK2#", "<input type='text' name='BLANK2' maxlength='50' />")
.replace("#BLANK3#", "<input type='text' name='BLANK3' maxlength='50' />")
.replace("#BLANK4#", "<input type='text' name='BLANK4' maxlength='50' />");
document.getElementById("demo").innerHTML = res;
}
</script>
You cannot actually use the same id for every similar element. This is the reason why it is always replacing the first row.
Further, to actually do this, you have to change the id's first and then do some like this :
<tr>
<td><input onclick="myFunction(this)" type="radio" name="test" value="1"></td>
<td id = "demo1">System Architect1 #BLANK1# test #BLANK2#</td>
<td>Edinburgh</td>
</tr>
<tr>
<td><input onclick="myFunction(this)" type="radio" name="test" value="1"></td>
<td id = "demo2">System Architect2 #BLANK1# test #BLANK2#</td>
<td>Edinburgh</td>
</tr>
Following is by using Jquery but you can do it by javascript also if you are not using any jquery
<script>
function myFunction(element) {
var str = $(element).parent().next().html();
var res = str.replace("#BLANK1#", "<input type='text' name='BLANK1' maxlength='50' />")
.replace("#BLANK2#", "<input type='text' name='BLANK2' maxlength='50' />")
.replace("#BLANK3#", "<input type='text' name='BLANK3' maxlength='50' />")
.replace("#BLANK4#", "<input type='text' name='BLANK4' maxlength='50' />");
$(element).parent().next().html(res);
}
</script>
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>
I have a table and on button click i am adding row using .clone and adding id using .prop now What i want to do is i want to find text boxes with in tr and change ids for it How can i do it
Here is My html
<table class="table purchasemanagement customtabl-bordered " id="tblpurchaseproductdes">
<thead>
<tr>
<th><input type="checkbox" onclick="select_all()" class="check_all"></th>
<th>Product Description*</th>
<th>No's*</th>
<span class="error" id="purchse_no" style="color:red"></span>
<th>Capacity*</th>
<span class="error" id="purchse_errorcapacity" style="color:red"></span>
<th>Quantity</th>
<th>Full/Empty</th>
</tr>
</thead>
<tbody id="puchasedescbody">
<tr class="purchaserow">
<td><input class="case" type="checkbox"></td>
<td>
<select class='form-control drpdwn_pdtdescription' id='drpdwn_pdtdescription' name='pdtdescription'></select>
</td>
<td><input class='form-control pdtdesc_nos' id="no_1" name='nos' /></td>
<td><input class='form-control pdtdesc_capacity' id="capacity_1" name='capacity' /></td>
<td><input class='form-control pdtdesc_qty' id="quantity_1" name='quantity' readonly /></td>
<td><input class='case1 pdtdesc_full' type='checkbox' name='full' checked='checked'></td>
</tr>
</tbody>
</table>
js
$(".purchasemore").on('click', function() {
var cloneCount = 1;
// var row = $(".purchasemanagement tr:last").clone().find(':input').val('').end();
var row = $(".purchasemanagement tr:last").clone().prop('id', 'klon' + cloneCount);
// var test = $(this).find('input[name$="nos"]').attr("id");
// alert(test);
$('.purchasemanagement').append(row);
});
For my code It is Adding id for tr
i want to change id for nos,capacity
Thanks
In your commented code you need to access those elements using :
row.find('.pdtdesc_capacity').attr('id','capacity_' + cloneCount);
I have a html structure like this :
<table id="options-table">
<tr>
<td width="10">No.</td>
<td>Field 1</td>
<td>Field 2</td>
<td></td>
</tr>
<tr>
<td><input type="text" value="1" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="button" class='del' value='Delete' /></td>
</tr>
<tr>
<td><input type="text" value="2" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="button" class="add" value="Add More" /></td>
</tr>
</table>
And jQuery code like this
$('table').on('click','.del', function(){
$(this).parent().parent().remove();
});
$('table').on('click', '.add', function(){
$(this).val('Delete');
$(this).attr('class','del');
var appendTxt = "<tr><td><input type='text'/></td> <td><input type='text' /></td> <td><input type='text' /></td> <td><input type='button' class='add' value='Add More' /></td></tr>";
$("tr:last").after(appendTxt);
});
How can I add an autoincrementing number in the No. column so every time I add new row that field value will be filled with auto increase number and everytime I delete a row the number(s) below it will be re-calculated.
Here's the jsfiddle link
Thank you
Add name to you inputs(or it can be a class attribute) like that:
<input name="number" type="text" value="1"/>, and then update input values each time you change table.
$("input[name='number']").each(function(ind) {
$(this).val(ind + 1);
});
See Fiddle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table id="options-table_2">
<tr>
<td width="10">No.</td>
<td>Field 1</td>
<td>Field 2</td>
<td></td>
</tr>
</table>
<table id="options-table">
<tr>
<td><input type="text" value="1" id="txt_0"/></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="button" class='del' value='Delete' /></td>
</tr>
<tr>
<td><input type="text" value="2" id="txt_1"/></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="button" class="add" value="Add More" /></td>
</tr>
</table>
<script>
$('#options-table').on('click','.del', function(){
$(this).parent().parent().remove();
createAll();
});
$('#options-table').on('click', '.add', function(){
$(this).val('Delete');
$(this).attr('class','del');
var rowCount = $('#options-table tr').length;
var appendTxt = "<tr><td><input type='text' id='txt_"+rowCount+"'/></td> <td><input type='text' /></td> <td><input type='text' /></td> <td><input type='button' class='add' value='Add More' /></td></tr>";
$("tr:last").after(appendTxt);
updatedata();
});
function updatedata(){
var rowCount = $('#options-table tr').length;
for(i=0; i<rowCount; i++){
$("#txt_"+i).val(i);
}
}
function createAll(){
var rowCount = $('#options-table tr').length;
$('#options-table').html("");
for(i=0; i<rowCount; i++){
if(i==(rowCount-1)){
var appendTxt = "<tr><td><input type='text' id='txt_"+i+"'/></td> <td><input type='text' /></td> <td><input type='text' /></td> <td><input type='button' class='add' value='Add More' /></td></tr>";
}else{
var appendTxt = "<tr><td><input type='text' id='txt_"+i+"'/></td> <td><input type='text' /></td> <td><input type='text' /></td> <td><input type='button' class='del' value='Delete' /></td></tr>";
}
$('#options-table').append(appendTxt);
$("#txt_"+i).val(i);
}
}
</script>
</body>
</html>