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

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

Related

The HTML is not updating on Jquery selector

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>

How can I get the value of the last th?

I need to print the word of Emails on click of all checkboxes. How can I do that? Here is my HTML structure:
$('td input').on('change', function() {
var header_name = $(this).closests('tr').sibilings('th').last().text();
console.log(header_name);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th><input type="checkbox" class="all_checkboxes"></th>
<th>Emails</th>
</tr>
<tr>
<td><input type="checkbox" data-id="email"></td>
<td>email</td>
</tr>
<tr>
<td><input type="checkbox" data-id="gmail"></td>
<td>gmail</td>
</tr>
<tr>
<td><input type="checkbox" data-id="aol"></td>
<td>aol</td>
</tr>
<tr>
<td><input type="checkbox" data-id="chmail"></td>
<td>chmail</td>
</tr>
</tbody>
</table>

Firstly you have a couple of typos. closests() should be closest() and sibilings() needs to be siblings().
The issue itself is because your DOM traversal is not correct. You're trying to look at sibling th of the parent tr to the clicked input, when the th you're aiming for is in a completely different row.
To fix this you should use closest() to get the table, then find() the tr:last, like this:
$('td input').on('change', function() {
var header_name = $(this).closest('table').find('th:last').text();
console.log(header_name);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th><input type="checkbox" class="all_checkboxes"></th>
<th>Emails</th>
</tr>
<tr>
<td><input type="checkbox" data-id="email"></td>
<td>email</td>
</tr>
<tr>
<td><input type="checkbox" data-id="gmail"></td>
<td>gmail</td>
</tr>
<tr>
<td><input type="checkbox" data-id="aol"></td>
<td>aol</td>
</tr>
<tr>
<td><input type="checkbox" data-id="chmail"></td>
<td>chmail</td>
</tr>
</tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th><input type="checkbox" class="all_checkboxes"></th>
<th>Emails</th>
</tr>
<tr>
<td><input type="checkbox" data-id="email"></td>
<td>email</td>
</tr>
<tr>
<td><input type="checkbox" data-id="gmail"></td>
<td>gmail</td>
</tr>
<tr>
<td><input type="checkbox" data-id="aol"></td>
<td>aol</td>
</tr>
<tr>
<td><input type="checkbox" data-id="chmail"></td>
<td>chmail</td>
</tr>
</tbody>
</table>
<script>
$('td input, th input').on('change', function(){
var header_name = $( "tr:first" ).last().text();
console.log(header_name);
})
</script>

Select all checkboxes in a specific scope?

Here is my code:
$(".all_checkboxes").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
td, th{
border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Section 1:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Names</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>twitter</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>instagram</td>
</tr>
</table>
<h2>Section 2:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Ids</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>454756</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>547498</td>
</tr>
</table>
My question is almost clear in the fiddle above. As you can see, currently all checkboxes will be selected in both sections. All I need to do is define a scope for jQuery selector. How can I do that?

$('input:checkbox') will search for all the checkboxes. You will have to navigate to closest table and search checkboxes in it.
$(".all_checkboxes").click(function () {
$(this)
.closest('table')
.find('input:checkbox')
.not(this)
.prop('checked', this.checked);
});
td, th{
border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Section 1:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Names</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>twitter</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>instagram</td>
</tr>
</table>
<h2>Section 2:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Ids</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>454756</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>547498</td>
</tr>
</table>

If you want with in table. Use closest() to get the checkbox with in table
Use change event instead of click.
$(".all_checkboxes").change(function () {
$(this).closest('table').find(':checkbox').not(this).prop('checked', this.checked);
});
td, th{
border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Section 1:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Names</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>twitter</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>instagram</td>
</tr>
</table>
<h2>Section 2:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Ids</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>454756</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>547498</td>
</tr>
</table>

Looks like this is going to be a repeated action so you should consider having a faster solution than the ones available with jQuery.
Also your markup is not very well prepared for these kinds of actions. If updating the markup is an option. You can go as follows:
<h2>Section 1:</h2>
<table>
<tr>
<th><input type="checkbox" data-checkall="names" class="all_checkboxes" /></th>
<th>Names</th>
</tr>
<tr>
<td><input type="checkbox" data-rel="names" /></td>
<td>twitter</td>
</tr>
<tr>
<td><input type="checkbox" data-rel="names" /></td>
<td>instagram</td>
</tr>
</table>
<h2>Section 2:</h2>
<table>
<tr>
<th><input type="checkbox" data-checkall="section" class="all_checkboxes" /></th>
<th>Ids</th>
</tr>
<tr>
<td><input type="checkbox" data-rel="section" /></td>
<td>454756</td>
</tr>
<tr>
<td><input type="checkbox" data-rel="section" /></td>
<td>547498</td>
</tr>
</table>
Native JS version (fastest performance):
function checkAllHandler(e){
var state = this.checked;
Array.prototype.forEach.call(
document.querySelectorAll("[data-rel=" + this.dataset.checkall+"]"),
function(x){
x.checked = state;
}
)
}
Array.prototype.forEach.call(document.querySelectorAll(".all_checkboxes"), function(x){
x.addEventListener("click", checkAllHandler);
})
Codepen: https://codepen.io/Mchaov/pen/vexprr?editors=1010

Get the value of a column entered by the user

<form id="form1" runat="server">
<table border="1" id="ResultSheet">
<tr id ="Name">
<td> Student Name</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Subject Name</td>
</tr>
<tr>
<td>Maths</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Science</td>
<td><input type ="text" /></td>
</tr>
<tr>
<td>English</td>
<td><input type ="text" /></td>
</tr>
</table>
</form>
I have this table and now I want to get the value of each of input type. how do I get it.
I've tried:
document.getElementById("ResultSheet").rows[2].cells.item(0).innerHTML);
But it did not return anything.

You could use querySelectorAll() like :
document.querySelectorAll('#ResultSheet input');
The loop through the result like the snippet below shown.
Hope this helps.
var inputs = document.querySelectorAll('#ResultSheet input');
for(var i=0;i<inputs.length;i++){
console.log(inputs[i].value);
}
<form id="form1" runat="server">
<table border="1" id="ResultSheet">
<tr id ="Name">
<td> Student Name</td>
<td><input type="text" value="1"/></td>
</tr>
<tr>
<td>Subject Name</td>
</tr>
<tr>
<td>Maths</td>
<td><input type="text" value="2"/></td>
</tr>
<tr>
<td>Science</td>
<td><input type ="text" value="3"/></td>
</tr>
<tr>
<td>English</td>
<td><input type ="text" value="4"/></td>
</tr>
</table>
</form>

Use <form> property elements: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements
Example: https://jsfiddle.net/8co9v0ye/

New table row is not creating using JQuery clone method

I have a table in in that table I have a button for adding new row .In that table I want to dynamically add new row when user will click the add row button. I but it is not working. The HTML and JQuery code is there in JSFiddle . Please suggest.
<table id="myTable" border="1">
<tr>
#*<td>SR</td>*#
<td>Name</td>
<td>Age</td>
<td>Delete?</td>
<td>Add</td>
</tr>
<tr>
#*<td>1</td>*#
<td><input size=25 type="text" id="nmbox" /></td>
<td><input size=25 type="text" id="agbox" /></td>
<td><input type="button" id="delRow" value="Delete" onclick="deleteRow(this)" /></td>
<td><input type="button" id="addRow" value="Add " onclick="insRow()" /></td>
</tr>
</table>
var new_row1 = $('#mytable tr:last').clone();
$('#mytable').append(new_row1);

1) id selector mismatched $('#myTable tr:last'). caps T
2) id should be unique for each element .
function insRow(){
var new_row1 = $('#myTable tr:last').clone();
$('#myTable').append(new_row1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" border="1">
<tr>
#*<td>SR</td>*#
<td>Name</td>
<td>Age</td>
<td>Delete?</td>
<td>Add</td>
</tr>
<tr>
#*<td>1</td>*#
<td><input size=25 type="text" /></td>
<td><input size=25 type="text" /></td>
<td><input type="button" value="Delete" onclick="deleteRow(this)" /></td>
<td><input type="button" value="Add " onclick="insRow()" /></td>
</tr>
</table>

To add child elements into cloned one without jQuery:
clone = ElementTo.cloneNode();
while (ElementToBeCloned.firstChild){
clone.appendChild(ElementToBeCloned.lastChild);
}

Categories

Resources