CODEWITHSUNDEEP
javascript
Dorbagna
Dorbagna

Reputation: 315

How do I get data inside table / td

I use code below for get the cell value.

alert(document.getElementById("table-body-positions").rows[0].cells[3].innerHTML);

Td value is

<td><a data-action="details"><span><span class="">2019/01/04 13:36:19</span></span></a></td>

I get result this.

<a data-action="details"><span><span class="">2019/01/04 13:36:19</span></span></a>

But I just want to get 2019/01/04 13:36:19

Same problem here for this td.

<td><a data-action="update-limit" data-filter="limit">1.18809 (505.4)<br>$808.64</a></td>

Upvotes: 0

Views: 114

Answers (4)

Arnas Dičkus
Arnas Dičkus

Reputation: 677

Your code seems over complicated just to get innerHTML alerts. Here is my solution. Codepen

HTML

<table id = "table-body-positions">
    <tr>
    <td><a data-action="details"><span><span id = "details">2019/01/04 13:36:19</span></span></a></td>
    <td><a data-action="update-limit" data-filter="limit"><span id = "limit">1.18809 (505.4)<br>$808.64</span></a></td>
    </tr>
</table>

JS

let details = document.getElementById("details").innerHTML;
let limit = document.getElementById("limit").innerText;

alert(details);
alert(limit);

Upvotes: 0

kockburn
kockburn

Reputation: 17606

Find each td by tag name and then recursively check its contents until a nodeType TEXT_NODE is found.

This works best if you do not have a fixed HTML structure within your tds as it would appear.

No ids and no classes needed.

function recursiveSearch(elem){
   
   if(elem.nodeType === Node.TEXT_NODE){
     //text was discovered
     return elem.data.replace("\n", "").trim();
   }
   const nodes = elem.childNodes;
   return Object.keys(nodes).map(key=>recursiveSearch(nodes[key])).join("");
}

const tds = document.getElementsByTagName('td');
const res = Object.keys(tds).map(key=>{
  const td = tds[key];
  return recursiveSearch(td);
});

console.log(res);
<table>
  <td>
    <a data-action="details">
      <span>
    <span class="">2019/01/04 13:36:19</span>
      </span>
    </a>
  </td>
  <td>
    <a data-action="update-limit" data-filter="limit">
  1.18809 (505.4)<br>$808.64
   </a>
  </td>

</table>

Upvotes: 1

mbunch
mbunch

Reputation: 569

It would be easier if you could add a unique id, or class name to the span you are interested in.

Use innerText rather than innerHTML.

console.log(document.getElementsByTagName('td')[0].getElementsByTagName('span')[1].innerText)
<table>
<td><a data-action="details"><span><span class="">2019/01/04 13:36:19</span></span></a></td>
</table>

Upvotes: 0

Anoop Mc
Anoop Mc

Reputation: 88

Instead of InnerHTML, you can use innerText

alert(document.getElementById("table-body-positions").rows[0].cells[1].innerText);

Upvotes: 0

Related Questions