Develop Reference

Get the value from inside the row html in Javascript

I have a database table that I'm outputting onto a internal webpage. I need to find the value of a selected row so I can then merge the rows and send the value back to the db so it knows which rows to merge.
When clicking on a button to merge rows this is my function I have created:
//merge the rows now
function mergeTheRows() {
//get value from each row
$("#mergeRowsBody tr").each(function() {
rowValue = document.getElementsByTagName("tr").value;
mergeRowsArray.push(rowValue);
console.log(mergeRowsArray);
});
}
Here is the body of the table (I'm only showing two rows for the example):
<tbody id="mergeRowsBody">
<tr class="rowEditData odd mergeSelect" value="110461" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">ABBEVILLE</td>
<td class="mdl-data-table__cell--non-numeric">South Carolina</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="mdl-data-table__cell--non-numeric">001</td>
<td class="mdl-data-table__cell--non-numeric">39</td>
</tr>
<tr class="rowEditData even mergeSelect" value="107045" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Abbeville County</td>
<td class="mdl-data-table__cell--non-numeric">South Carolina</td>
<td class="mdl-data-table__cell--non-numeric">001</td>
<td class="mdl-data-table__cell--non-numeric">45</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
</tbody>
I keep getting undefined when it console logs to the browser. I've tried finding the value by ID and class as well, but it keeps saying undefined. What am I doing wrong?
All I need is to be able to save the ID of the row so I can then let the database know which rows will be merged.

You should use data- property instead of value, value is for inputs, selects... Also you need to add table in your html and then you can use map() and get() to return array of data-values.
var mergeRowsArray = $("#mergeRowsBody tr").map(function() {
return $(this).data('value')
}).get();
console.log(mergeRowsArray)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody id="mergeRowsBody">
<tr class="rowEditData odd mergeSelect" data-value="110461" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">ABBEVILLE</td>
<td class="mdl-data-table__cell--non-numeric">South Carolina</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="mdl-data-table__cell--non-numeric">001</td>
<td class="mdl-data-table__cell--non-numeric">39</td>
</tr>
<tr class="rowEditData even mergeSelect" data-value="107045" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Abbeville County</td>
<td class="mdl-data-table__cell--non-numeric">South Carolina</td>
<td class="mdl-data-table__cell--non-numeric">001</td>
<td class="mdl-data-table__cell--non-numeric">45</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
</tbody>
</table>

getElementsByTagName returns a live HTMLCollection of elements with the given tag name.
rowValue = document.getElementsByTagName("tr").value;
replace with
rowValue =$(this).attr("value");

Have you tried using just jQuery?
rowValue = $(".mergeSelect").val();

How to make a scrolling table with dynamic data

I am trying to make a scrollable table with fixed headers that gets dynamically populated. I have found a good example on this site but could not implement it. I have created a fiddle here: http://jsfiddle.net/nokfw667/6/
The table gets populate by clicking the button and the javascript that creates it has been included with an example of the data that gets returned. In my example I hardcoded the table. At the top of the fiddle is the example I got from this site. I then tried to create my own but that did not work either.
Table example:
<Table id="ImageDataTable">
<thead>
<tr>
<th style="width:140px;">Whole Nbr</div>
<th style="width:90px;">Type</th>
<th style="width:190px;">Size</th>
<th style="width:100px;">Revision</th>
<th style="width:140px;">Other Nbr</th>
<th style="width:90px;">Sheet Nbr</th>
<th style="width:190px;">Of Sheets</th>
<th style="width:100px;">Frame Nbr</th>
<th style="width:140px;">Of Frames</th>
<th style="width:90px;">Doc Title</th>
<th style="width:190px;">Note</th>
<th style="width:100px;">Prnt</th>
<th style="width:140px;">Obs</th>
<th style="width:90px;">Acquire Date</th>
<th style="width:190px;">Source</th>
<th style="width:100px;">Base Doc</th>
<th style="width:140px;">Acc Doc Nbr</th>
<th style="width:90px;">CommonSubDirectory</th>
</tr>
</thead>
<tbody id="TmageDataBody" style="overflow:scroll">
<tr>
<td class="WholeNumberCell"></td>
<td class="WholeNumberCell">
ST
</td>
<td class="WholeNumberCell">
A
</td>
<td class="WholeNumberCell">
undefined
</td>
<td class="WholeNumberCell">
null
</td>
<td class="WholeNumberCell">
6
</td>
<td class="WholeNumberCell">
10
</td>
<td class="WholeNumberCell">
1
</td>
<td class="WholeNumberCell">
1
</td>
<td class="WholeNumberCell">
JOGGLING OF ALUMINUM ALLOY EXTRUDED
</td>
<td class="WholeNumberCell">
91179
</td>
<td class="WholeNumberCell">
</td>
<td class="WholeNumberCell">
No
</td>
<td class="WholeNumberCell">
No
</td>
<td class="WholeNumberCell">
0
</td>
<td class="WholeNumberCell">
</td>
<td class="WholeNumberCell">
</td>
<td class="WholeNumberCell">
\CDVolumes
</td>
</tr>
</tbody>
</Table></tbody>
</Table>
Anyone know what I am doing wrong?

#ImageDataTable {
border: 1px solid black;
border-spacing: 0;
padding: 0;
}
...
<Table id="ImageDataTable" style="overflow:scroll;">
You've told your table that when it overflows, it should scroll. So the table happily takes up as much room as it needs, and then looks to see if it is overflowing - Nope! So it doesn't scroll.
If you want your table to scroll, you need to define exactly how big the table should be, say, with a div around it, or by specifying the max-height or max-width on the table. Then the table will render itself in that area and see that it (most likely) is cut off, and stick in the scrollbars.
Hope this helps.

jQuery select various information from different <tr>

I'm working with the following HTML:
<tr class="oddrow">
<td>row1</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">-1<br>+1</td>
<td width="50%">WSH: -110<br>SAC: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">202.5</td>
<td width="50%">o: -110<br>u: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">WSH: 0<br>SAC: 0</td>
</tr>
<tr class="evenrow">
<td>row2</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">-1<br>+1</td>
<td width="50%">WSH: -110<br>SAC: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">202.5</td>
<td width="50%">o: -110<br>u: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">WSH: 0<br>SAC: 0</td>
<!-- The above line is the one I need. --!>
</tr>
There are 2 such rows (row1 and row2), alternating as an oddrow then evenrow. I have the entire HTML as a string in my JavaScript/jQuery code. I also have the information of the two three-letter abbreviations: in this example, WSH and SAC. What I need is the third <td style="text-align:center;"> of the row2 row. I should point out that there are several tables of row1 and row2 on the page, so I need a general selector. What I have been doing is just grabbing all the data in all the rows then parsing it from there, but the inconsistency of the data is making that more difficult. Is there a quick and dirty jQuery that will point me to the data I need?
I was thinking something like $("tr td:contains(" + abbrev + ") td:contains('row2')").text();, but that doesn't get it.
Can anyone help?

Your hierarchy in your selector is wrong, tds with the abbreviation are not an ancestor to the tds with the text of "row2"
You also need to ensure you have apostrophes around your abbrev variable.
Can you try:
$("tr td:contains('row2') td:contains('" + abbrev + "')").text()
Any chance you can add semantic classes instead? These sorts of selectors are gnarly to maintain.

Copy contents of one field to another using jQuery

I have a table structure like:
<table id='myTable'>
<thead>
<tr>
<th class='name'>Name</th>
<th class='nick-name'>Nick Name</th>
<th class='age'>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td class='name'>Ilona</td>
<td class='nick-name'>Baby Doll</td>
<td class='age'>21</td>
</tr>
<tr>
<td class='name'>Sieraa</td>
<td class='nick-name'></td>
<td class='age'>24</td>
</tr>
<tr>
<td class='name'>Britney</td>
<td class='nick-name'>Blondie</td>
<td class='age'>27</td>
</tr>
<tr>
<td class='name'>Kate</td>
<td class='nick-name'>Night Queen</td>
<td class='age'>19</td>
</tr>
<tr>
<td class='name'>Dani</td>
<td class='nick-name'></td>
<td class='age'>23</td>
</tr>
<tr>
<td class='name'>Aliee</td>
<td class='nick-name'></td>
<td class='age'>26</td>
</tr>
<tr>
<td class='name'>Brandi</td>
<td class='nick-name'></td>
<td class='age'>27</td>
</tr>
</tbody>
</table>
As some Nick Name fields are empty, I want to display the value of Name in Nick Name if they are empty.
Eg: In Second Row of Table Body, The Nick Name field is empty, The Name field contains Sierra. So, I want to display Sierra in Nick Name field instead of leaving it empty.
How can I achieve this using jQuery or JavaScript

jQuery:
this only works when the .name is always the exact previous element of .nick-name like in your structure
$('.nick-name').each(function () {
if ($(this).text().length === 0) {
$(this).text($(this).prev().text());
}
});
This works when both .name and .nick-name have the same parent
$('.nick-name').each(function () {
if ($(this).text().length === 0) {
var name = $(this).parent().find('.name').text();
$(this).text(name);
}
});
You should read up on DOM Traversing with jQuery, there is lots of stuff you can do to get to your elements.
jsfiddle: http://jsfiddle.net/sX4yj/

This should help
$('#myTable tr').each(function(){
var nickname = $(this).find('.nick-name').html();
alert(nickname);
});
Refer: How to get a table cell value using jQuery?

jQuery sum events on TD click

I have a simple table to simulate a Gantt chart. The idea is that each TD clicking trigger a sum of values stored in an hidden input text (an array of values), available in a TH (first son of TR tag). The row sum of these values, is shown on a final TD.
Next, the code table:
<table width="100%" cellspacing="0" class="datagrid_ppal">
<tbody>
<tr class="encabezado">
<th rowspan="2" scope="col" width="15%">Area</th>
<th colspan="7" scope="col">Month</th>
</tr>
<tr class="encabezado">
<th scope="col" width="2%">1</th>
<th scope="col" width="2%">2</th>
<th scope="col" width="2%">3</th>
<th scope="col" width="2%">4</th>
<th scope="col" width="2%">5</th>
<th scope="col" width="2%">...</th>
<th scope="col" width="2%">31</th>
</tr>
<tr>
<th scope="row">Area 1<input name="line_config" type="hidden" value="0,5,50" /></th>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt">...</td>
<td class="gantt"> </td>
</tr>
<tr>
<th scope="row">Area 2 <input name="line_config" type="hidden" value="0,0,10" /></th>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt">...</td>
<td class="gantt"> </td>
</tr>
<tr class="encabezado">
<th scope="row">Total</th>
<td class="total_dia"> </td>
<td class="total_dia"> </td>
<td class="total_dia"> </td>
<td class="total_dia"> </td>
<td class="total_dia"> </td>
<td class="total_dia">...</td>
<td class="total_dia"> </td>
</tr>
</tbody>
</table>
The array of values works as follows:
array [0]: Off;
array [1]: preoperative;
array [2]: Operating.
This is the jQuery code I use to differentiate cells that are pre-operational and operational. If a cell is inactive, the area is off:
$(document).ready(function() {
$('td.gantt').click(function() {
$(this).toggleClass('preop');
});
$('td.gantt').dblclick(function() {
$(this).toggleClass('operating');
});
});
Inactive TD always sum to the total. What I want to do? Simple:
1. That jQuery always sum TH input value[0], if the TD is not clicked (inactive).
2. When I click, or double click, a TD.gantt jQuery fetch the TH input value[1], and add it to the total.
If anyone can help with the whole problem, o a parcial, I would really appreciate.

Mixing "click" and "dblclick" is not going to work, at least not reliably. I suggest you re-work the interaction so that "click" cycles through your three different states.
To do the math you want to do (and I don't fully understand that), the basic problem is to get the <th> contents that correspond to the column that each clicked <td> is in. To get that, you'll have to find which child the <td> is of its parent <tr>, and then that will allow you to find the <th> (with the ":nth-child" selector, or the "eq" filter).