see FIDDLE DEMO
Can anyone guide me on keypress event, I can't get my input values right?
$(document).on('keydown', $('#table1 tbody tr td input'), function (e) {
var oldValue ='?';//get the input value before keypress or edit
var newValue = "?"; //get the input value after keypress or edit
$('#table2').find('tbody tr').each(function (i) {
var $td2 = $(this).find('td input:text');
if (oldValue == $td2.val()){
$td2.val(newValue);
}
});
});
and $(document).on('keydown', $('#table1 tbody tr td input'), function (e) { should only apply on table 1 first column ,right now it also applying when keypress on table1 column 2 is triggered.
Does if I edit "Apple" to "Apple Pie", Apple from table 2 will automatically change to "Apple Pie".
Try this:
$(document).off('keydown').on('keydown', $('#table1 tbody tr td input'), function (e) {
var oldValue =$(e.target).val();//get the input value before keypress or edit
$(document).on('keyup', $('#table1 tbody tr td input'),function(e){
$('#table2').find('td input').each(function(){
if($(this).val() === oldValue){
$(this).val($(e.target).val());
}
$(document).off('keyup');
});
});
});
Try this now:
$(document).off('keydown').on('keydown', '#table1 input:first', function (e) {
var oldValue =$(e.target).val();//get the input value before keypress or edit
$(document).on('keyup', '#table1 input:first',function(e){
$('#table2').find('td input:first').val($(e.target).val());
$(document).off('keyup');
});
});
here is fiddle
here is the snippet for better understand i have changed the event
Reason: if you wish to instant change
HTML CODE
<form id='form1'>
<table id='table1'>
<tbody>
<tr>
<td>
<input type='text' class="1" value="Apple" />
</td>
<td>
<input type='text' value="" />
</td>
</tr>
<tr>
<td>
<input type='text' class="2" value="Banana" />
</td>
<td>
<input type='text' value="" />
</td>
</tr>
</tbody>
</table>Table2
<table id='table2'>
<tbody>
<tr>
<td>
<input type='text' class="1" value="Apple" />
</td>
</tr>
<tr>
<td>
<input type='text' class="2" value="Banana" />
</td>
</tr>
<tr>
<td>
<input type='text' class="3" value="Banana" />
</td>
</tr>
</tbody>
</table>
<br />
JAVASCRIPT CODE
$(document).on('keyup', '#table1 tbody tr td input', function (e) {
var cls = $(this).attr('class');
var oldValue ='?';//get the input value before keypress or edit
var newValue = "?"; //get the input value after keypress or edit
newValue = $(this).val();
$('#table2').find('tbody tr').each(function (i) {
var targInp = $(this).find('td input.'+cls)//$(this).find('td input:text')hasClass(cls);
oldValue = $(this).find('td input.'+cls).val();
console.log('got it', oldValue);
if (oldValue != newValue){
targInp.val(newValue);
}
});
});
Related
I am trying to put a 'Delete' button after each of the row of my table.The delete button should function in such a way that it should only get activated when a new row is added. And if out of two rows one row is deleted the delete button of the existing row should also get deactivated.Any help will be appreciated. Thanks.
var regex = /^([a-zA-Z0-9 _-]+)$/;
var cindex = 0;
$(document).on('click','.Buttons', function(e) {
var count = $('table tr:last input:text').filter((_,el) => el.value.trim() == "").length;
if(count || !$('select:last').val()){
alert("Please fill all the fields in the current row");
return false;
}
var $tr = $('#dataTable tbody tr:last');
var $clone = $tr.clone(true);
cindex++;
$clone.find(':input').not('select').val('').attr('disabled', true);
$clone.attr('id', 'id'+(cindex) ); //update row id if required
//update ids of elements in row
$clone.find("*").each(function() {
var id = this.id || "";
if(id != ""){
var match = id.match(regex) || [];
if (match.length == 2) {
this.id = match[1] + (cindex);
}
}
});
$tr.after($clone);
});
/*`For delete button*/
$(document).on("click", '.DeleteButton', function() {
$(this).closest("tr").remove();
});
/*for enable field*/
$(document).on("click", '.DeleteButton', function() {
$(this).closest("tr").remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" class="graphtable">
<thead>
<tr>
<td class="headingalign" width="16%">Links</td>
<td class="headingalign" width="32%">Desciption</td>
<td class="headingalign" width="16%">Image</td>
<td class="headingalign" width="16%">URL</td>
<td class="headingalign" width="16%"></td>
</tr>
</thead>
<tbody>
<tr id="id01" name="row">
<td>
<select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()" >
<option value="">Select</option>
<option value="GDS">Guides</option>
<option value="LOF">Latest Offers</option>
<option value="TEM">Templates</option>
<option value="VID">Videos</option>
</select>
</td>
<td>
<input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext" size="85" value="{//RESPONSE}" />
</td>
<td>
<input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" />
</td>
<td>
<input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" />
</td>
<td>
<input tabindex="6" id="Button4" value="Delete Row" disabled="true" class="DeleteButton" name="Button4" type="button" />
</td>
</tr>
</tbody>
</table>
<div class="buttonarea">
<ul>
<li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
</ul>
</div>
You can get the count of rows in the table on every 'Add New Row' button and 'Delete Row' button click by:
var Count = $('#dataTable tr').length;
Then using the value of Count you can enable/disable the delete button e.g
if(Count < 2 )
//code to disable
else
//code to enable
I don't know if I get your question right, but I would try to do it like so:
I would handle this over a class namend 'active'. You also can give this class a disabled style. Also I would toggle the show/hide function of jquery if the button was clicked. And if one button is the last man standing - I would hide all. So it cant be clicked anymore. You can also ignore the 'active'-Class if you juste need to show/hide the buttons. The buttons should have a specific class 'del-btn'.
Note: Class 'active' is just for showing the button but disable/enable. Show/hide is for 'removing' the button.
var regex = /^([a-zA-Z0-9 _-]+)$/;
var cindex = 0;
$(document).on('click','.Buttons', function(e) {
var count = $('table tr:last input:text').filter((_,el) => el.value.trim() == "").length;
if(count || !$('select:last').val()){
alert("Please fill all the fields in the current row");
return false;
}
var $tr = $('#dataTable tbody tr:last');
var $clone = $tr.clone(true);
cindex++;
$clone.find(':input').not('select').val('').attr('disabled', true);
$clone.attr('id', 'id'+(cindex) ); //update row id if required
//update ids of elements in row
$clone.find("*").each(function() {
var id = this.id || "";
if(id != ""){
var match = id.match(regex) || [];
if (match.length == 2) {
this.id = match[1] + (cindex);
}
}
});
// If you want to activate ALL buttons:
$('.del-btn').addClass('active');
// If just the added row should be active:
$clone.find('.del-btn').addClass('active');
$(".del-btn").show();
$tr.after($clone);
});
/*`For delete button*/
$(document).on("click", '.DeleteButton', function() {
if(!$(this).hasClass('active')){
// removing is allowed
$(this).closest("tr").remove();
// Now you can check, if the rest should be shown or not
var btns = $('.del-btn').length; // count the buttons in the dom
if(btns>0){
if(btns == 1){
$(".del-btn").hide();
}else{
$(".del-btn").show();
}
}
}else{
// removing is disallowed
}
});
``````````````````````````for enable field``````````````````````
$(document).on("click", '.DeleteButton', function() {
$(this).closest("tr").remove();
});
I have to clone my <tr> and I have list of checkbox like code below and when I add new row with list of checkbox and then I click on check box to show value in textbox field_resultsthe value not show only on first textbox not yet clone.
How when I add new tr and then when I click on which list of checkbox in which tr they will show value of my click in the same tr.
$("#add-new").on("click", function () {
$tr = $(this).closest("tr").next().clone(true);
$tr.insertAfter($(this).closest("tr"));
});
$(document).ready(function () {
$checks = $('#mych_box :checkbox');
$checks.on('change', function () {
var string = $checks.filter(":checked").map(function (i, v) {
return this.value;
}).get().join(",");
console.log(string);
$('#field_results').val(string);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<button type="button" id="add-new">Add New</button>
</td>
</tr>
<tr>
<td>
<input type="text" id="field_results" name="field_results[]"/><br>
<div class="multiselect" style="height: 100px;width: auto;" id="mych_box">
<label>
<input type="checkbox" id="virt_software_chb1" name="virt_software[]" value="White"/>White
<input type="checkbox" id="virt_software_chb2" name="virt_software[]" value="Red"/>Red
<input type="checkbox" id="virt_software_chb3" name="virt_software[]" value="Blue"/>Blue
</label>
</div>
</td>
</tr>
As defined above use true in clone to bind default events and use class instead of id to group element
$(".virt_software_chb").on('change', function () {
var string = $(this).closest('td').find('.virt_software_chb').filter(":checked").map(function (i, v) {
return this.value;
}).get().join(",");
$(this).closest('td').find('.field_results').val(string);
});
$("#add-new").on("click", function () {
$tr = $(this).closest("tr").next().clone(true);
$tr.insertAfter($(this).closest("tr"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<button type="button" id="add-new">Add New</button>
</td>
</tr>
<tr>
<td>
<input type="text" class="field_results" name="field_results[]"/><br>
<div class="multiselect" style="height: 100px;width: auto;" id="mych_box">
<label>
<input type="checkbox" class="virt_software_chb" name="virt_software[]" value="White"/>White
<input type="checkbox" class="virt_software_chb" name="virt_software[]" value="Red"/>Red
<input type="checkbox" class="virt_software_chb" name="virt_software[]" value="White"/>White
</label>
</div>
</td>
</tr>
</table>
withDataAndEvents (default: false)
A Boolean indicating whether event handlers should be copied along with the elements. As of jQuery 1.4, element data will be copied as well. - clone()
Try passing in true and see what you get.
$tr = $(this).closest("tr").next().clone(true);
I have a table that populates a table row with data when a checkbox in the rows first column is clicked. That part is working correctly. There is a header column with a 'Select All' checkbox. When that checkbox is selected, all rows should be populated and corresponding checkbox selected. This is working correctly on IE, but on Chrome and Firefox the data is populating but the checkboxes are not being selected. Any ideas?
$('.selectAll input[type="checkbox"]').change(function () {
var thistable = $(this).parents('table');
if (this.checked) {
populateOptions(thistable);
thistable.find('.hiddenUntilOrder').addClass('showItems');
thistable.find('tr').each(function () {
$(this).find('.distribution').rules("add", { required: true, messages: { required: "" } });
});
thistable.find('.checkbox').prop("checked", true);
} else {
thistable.find('.hiddenUntilOrder').removeClass('showItems').rules("remove");
thistable.find('tr').each(function () {
$(this).find('.distribution').rules("remove");
});
thistable.find('.checkbox').prop("checked", false);
}
});
Take a moment and read Decoupling Your HTML, CSS, and JavaScript - Philip Walton.
$('.js-selectall').on('change', function() {
var isChecked = $(this).prop("checked");
var selector = $(this).data('target');
$(selector).prop("checked", isChecked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="js-selectall" data-target=".js-selectall1" />
<table>
<tr>
<td><input type="checkbox" class="js-selectall1" /> </td>
<td><input type="checkbox" class="js-selectall1" /> </td>
<td><input type="checkbox" class="js-selectall1" /> </td>
<td><input type="checkbox" class="js-selectall1" /> </td>
</tr>
<tr>
<td><input type="checkbox" class="js-selectall1" /> </td>
<td><input type="checkbox" class="js-selectall1" /> </td>
<td><input type="checkbox" class="js-selectall1" /> </td>
</tr>
</table>
Reusable and loosely coupled.
I have just coded in fiddle. Please look into it.
$(document).ready(function(){
$('#selectAll').click(function(){
$('.selectRow').prop('checked', true);
if(!$(this).prop("checked")) {
$('.selectRow').prop('checked', false);
}
});
$('.selectRow').change(function() {
if(!$(this).prop("checked")) {
$('#selectAll').prop('checked', false);
} else {
if ($('.selectRow:checked').length === $('.selectRow').length) {
$('#selectAll').prop('checked', true);
}
}
});
});
https://jsfiddle.net/sbwfcxnr/2/
My inputs:
<input id="id_name" name="name"/>
<input id="id_age" name="age"/>
<button id="add_btn"></button>
After every click on button add_btn I need append my table(<tr>) with form input value. At the start, the table is empty. Only <tbody>.
<table class="mytab">
<tbody>
<tr>
<td> HERE_VALUE_FROM_NAME_FIELD</td>
<td>HERE_VALUE_FROM_AGE_FIELD</td>
</tr>
<tr>
<td> HERE_NEXT_VALUE_FROM_NAME_FIELD</td>
<td>HERE_NEXT_VALUE_FROM_AGE_FIELD</td>
</tr>
</tbody>
</table>
Onclick function:
$("#myform").on('click', "#add_btn", function(e) {
e.preventDefault();
//fill table
});
Try like this:
HTML
<input id="id_name" name="name"/>
<input id="id_age" name="age"/>
<button id="add_btn">click</button>
<table border="1" class="mytab"></table>
JQuery:
$("#add_btn").on('click', function(e) {
e.preventDefault();
var name = $('#id_name').val(),
age = $('#id_age').val();
$('<tr><td>'+name+'</td><td>'+age+'</td></tr>').appendTo( $('.mytab') );
});
DEMO
http://jsfiddle.net/jogesh_pi/dfg2R/
Helpful link:
appendTo()
A little search about jQuery DOM will give you the answer. see jQuery.append()
$( '#table_id' ).append(
$('<tr />').append(
$('<td/>').text($('#id_name').value())
).append(
$('<td/>').text($('#id_age').value())
)
);
You can use the insertRow and insertCell on the returned row.
http://jsfiddle.net/dfg2R/2/
insertCell
insertRow
Here is an example:
$("#myform").on('click', "#add_btn", function(e) {
e.preventDefault();
var table = $("table.mytab")[0]
var newRow = table.insertRow(0);
var newCell = newRow.insertCell();
newCell.innerText = $("#id_name").val();
var newCell = newRow.insertCell();
newCell.innerText = $("#id_age").val();
});
If you want to use jQuery you could use .append()
$(".myTab tbody").append("<tr><td>" + valueName+ "</td><td> + valueAge + </td></tr>");
I need to create sum of the values selected, but i have small problem with the jquery bit.
My html table
<TR>
<TD>
<INPUT disabled onchange=updateDetails() value=33441 CHECKED type=checkbox name=invoiceRow dpieagent_iecontroltype="5"><INPUT value=false type=hidden name=isProfFee></TD>
<TD>Professional fees for Searches</TD>
<TD>285.00</TD></TR>
<TR>
<TD><INPUT onchange=updateDetails() value=36486 CHECKED type=checkbox name=invoiceRow dpieagent_iecontroltype="5"><INPUT value=false type=hidden name=isProfFee></TD>
<TD>Professional fees</TD>
<TD>3213.03</TD></TR>
my javascript is:
where #InvoiceItemsRows is <tbody> tag
function updateDetails() {
$("#InvoiceItemsRows input[type=checkbox][checked]").parent().last().each(
function(index, value) {
alert(value.html());
}
);
}
Javascript, maybe not as fancy as some of the other ones people have posted but it makes sense.
$(document).ready(function() {
$('[name=invoiceRow]').click(function() {
updateDetails();
});
function updateDetails() {
var total = 0;
var currentnum = 0;
$("input:checked").each(
function(index, value) {
currentnum = $(this).val();
currentnum = Number(currentnum);
total = total + currentnum;
});
alert(total);
}
});
HTML
<TR>
<TD>
<INPUT disabled value="33441" CHECKED type="checkbox" name="invoiceRow" dpieagent_iecontroltype="5"><INPUT value=false type=hidden name=isProfFee></TD>
<TD>Professional fees for Searches</TD>
<TD>285.00</TD></TR>
<TR>
<TD><INPUT value="36486" CHECKED type="checkbox" name="invoiceRow" dpieagent_iecontroltype="5"><INPUT value=false type=hidden name=isProfFee></TD>
<TD>Professional fees</TD>
<TD>3213.03</TD></TR>
I fixed some of the missing quotes you may want to finish fixing them though.
Try this (you have to close <Input> tags):
function updateDetails() {
var sum = 0;
$("#InvoiceItemsRows input[type=checkbox]:checked").each(
function() {
sum += parseFloat($(this).closest('tr').children('td:eq(2)').text());
}
);
return sum;
}
alert(updateDetails());
You'll have to change:
$("#InvoiceItemsRows input[type=checkbox][checked]")
To:
$("#InvoiceItemsRows input:checked")
That new rule will return all 'checked' elements. Have a look at the documentation of the :checked selector.
Try this:
var total = 0;
$('#InvoiceItemsRows input:checked').each(function() {
total += $(this).val();
});
I suspect you want to total what's in the <td> though?
you have invalid html your your values need quotes
<tr>
<td>
<input disabled="disabled" onchange="updateDetails()" value="33441" checked="checked" type="checkbox" name="invoiceRow" dpieagent_iecontroltype="5"> <input type="hidden" name="isProfFee">
</td>
<td>
Professional fees for Searches
</td>
<td>
285.00
</td>
</tr>
<tr>
<td>
<input onchange="updateDetails()" value="36486" checked="checked" type="checkbox" name="invoiceRow" dpieagent_iecontroltype="5"> <input type="hidden" name="isProfFee">
</td>
<td>
Professional fees
</td>
<td>
3213.03
</td>
</tr>
and then
$("#InvoiceItemsRows input:checked")