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>
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>
Hello I have a pop up view where i fetch the data and put it in a table like the image below.
the are values in QTY Field .The main task is that when i edit the QTY input text for example I make this 200 then after this there will be a new column added next to that column and will hold the remaining value .for example Initial 500 ,change to 200 then the next column will show(500-200)=300 ,and it will continue as i keep changing like below image .I trying to make something like the below one.
I am using blur event but the new column is creating at last not after the changing column and can't calculate the values.like i show in second image
my sample code is something like below
<table border="1" cellspacing="0">
<tr>
<th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
<th>S. No</th>
<th>First Name</th>
<th>Last Name</th>
<th>Tamil</th>
<th>English</th>
<th>Computer</th>
<th>Total</th>
</tr>
<tr>
<td><input type='checkbox' class='case'/></td>
<td>1.</td>
<td><input type='text' id='first_name' name='first_name[]'/></td>
<td><input type='text' id='last_name' name='last_name[]'/></td>
<td><input type='text' id='tamil' name='tamil[]'/></td>
<td><input type='text' id='english' name='english[]'/> </td>
<td><input type='text' id='computer' name='computer[]'/></td>
<td><input type='text' id='total' name='total[]'/> </td>
</tr>
</table>
<button type="button" class='delete'>- Delete</button>
<button type="button" class='addmore'>+ Add More</button>
<p>
<input type='submit' name='submit' value='submit' class='but'/></p>
****Javascript code**
var i=2;
$("#last_name").blur(function(){
var data="<tr><td><input type='checkbox' class='case'/></td><td>"+i+".
</td>";
data +="<td><input type='text' id='first_name"+i+"'
name='first_name[]'/></td> <td><input type='text' id='last_name"+i+"'
name='last_name[]'/></td><td><input type='text' id='tamil"+i+"'
name='tamil[]'/></td><td><input type='text' id='english"+i+"'
name='english[]'/></td><td><input type='text' id='computer"+i+"'
name='computer[]'/></td><td><input type='text' id='total"+i+"'
name='total[]'/></td></tr>";
$('table').append(data);
i++;
})
I Hope I make my question clear by the images help needed .Thanks
To append after row replace $('table').append(data) whith
$(data).insertAfter as demo below
var i=2;
var addRow = function(){
var data="<tr><td><input type='checkbox' class='case'/></td><td>"+i+". </td>";
data +="<td><input type='text' name='first_name[]'/></td> <td><input type='text' name='last_name[]'/></td><td><input type='text' name='tamil[]'/></td><td><input type='text' name='english[]'/></td><td><input type='text' name='computer[]'/></td><td><input type='text' name='total[]'/></td></tr>";
$(data).insertAfter($(this).closest('tr'))
i++;
}
$(document).on('blur', 'input[name="last_name[]"]', addRow)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" cellspacing="0">
<tr>
<th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
<th>S. No</th>
<th>First Name</th>
<th>Last Name</th>
<th>Tamil</th>
<th>English</th>
<th>Computer</th>
<th>Total</th>
</tr>
<tr>
<td><input type='checkbox' class='case'/></td>
<td>1.</td>
<td><input type='text' name='first_name[]'/></td>
<td><input type='text' name='last_name[]'/></td>
<td><input type='text' name='tamil[]'/></td>
<td><input type='text' name='english[]'/> </td>
<td><input type='text' name='computer[]'/></td>
<td><input type='text' name='total[]'/> </td>
</tr>
</table>
<button type="button" class='delete'>- Delete</button>
<button type="button" class='addmore'>+ Add More</button>
<p>
<input type='submit' name='submit' value='submit' class='but'/></p>
())
To calculate the diff you have to use the onchange event on first row to keep the original value (before change). Than on blur, when adding row, compute the difference beetwhen original saved value and actual value
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 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>
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>