Develop Reference

How do i get the text of each td in each tr of each tables using Jquery?

How do i get the text of each td in each tr of each table?
i tried the code below but didn't work as expected.
HTML CODE
$(function () {
$("[id*=btn").click(function () {
var array1 = [];
$(".normaltable").each(function (index, object) {
var tableData = {};
tableData.datetime = $(this).find('td').eq(0).text().trim();
tableData.item = $(this).find('td').eq(1).text().trim();
tableData.p1 = $(this).find('td').eq(2).text().trim();
tableData.nt = $(this).find('td').eq(3).text().trim();
array1.push(tableData);
});
alert(JSON.stringify(array1));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 class="title">Group A</h2>
<table class="normaltable">
<thead>
<tr class="header0">
<th class="datetime first">Date</th>
<th class="item">Item</th>
<th class="p1">P1</th>
<th class="nt">NT</th>
</tr>
</thead>
<tbody>
<tr class="rw">
<td class="datetime">09/01/20 19:33</td>
<td class="item"><a><span class="tm"><span >Rice</span></span></a></td>
<td class="p1 ">0:1</td>
<td class="nt ftx">3:1</td>
</tr>
<tr class="rw">
<td class="datetime">09/01/20 19:33</td>
<td class="item"><a><span class="tm"><span >Meat</span></span></a></td>
<td class="p1 ">0:2</td>
<td class="nt ftx ">8:1</td>
</tr>
<tr class="rw">
<td class="datetime">09/01/20 19:33</td>
<td class="item"><a><span class="tm"><span >Wheat</span></span></a></td>
<td class="p1 ">0:1</td>
<td class="nt ftx ">3:1</td>
</tr>
</tbody>
</table>
<h2 class="title">Group B</h2>
<table class="normaltable">
<thead>
<tr class="header0">
<th class="datetime first">Date</th>
<th class="item">Item</th>
<th class="p1">P1</th>
<th class="nt">NT</th>
</tr>
</thead>
<tbody>
<tr class="rw">
<td class="datetime">10/01/20 19:33</td>
<td class="item"><a><span class="tm"><span >Beans</span></span></a></td>
<td class="p1 ">1:1</td>
<td class="nt ftx ">2:1</td>
</tr>
<tr class="rw">
<td class="datetime">10/01/20 19:33</td>
<td class="item"><a><span class="tm"><span >Water</span></span></a></td>
<td class="p1 ">3:1</td>
<td class="nt ftx ">1:1</td>
</tr>
<tr class="rw">
<td class="datetime">10/01/20 19:33</td>
<td class="item"><a><span class="tm"><span >Melon</span></span></a></td>
<td class="p1 ">4:1</td>
<td class="nt ftx ">5:1</td>
</tr>
</tbody>
</table>
<input type="button" value="Click" id="btn" />
I got this
[
{"datetime":"09/01/20 19:33","item":"Rice","p1":"0:1","nt":"3:1"},
{"datetime":"10/01/20 19:33","item":"Beans","p1":"1:1","nt":"2:1"}
]
I expected this
[
{"datetime":"09/01/20 19:33","item":"Rice","p1":"0:1","nt":"3:1"},
{"datetime":"09/01/20 19:33","item":"Meat","p1":"0:2","nt":"8:1"},
{"datetime":"09/01/20 19:33","item":"Wheat","p1":"0:1","nt":"3:1"},
{"datetime":"10/01/20 19:33","item":"Beans","p1":"1:1","nt":"2:1"},
{"datetime":"10/01/20 19:33","item":"Water","p1":"3:1","nt":"1:1"},
{"datetime":"10/01/20 19:33","item":"Melon","p1":"4:1","nt":"5:1"}
]

From what I can understand all you really need to change is $(".normaltable").each(function(index, object) { to $(".normaltable tbody tr").each(function(index, object) { then you should get what you wish.
Demo
$(function() {
$("[id*=btn").click(function() {
var array1 = [];
$(".normaltable tbody tr").each(function(index, object) {
var tableData = {};
tableData.datetime = $(this).find('td').eq(0).text().trim();
tableData.match = $(this).find('td').eq(1).text().trim();
tableData.p1 = $(this).find('td').eq(2).text().trim();
tableData.nt = $(this).find('td').eq(3).text().trim();
array1.push(tableData);
});
console.log(JSON.stringify(array1));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="normaltable">
<thead>
<tr class="header0">
<th class="datetime first">Date</th>
<th class="item">Item</th>
<th class="p1">P1</th>
<th class="nt">NT</th>
</tr>
</thead>
<tbody>
<tr class="rw">
<td class="datetime">09/01/20 19:33</td>
<td class="item">
<a>
<span class="tm">
<span >
Rice
</span>
</span>
</a>
</td>
<td class="p1 ">0:1</td>
<td class="nt ftx">3:1</td>
</tr>
<tr class="rw">
<td class="datetime">09/01/20 19:33</td>
<td class="item">
<a>
<span class="tm">
<span >
Meat
</span>
</span>
</a>
</td>
<td class="p1 ">0:2</td>
<td class="nt ftx ">8:1</td>
</tr>
<tr class="rw">
<td class="datetime">09/01/20 19:33</td>
<td class="item">
<a>
<span class="tm">
<span >
Wheat
</span>
</span>
</a>
</td>
<td class="p1 ">0:1</td>
<td class="nt ftx ">3:1</td>
</tr>
</tbody>
</table>
<h2 class="title">Group B</h2>
<table class="normaltable">
<thead>
<tr class="header0">
<th class="datetime first">Date</th>
<th class="item">Item</th>
<th class="p1">P1</th>
<th class="nt">NT</th>
</tr>
</thead>
<tbody>
<tr class="rw">
<td class="datetime">10/01/20 19:33</td>
<td class="item">
<a>
<span class="tm">
<span >
Beans
</span>
</span>
</a>
</td>
<td class="p1 ">1:1</td>
<td class="nt ftx ">2:1</td>
</tr>
<tr class="rw">
<td class="datetime">10/01/20 19:33</td>
<td class="item">
<a>
<span class="tm">
<span >
Water
</span>
</span>
</a>
</td>
<td class="p1 ">3:1</td>
<td class="nt ftx ">1:1</td>
</tr>
<tr class="rw">
<td class="datetime">10/01/20 19:33</td>
<td class="item">
<a>
<span class="tm">
<span >
Melon
</span>
</span>
</a>
</td>
<td class="p1 ">4:1</td>
<td class="nt ftx ">5:1</td>
</tr>
</tbody>
</table>
<button id="btn1">run</button>

First try to find every table whom have same class name normalTable.
Then try to find each row of the each table.
After getting rows try to find text of td then store it in array
var array1 = [];
$('.normalTable tbody tr').each(function() {
var $tds = $(this).find('td');
if($tds.length != 0) {
var $currText = $tds.eq(0).text();
array1.push($currText);
}
});

Input field to the next line with CSS or JavaScript without altering the HTML

I'm working on a Survey and on the system that I work I don't have access to change the HTML directly but I can add CSS or JavaScript to the existing code.
I have the following HTML and I would like the input field to be right underneath the first name. I can only use the ID's as the classes are the same in many other fields that I don't want changing them. I'm a bit stack so if anyone has an idea I would really appreciate..Thanks!
<div id="pnlPersonalDetails2">
</div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody>
<tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr>
<tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
</tr>
</tbody>
</table>

Please check if this helps you to achieve the desired style
td.pd_label ~ td {
float: left;
position: absolute;
left: 7px;
margin-top: 1em;
}
The same selector (td.pd_label ~ td) works in JavaScript also.

You can use the + selector
#pnlPersonalDetails2 + .surveyquestions td {
display:block;
}
<div id="pnlPersonalDetails2">
</div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody>
<tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr>
<tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
</tr>
</tbody>
</table>
<div id="someId"></div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody>
<tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr>
<tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
</tr>
</tbody>
</table>

How to remove a class in a Jquery button event

I'm trying to remove from 2 buttons events a class.
What I want to achieve is that when I press the button the class 'success' will be removed.
I tried to do so in the next 2 buttons:
// Button handlers
$('#study_acrf').click(function() {
_this.start();
$('#soa_table').removeClass('success'); //success
});
$('#export_acrf').click(function() {
$('#table_data').val($("<div />")
.append($("#soa_table").clone()).html());
$('#preview_form').submit();
window.open('/study_versions/' + studyVersionId + '/export?study_version[export_type]=acrf');
});
In this what happening is that on button pressing I'm showing a view where there is a table. This table is cloned from another view where you can select one column and that is the class 'success'. This class makes the cell header of the columns green and I want to rid off it when the table is in the new view. I tried various stuff but I have no idea how to solve this issue. In the screenshot shared you can see the table with those greens which I don't want to see anymore.
The HTML of the table where this happening:
<table id="soa_table" class="table table-striped table-bordered table-condensed soa-table">
<thead>
<tr>
<th>SoA</th>
<th id="6" class="soa-column text-center">V1</th>
<th id="102" class="soa-column text-center success">V2</th>
<th id="103" class="soa-column text-center">V3</th>
<th id="104" class="soa-column text-center">V4</th>
<th id="105" class="soa-column text-center">V5</th>
<th id="106" class="soa-column text-center">V6</th>
<th id="107" class="soa-column text-center">V7</th>
<th id="108" class="soa-column text-center">V8</th>
<th id="109" class="soa-column text-center">V9</th>
</tr>
</thead>
<tbody>
<tr>
<td class="soa-row" id="2">Demographics (Pilot)</td>
<td class="soa-element text-center" form_id="2" visit_id="6" id="18">
<span class="glyphicon glyphicon-ok text-success"></span>
</td>
<td class="soa-element" form_id="2" visit_id="102" id="0"> </td>
<td class="soa-element text-center" form_id="2" visit_id="103" id="21">
<span class="glyphicon glyphicon-ok text-success"></span>
</td>
<td class="soa-element" form_id="2" visit_id="104" id="0"> </td>
<td class="soa-element" form_id="2" visit_id="105" id="0"> </td>
<td class="soa-element" form_id="2" visit_id="106" id="0"> </td>
<td class="soa-element" form_id="2" visit_id="107" id="0"> </td>
<td class="soa-element" form_id="2" visit_id="108" id="0"> </td>
<td class="soa-element" form_id="2" visit_id="109" id="0"> </td>
</tr>
<tr>
<td class="soa-row success" id="6">Education (Pilot)</td>
<td class="soa-element" form_id="6" visit_id="6" id="0"> </td>
<td class="soa-element text-center" form_id="6" visit_id="102" id="25">
<span class="glyphicon glyphicon-ok text-success"></span>
</td>
<td class="soa-element" form_id="6" visit_id="103" id="0"> </td>
<td class="soa-element" form_id="6" visit_id="104" id="0"> </td>
<td class="soa-element text-center" form_id="6" visit_id="105" id="24">
<span class="glyphicon glyphicon-ok text-success"></span>
</td>
<td class="soa-element" form_id="6" visit_id="106" id="0"> </td>
<td class="soa-element" form_id="6" visit_id="107" id="0"> </td>
<td class="soa-element" form_id="6" visit_id="108" id="0"> </td>
<td class="soa-element" form_id="6" visit_id="109" id="0"> </td>
</tr>
</tbody>

I fixed my own issues just adding more selection to the tag like this:
$('#soa_table thead tr th, #soa_table tbody tr td').removeClass('success');

How to fetch the selected table tr row in this case

I am having a table as shown below
On click of a button how to fecth the selected tr mobile number
<table class="table table-striped table-bordered table-hover table-full-width dataTable" id="sample_2" aria-describedby="sample_2_info">
<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr class="vendorslist odd">
<td class=" "><label class="radio"><input type="radio" onclick="UpdateButtonTest(this);" id="5300085118-90304910251387" name="optionsRadios1" value="option1"></label></td>
<td class=" sorting_1"> VENDOR</td>
<td class=" ">5300085118</td>
<td class=" ">544444444</td>
<td class=" ">Restaurant</td>
<td class=" ">Restaurants</td>
<td class=" ">wer#gmail.com</td>
<td class=" "><span id="span-5300085118-90304910251387" class="label label-success">Active</span></td>
</tr>
<tr class="vendorslist odd">
<td class=" "><label class="radio"><input type="radio" onclick="UpdateButtonTest(this);" id="5300085118-90304910251387" name="optionsRadios1" value="option1"></label></td>
<td class=" sorting_1"> VENDOR</td>
<td class=" ">5300085118</td>
<td class=" ">900000000</td>
<td class=" ">Restaurant</td>
<td class=" ">Restaurants</td>
<td class=" ">serr#gmail.com</td>
<td class=" "><span id="span-5300085118-90304910251387" class="label label-success">Active</span></td>
</tr>
</tbody>
</table>
<button id="btnSave">Save Click</button>
This is my fiddle
https://jsfiddle.net/atg5m6ym/4123/
Could you please let me know how to fecth the mobile number of the selected table tr
Means for first i need the value 544444444 and in case of second i need 900000000

it would be easier with a class on the mobile td, but you could do:-
$(document).on('click', '#btnSave', function() {
var mobile = $('table :checked').closest('tr').find('td:eq(3)').text();
alert(mobile);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-hover table-full-width dataTable" id="sample_2" aria-describedby="sample_2_info">
<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr class="vendorslist odd">
<td class=" ">
<label class="radio">
<input type="radio" onclick="UpdateButtonTest(this);" id="5300085118-90304910251387" name="optionsRadios1" value="option1">
</label>
</td>
<td class=" sorting_1">VENDOR</td>
<td class=" ">12222</td>
<td class=" ">544444444</td>
<td class=" ">Restaurant</td>
<td class=" ">Restaurants</td>
<td class=" ">wer#gmail.com</td>
<td class=" "><span id="span-5300085118-90304910251387" class="label label-success">Active</span>
</td>
</tr>
<tr class="vendorslist odd">
<td class=" ">
<label class="radio">
<input type="radio" onclick="UpdateButtonTest(this);" id="5300085118-90304910251387" name="optionsRadios1" value="option1">
</label>
</td>
<td class=" sorting_1">VENDOR</td>
<td class=" ">12233</td>
<td class=" ">900000000</td>
<td class=" ">Restaurant</td>
<td class=" ">Restaurants</td>
<td class=" ">serr#gmail.com</td>
<td class=" "><span id="span-5300085118-90304910251387" class="label label-success">Active</span>
</td>
</tr>
</tbody>
</table>
<button id="btnSave">Save Click</button>

Through jQuery parents()
$(document).on('click', '#btnSave', function() {
alert($('.vendorslist input:checked').parents("tr").find('td').eq(3).text());
});

Find td index and apply the color to tr

I want to find the td position and apply the color for tr. For example the class (jqx-grid-group-expand or jqx-grid-group-collapse) contains in first position of the td in tr tag(see : row0grid) then the row color is red. the same class contain in the second position of the td (see : row1grid) then the row color is blue. How to I apply the color. Please help me. Am new of this field.
<table id="contenttablegrid" border="1">
<tr id="row0grid">
<td class=" jqx-grid-group-cell jqx-grid-cell-pinned jqx-grid-group-expand jqx-icon-arrow-down">
</td>
<td class="jqx-grid-group-cell">
Department: Dept1
</td>
<td class=" jqx-grid-group-cell">
</td>
<td class=" jqx-grid-group-cell">
</td>
<td class=" jqx-grid-group-cell">
</td>
<td class=" jqx-grid-group-cell">
99
</td>
<td class=" jqx-grid-group-cell">
135.6
</td>
</tr>
<tr id="row1grid">
<td class=" jqx-grid-group-cell jqx-grid-cell-pinned">
</td>
<td class=" jqx-grid-group-cell jqx-grid-cell-pinned jqx-grid-group-expand jqx-icon-arrow-down">
</td>
<td class=" jqx-grid-group-cell">
</td>
<td class=" jqx-grid-group-cell">
</td>
<td class=" jqx-grid-group-cell">
Project: Project1
</td>
<td class=" jqx-grid-group-cell">
70.7
</td>
<td class=" jqx-grid-group-cell">
100.45
</td>
</tr>
<tr id="row2grid">
<td class=" jqx-grid-group-cell jqx-grid-cell-pinned">
</td>
<td class=" jqx-grid-group-cell jqx-grid-cell-pinned">
</td>
<td class="jqx-grid-group-cell">
</td>
<td class=" jqx-grid-group-cell">
</td>
<td class=" jqx-grid-group-cell" title="Balaji">
<span style="color: red; font-weight: bold;">Super</span><span style="color: Blue;
font-style: italic;"> Balaji </span>
</td>
<td class=" jqx-grid-group-cell" title="25.30">
<td>
25.30
</td>
</td>
<td class=" jqx-grid-group-cell" title="45.45">
<td style="text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; text-align: center;
margin-top: 4px;">
45.45
</td>
</td>
</tr>
</table>

You can use has() to find the <tr> with matching elements as follows:
$("#contenttablegrid tr").
has("td.jqx-grid-group-expand:first-child, td.jqx-grid-group-collapse:first-child")
.addClass("red")
.end()
.has("td.jqx-grid-group-expand:nth-child(2), td.jqx-grid-group-collapse:nth-child(2)")
.addClass("blue");
Demo

You can use this:
$('.jqx-grid-group-expand, .jqx-grid-group-collapse').each(function(){
var color = $(this).index() === 0 ? 'red' : 'blue';
$(this).closest('tr').css('background', color);
});
Demo