Get the value from inside the row html in Javascript

Question

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.

Nenad and Vladu's answers both work great. This is the time I wish I could choose both answers. — lostInTheTetons
– lostInTheTetons, Commented Jan 17, 2017 at 17:04

Nenad Vracar · Accepted Answer · 2017-01-17 16:57:01Z

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>

Vladu Ionut · Accepted Answer · 2017-01-17 16:53:57Z

2

getElementsByTagName returns a live HTMLCollection of elements with the given tag name.

rowValue = document.getElementsByTagName("tr").value;

replace with

rowValue =$(this).attr("value");

edited Jan 17, 2017 at 16:53

answered Jan 17, 2017 at 16:52

Vladu Ionut

8,2231 gold badge23 silver badges30 bronze badges

1 Comment

lostInTheTetons Over a year ago

I've tried using ById and ByClassName and those don't work either. I'm not sure why I can't pull out the value. I've done it before. Does it have something to do with it being inside an .each function?

JBaldwin · Accepted Answer · 2017-01-17 16:50:23Z

0

Have you tried using just jQuery?

rowValue = $(".mergeSelect").val();

answered Jan 17, 2017 at 16:50

JBaldwin

3641 gold badge3 silver badges19 bronze badges

2 Comments

lostInTheTetons Over a year ago

Yes I have and it still says undefined

Mario Santini Over a year ago

@JBaldwin sorry my review was a mistake. :(

Collectives™ on Stack Overflow

Get the value from inside the row html in Javascript

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related