Trying to use the button "subtract" to remove the row it's clicked in.
"add" button is working well.
Html:
<table id="mytable" width="250px" border="0" cellspacing="0" cellpadding="0" style="text-align:center;>
<thead>
<tr class="product">
<th style="text-align:center;"><strong>Item</strong></th>
<th style="text-align:center;"><strong>Qty.</strong></th>
<th style="text-align:center;"><strong>Remarks</strong></th>
</tr>
</thead>
<tr name="product" class="product">
<td width="100px"><input type="text" width="100px" name="product" id="product" /></td>
<td width="5px"><input type="text" width="5px" size="1" maxlength="2" name="qty" id="qty" /></td>
<td width="100px"><input type="text" width="100px" height="14px" name="remarks" id="remarks" /></td>
<td><input type="submit" name="add" id="add" value="+" /></td>
<td><input type="submit" name="subtract" id="subtract" value="-" /></td>
</tr>
</table>
What I'm using:
<script type="text/javascript">
$(document).ready(function() {
$("#add").click(function() {
$('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
$('#mytable tbody>tr:last #product').val('');
$('#mytable tbody>tr:last #qty').val('');
$('#mytable tbody>tr:last #remarks').val('');
$('#mytable tbody>tr:last #add').val('+');
return false;
});
});
Could anyone help?
You can't use the same id more than one time on a page..
Thus if each row has a button to delete that row you probably want to use a class name for targeting the element.
Thus I suggest switching to classes like this:
<td><input type="submit" name="subtract" class="subtract" value="-" /></td>
then in JS
$("input.subtract").click(function() {
$(this).closest("tr").remove();
});
You also need to fix your add button since if you have more than one row you will have duplicate ID's
$("#subtract").click(function(e){
$(this).closest(".product").remove();
e.preventDefault();
});
I'd also recommend using a class instead of an id for subtract and add since you'll have multiple copies in the dom and it's considered bad manners to have duplicate IDs.
Similar to Matt's code, this would also work:
$("input.subtract").click(function() {
$(this).parents("tr").remove();
});
I don't know if one is better than the other, but I can confirm that this code works.
Related
Hello i am created one table with zero row and a "add row button" in which when user click on "add row buttton" one extra row for that table in created using javascript. In table row i am creating three input field as name, address and mobile number. Now i want, when user changing moblie number filed then the jquery must be call as shown in bellow but its now working what should i do??
The code for creating table row and jquery which is not working as below..
<form action "..." mehtod="post">
<table id="table1">
<thead>
<tr>
<th>name</th>
<th>address</th>
<th>mobile</th>
</tr>
</thead>
<tbody>
</table>
<button id="insertrowbutton" type="button" float: right;" onclick="insertrow()">Insert new row</button>
<input type="submit" value="submit" name="submit">
</form>
<script>
function insertrow() {
document.getElementById("table1").insertRow(-1).innerHTML = '<td> <input type="text" name="name[]"> </td><td> <input type="text" name="address[]"></td> <td><input type="number" name="mobile[]"</td>
}
</script>
<script type="text/javascript">
$('input[name^="mobile"]').on('change', function() {
alert($(this).val());
});
</script>
You're creating new elements all the time, so the change handler isn't bound to them. Try this instead, which will ensure that the change listener is applied.
$(document).on('change', 'input[name^="mobile"]',function() {
alert($(this).val());
});
Use this and it will work:
$(document).on('change', 'input[name^="mobile"]', function() {
alert($(this).val());
});
Please note you have invalid code in your button float: right;"
demo
function insertrow() {
document.getElementById("table1").insertRow(-1).innerHTML = '<td> <input type="text" name="name[]"> </td><td> <input type="text" name="address[]"></td> <td><input type="number" name="mobile[]"</td>'
}
$(document).on('change', 'input[name^="mobile"]', function() {
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action "..." mehtod="post">
<table id="table1">
<thead>
<tr>
<th>name</th>
<th>address</th>
<th>mobile</th>
</tr>
</thead>
<tbody>
</table>
<button id="insertrowbutton" type="button" onclick="insertrow()">Insert new row</button>
<input type="submit" value="submit" name="submit">
</form>
How am I able to detect change in html table on any cell? Currently I can only detect change in one cell, I could repeat the same code for all table cell ID but wondering if there is an efficient way.
Note that I have other inputs in my form and only wish to detect ones relevant to the table below:
Code:
html:
<table id="myTable" border="1" data-mini="true" >
<tbody>
<tr>
<th>Drawing Number</th>
<th>Description</th>
<th>Sheet Number</th>
<th>Issue</th>
</tr>
<tr>
<td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td>
<td><input name="drawing-d-1" type="text" /></td>
<td><input name="drawing-s-1" type="text" /></td>
<td><input name="drawing-i-1" type="text" /></td>
<td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td>
<td><input name="drawing-d-2" type="text" /></td>
<td><input name="drawing-s-2" type="text" /></td>
<td><input name="drawing-i-2" type="text" /></td>
</tr>
</tbody>
</table>
javascript:
var drawing_input = 'drawing-n-1';
$('#'+drawing_input).change(function(e) {
alert("aha");
var data = $('#'+drawing_input).val();
});
With jQuery you needn't be so specific. Just change the selector to listen for all <input>s.
$('input').on('change',
This selector will pick every <input> on the page.
Or if you need to isolate the table's inputs, add the table's id in the selector.
$('#xTable input').on('change'...
This selector will pick every <input> within the table.
Saw that you needed only to listen for inputs with ids. If so then you can use the brackets and ^=:
$("#xTable input[id^='drawing-n-']").on('change'....
This means get any <input> that has an [ id that starts ^= with "drawing-n-" ] which is in a <table> with the id of xTable.
That selector will pick only input#drawing-n-1 and input#drawing-n-2
Demo
$("#xTable input[id^='drawing-n-']").on('change', function(e) {
var data = $(this).val();
console.log(data);
});
<table id="xTable" border="1" data-mini="true">
<tbody>
<tr>
<th>Drawing Number</th>
<th>Description</th>
<th>Sheet Number</th>
<th>Issue</th>
</tr>
<tr>
<td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td>
<td><input name="drawing-d-1" type="text" /></td>
<td><input name="drawing-s-1" type="text" /></td>
<td><input name="drawing-i-1" type="text" /></td>
<td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td>
<td><input name="drawing-d-2" type="text" /></td>
<td><input name="drawing-s-2" type="text" /></td>
<td><input name="drawing-i-2" type="text" /></td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
event delegation
$("tbody").on("change", "input", function () {
console.log(this.name, this.value)
});
In the screenshot, I want to be able to use the onClick event of the edit image to make the 5 proceeding text boxes of the same row editable. By default I have set them 'readonly'. I have looked for other solutions but I am not sure how to reference the current row.
<table class = "idtable" cellspacing="0">
<tr style="background-color:#999999;color:white">
<th width="200px" class="tablehead">Type</th>
<th width="200px" class="tablehead">Value</th>
<th width="200px" class="tablehead">State</th>
<th width="200px" class="tablehead">Status</th>
<th width="200px" class="tablehead">Entry Date</th>
<th width="100px" class="tablehead">Edit</th>
<th width="100px" class="tablehead">Delete</th>
</tr>
<tr style="text-align:center">
<td class="idtable-borderleft"><input id="idType" class="readonly" type="text" value="INSTSERVICES" readonly></td>
<td class="idtable-bordermid"><input id="idValue" class="readonly" type="text" value="1234 " readonly></td>
<td class="idtable-bordermid"><input id="idState" style="font-size:85%" class="readonly" type="text" value="UNMODIFIED" readonly></td>
<td class="idtable-bordermid"><input id="idStatus" class="readonly" type="text" value="Active" readonly></td>
<td class="idtable-bordermid"><input id="idStartDate" class="readonly" type="text" value="2015-03-17" readonly></td>
<td class="idtable-bordermid"><img onclick="editRow()" src="https://localhost:8443/xxxxx/images/edit.png"></td>
<td class="idtable-borderright"></td>
</tr>
<tr>
<td colspan="7"><input style="margin-left:50%; margin-top: 5px" type="submit" value="Update"></td>
</tr>
</table>
Don't use the onClick tag.
Attach to the click event using jQuery, then traverse the DOM to find the row and finally manipulate the input tags.
In this example, I assume that you added a class of btnedit to the image:
$('.idtable .btnedit').click(function(){
var row = $(this).closest('tr'); //find the parent row
var inputs = $('input', row); //find all the inputs inside the row
inputs.prop('readonly', false); //change the attribute
});
Fiddle: http://jsfiddle.net/o26q8w6j/
You need to use something like jQuery editable.
Try double clicking text in below demo
http://www.appelsiini.net/projects/jeditable/default.html
You need to fire ajax call to update data in database.
I am new in JavaScript, I have a html table with two text fields and add button and now I write a little jquery script which generate two more text fields when click on add button all this work success but my problem is how to put different names and ids of these dynamically generated fields. My codes are below.
HTML Code
<table width="50%" border="1" cellspacing="0" cellpadding="0" class="table">
<tr>
<td>ACC_CODE</td>
<td>ACC_NAME</td>
<td>ACTION</td>
</tr>
<tr>
<td> <input type="text" class="acc_code" name="acc_code" id="acc_code"/></td>
<td> <input type="text" class="click" name="parentinput" id="parentinput" /></td>
<td> <input type="button" value="Add New" class="addNew" name="addNew" /></td>
</tr>
</table>
Jquery Code
$(document).ready(function() {
$('.addNew').live({
click: function(){
$('.table tr:last').after('<tr><td><input type="text" class="acc_code" name="acc_codes" id="acc_codes"/></td><td><input type="text" class="click" name="parentinputs" id="parentinputs" /></td><td><input type="button" value="Add New" class="add" name="add" /></td></tr>');
});
});
Please any help how to generate different names and ids of these fields.
I would use on() ( and off() ).
You set it to the parent container (in this case the table) and listen to the class 'addNew'.
Any time a new item with class="addNew" is added to the table, it will be active.
<table width="50%" border="1" cellspacing="0" cellpadding="0" class="table">
<tr>
<td>ACC_CODE</td>
<td>ACC_NAME</td>
<td>ACTION</td>
</tr>
<tr>
<td> <input type="text" class="acc_code" name="acc_code" id="acc_code"/></td>
<td> <input type="text" class="click" name="parentinput" id="parentinput" /></td>
<td> <input type="button" value="Add New" class="addNew" name="addNew" /></td>
</tr>
</table>
<script>
$(document).ready(function() {
$('.table').on('click', '.addNew', function() {
$('.table tr:last').after('<tr><td><input type="text" class="acc_code" name="acc_codes" id="acc_codes"/></td><td><input type="text" class="click" name="parentinputs" id="parentinputs" /></td><td><input type="button" value="Add New" class="addNew" name="add" /></td></tr>');
});
});
</script>
But notice: in your code you did this:
<input type="button" value="Add New" class="add" name="add" />
Of course this will not work; it has to be class="addNew"
First of all .live is depreciated since jq 1.7
Use .delegate
so..
$(document).ready(function() {
var idIndex=1;
$(document).delegate("click",".addNew",function() {
$('.table tr:last').after('<tr><td><input type="text" class="acc_code" name="acc_codes" id="acc_codes_'+idIndex+'"/></td><td><input type="text" class="click" name="parentinputs" id="parentinputs_'+idIndex+'" /></td><td><input type="button" value="Add New" class="add" name="add" /></td></tr>');
idIndex++;
});
});
I have a suggestion that may work fine,
why not make the input field to be an array,
so when you submit it, it will be a group of input group together
or you can easily make the name id's to be base on tr index
like name_1 and id_1, name_2 and id_2
I need a function that allows my client to add more divs on the form or not, clicking on a button (+) for example, like a loop
this loop should repet divs and the button to add more divs, like bellow on the pic
does anybody has an ideia of how to do it?
is expand collapse the best way of doing it?
Thank you very much!
I am not certain what is your desire so I post both options:
If you want to expand hidden existing fields and asuming you can use JQUery:
<table>
<tr>
<th>Field1</th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<th>Field2</th>
<td><input type="text" value="" /></td>
</tr>
<tr class="hiddenarea" style="display: none;">
<th>Field3 (Hidden)</th>
<td><input type="text" value="" /></td>
</tr>
</table>
<input id="show_hide" value="Collapse/Expand" />
<script type="text/javascript">
$("#show_hide").click(function() {
$(".hiddenarea").toggle();
});
</script>
///////////////////////////////////
The second solution to add a new line to the table is:
<table id="mytable">
<tr>
<th>Field1</th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<th>Field2</th>
<td><input type="text" value="" /></td>
</tr>
</table>
<input id="show_hide" value="Collapse/Expand" />
<script type="text/javascript">
$("#show_hide").click(function() {
$("#mytable").append('<tr><td>New field</td><td><input type="text" value="" /></td></tr>');
});
</script>