The HTML is not updating on Jquery selector - javascript

I'm trying to retrive the HTML of element on click. This is the snippet
$( () => {
$( document ).on('click', 'button', function(){
const html = $('table').html();
console.log( html );
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Input 1</th>
<th>Input 2</th>
<th>Input 3</th>
<th>Input 4</th>
<th>Input 5</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</tbody>
</table>
<button>Clone table!</button>
If I set a new value on the input element of each row, I expect a table HTML with input's value attribute with the correct strings
I don't know why the DOM is not updating, I added changes to the table's HTML, and it looks like as not changes. I tried to find the changes on different indexes and functions
$('table')[0].outerHTML
$('table')[0].innerHTML
$('table').clone().html()
$('table').html()
No one has the correct HTML. If I browse on the developer tools -> Elements tab I see the changes, but I can't retrieve them.
What do you propouse?


See comment inline:
$( () => {
$( document ).on('click', 'button', function(){
// Set the value attribute in the HTML to the entered value
$("input").attr("value", $("input").val());
const html = $('div').html();
console.log( html );
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="text">
<button>Save</button>
</div>


Update: You would have to map each field value to an array and set the values as attributes on the clone.
So, you can follow this pattern for other input like e.g. select.
serializeSelectValues – access and store the values
applySerializedSelect – apply the values
Note: If you want to handle advanced cloning, you will need to provide names with your input fields.
(($) => {
$.fn.reduce = function(callback, initial) {
return Array.prototype.reduce.call(this, callback, initial)
}
$.fn.serializeInputValues = function() {
return this.find('input').reduce((valueArr, input, index) => {
return valueArr.concat($(input).val())
}, [])
}
$.fn.applySerializedInput = function(serialized) {
this.find('input').each((index, input) => {
if (serialized[index]) $(input).attr('value', serialized[index])
})
return this
}
$.fn.cloneSerialized = function() {
return this.clone().applySerializedInput(this.serializeInputValues())
}
})(jQuery)
$(() => {
$(document).on('click', 'button', function() {
$('body').append($('.serializable').cloneSerialized())
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="serializable">
<thead>
<tr>
<th>Input 1</th>
<th>Input 2</th>
<th>Input 3</th>
<th>Input 4</th>
<th>Input 5</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</tbody>
</table>
<button>Clone table!</button>
A note on $.fn.clone from the docs.
Note: For performance reasons, the dynamic state of certain form elements (e.g., user data typed into textarea and user selections made to a select) is not copied to the cloned elements. When cloning input elements, the dynamic state of the element (e.g., user data typed into text inputs and user selections made to a checkbox) is retained in the cloned elements.
Alternatively... avoid input fields entirely.
This way you can grab the text value of each cell without all the messy work.
$(() => {
$(document).on('click', 'button', function() {
$('body').append($('.serializable').clone())
})
});
td { border: thin solid grey }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="serializable">
<thead>
<tr>
<th>Input 1</th>
<th>Input 2</th>
<th>Input 3</th>
<th>Input 4</th>
<th>Input 5</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
</tr>
<tr>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
</tr>
<tr>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
</tr>
<tr>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
</tr>
<tr>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
</tr>
</tbody>
</table>
<button>Clone table!</button>

Related

Convert checkboxes as binary values ( '0' for unchecked, '1' for checked) to json data

I have a HTML table which have checkboxes. I want these whole table into JSON data with checkboxes as binary values '0' for unchecked and '1' for checked.
HTML CODE:
<table id="sem3_table" class="w3-table w3-card w3-table-all w3-hoverable">
<thead>
<tr>
<th>PRN NO.</th>
<th>Name</th>
<th>Discrete Maths</th>
<th>ECCF</th>
<th>Data Structures</th>
<th>DLDA</th>
</tr>
</thead>
<tr>
<td>1234568</td>
<td>Smith</td>
<td><input class="w3-check jill" type="checkbox"></td>
<td><input class="w3-check jill" type="checkbox"></td>
<td><input class="w3-check jill" type="checkbox"></td>
<td><input id="select-all" class="w3-check" type="checkbox"></td>
</tr>
<tr>
<td>7894562</td>
<td>Jackson</td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
</tr>
</table>
I'v done this so far, not getting any idea how to do with checkboxes.
JAVASCRIPT CODE FOR JSON:
function html2json() {
var json = '{';
var otArr = [];
var tbl2 = $('#sem3_table').each(function(e) {
x = $(this).children();
var itArr = [];
x.each(function() {
itArr.push('"' + $(this).text() + '"');
});
otArr.push('"' + e + '": {' + itArr.join(',') + '}');
})
json += otArr.join(",") + '}'
return json;
}
The output should be:
"0" : {
"PRN NO" : "12345",
"NAME" : "XYZ",
"DISCRETE MATHS" : "0", //0=> unchecked, 1=> checked
"ECCf" : "1",
"Data structures" : "1",
"DLDA" : "0"
},
"1" : {
//same//
}

Never build JSON format through string concatenation. Build the object/array first, and when you have collected all data into it, only then convert to JSON using JSON.stringify.
Here is how that could work:
function html2json() {
var props = $.map($('#sem3_table th'), function(th) {
return $(th).text();
});
return JSON.stringify($('#sem3_table tr').slice(1).map(function() {
var obj = {};
$(this).children().each(function(i) {
var value = +$("input", this).prop("checked");
obj[props[i]] = isNaN(value) ? $(this).text() : value;
});
return obj;
}).get(), null, 2);
}
$("button").click(function() {
const json = html2json();
console.log(json);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Produce JSON</button>
<table id="sem3_table" class="w3-table w3-card w3-table-all w3-hoverable">
<thead>
<tr>
<th>PRN NO.</th>
<th>Name</th>
<th>Discrete Maths</th>
<th>ECCF</th>
<th>Data Structures</th>
<th>DLDA</th>
</tr>
</thead>
<tr>
<td>1234568</td>
<td>Smith</td>
<td><input class="w3-check jill" type="checkbox"></td>
<td><input class="w3-check jill" type="checkbox"></td>
<td><input class="w3-check jill" type="checkbox"></td>
<td><input id="select-all" class="w3-check" type="checkbox"></td>
</tr>
<tr>
<td>7894562</td>
<td>Jackson</td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
</tr>
</table>

Remove row when button is clicked

I am trying to do this using HtmlService in a Google App Script. I have researched it and I cannot figure out why the below doesn't work. https://jsfiddle.net/pfue7b71/
Script
function removeRow() {
// alert("run");
$(this).closest('tr').remove();
};
Html
<table>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow()" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow()" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow()" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow()" value="X"></td>
</tr>
</table>

It's because of the context of the function. The immediate code that runs on the onClick attribute, works using the object context, so it has the right reference to this as the current object, but the call to removeRow is made on Window context, so the reference to this is Window, and not the object. You could solve that with your current code doing this:
function removeRow(object){
$(object).closest('tr').remove();
};
And changing the calls to:
<table>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
</table>
Here you go: https://jsfiddle.net/pfue7b71/2/
Also, for future reference, you should try using console.log instead of alert, and use it to log important things like, for example, $(this)

You need to make sure that this is referencing the DOM element, not the function.
<table>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
</table>
You also need to rename the function to removeRow, as you're calling it in the HTML (was incorrect in fiddle).
function removeRow(e) {
$(e).closest('tr').remove();
};
https://jsfiddle.net/pfue7b71/3/

How to get all values in <tr> of html <table>

I want to get all values of td when I click the checkbox which is fourth coloumn.
Also I want to get the smallest among ID and Optional ID
<table><form method='GET'>
<tr>
<th>Name</th>
<th>ID</th>
<th>Optional ID</th>
<th>Approved</th>
</tr>
<tr>
<td>Sumit</td>
<td>4</td>
<td><input type='text' name='txt`[]' /></td>
<td><input type='checkbox' name='chk[]' /></td>
</tr>`
<tr>
<td>Harsh</td>
<td>3</td>
<td><input type='text' name='txt`[]' /></td>
<td><input type='checkbox' name='chk[]' /></td>
</tr>`
<tr><td colspan=4><input type='submit' name='sub1' /></td></tr>
</form>

I think this is what you're looking for:
function Start() {
$('#SubmitBtn').click(function () {
$('#TheTable').find('tr').each(function () {
if ($(this).find('input').eq(1).is(':checked') === true) {
alert($(this).find('input').val());
}
});
});
}
$(Start);
There's a jsFiddle here

Subtract HTML Textbox Values using jQuery / JavaScript

I want to subtract the values once a user put the value in textfield but unable to do so. Here is an example of sum but I want it same for subtracting:
<table style="border-collapse:collapse;background-color:#E8DCFF" border="1" width="300px">
<tbody>
<tr>
<td width="40px">1</td>
<td>Butter</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr>
<td>2</td>
<td>Eggs</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr>
<td>3</td>
<td>Bread</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr>
<td>4</td>
<td>Soap</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Sum :</td>
<td align="center"><span id="sum">0</span></td>
</tr>
</tbody>
</table>
Here is jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".txt").each(function(){
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum(){
var sum = 0;
$(".txt").each(function(){
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#sum").html(sum.toFixed(2));
}
</script>

You can add a total value, and substract every time you insert something new.
$(document).ready(function(){
$("#sum").data('total', 600).html(600); // add total value of 600
$(".txt").each(function(){
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum(){
var $sum = $("#sum");
var sum = parseInt($sum.data('total'), 10); // get total value
$(".txt").each(function(){
if (!isNaN(this.value) && this.value.length != 0) {
sum -= parseFloat(this.value);
}
});
$sum.html(sum.toFixed(2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table style="border-collapse:collapse;background-color:#E8DCFF" border="1" width="300px">
<tbody>
<tr>
<td width="40px">1</td>
<td>Butter</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr>
<td>2</td>
<td>Eggs</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr>
<td>3</td>
<td>Bread</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr>
<td>4</td>
<td>Soap</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr id="summation">
<td></td>
<td align="right">Total: </td>
<td align="center"><span id="sum"></span></td>
</tr>
</tbody>
</table>

How to group table rows and filter the groups with jQuery or JavaScript?

I am using <tbody> to group table rows. My table looks like this:
<label for="kwd_search">Search:</label> <input type="text" id="kwd_search" value=""/>
<br /><br />
<table id="indberetningstable" style="text-align: center; border: solid; align: center">
<thead>
<tr>
<th>Valgsted</th>
<th>Parti</th>
<th>Stemmer</th>
<th>Gem</th>
</tr>
</thead>
<tbody>
<tr>
<td>Idrætshuset</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>A - Socialdemokraterne</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
<tr>
<td></td>
<td>B - Det Radikale Venstre</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
<tr>
<td></td>
<td>C - Det Konservative Folkeparti</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>Strandvejsskolen</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>A - Socialdemokraterne</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
<tr>
<td></td>
<td>B - Det Radikale Venstre</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
<tr>
<td></td>
<td>C - Det Konservative Folkeparti</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
</tbody>
</table>​
You can see an example here:
http://jsfiddle.net/zDA7n/
How is it possible to filter the table, so that when i write a search string in the "kwd_search" input field, it will hide everything but the <tbody> group that contains the search-text in it's first column (Valgsted) ?

Use the :contains selector (note: this is case-sensitive):
$('#kwd_search').on('change',function() {
var val = $.trim($(this).val());
$('#indberetningstable tbody').show();
if (val) {
$('#indberetningstable tbody:not(:contains("'+val+'"))').hide();
};
});​
http://jsfiddle.net/mblase75/pEfSF/
For a case-insensitive version, you'll need to implement a custom version of the :contains selector.

Categories

Resources