How do I get data inside table / td

html table
html table cell background color
html table row background color
html form inside table row
javascript get table cell value by id
</tr>
html table column width
javascript get table row cell value

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>

Instead of InnerHTML, you can use innerText

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

HTML td tag, A simple HTML table, with two rows and four table cells: <table> <tr> <td>Cell The <td> tag defines a standard data cell in an HTML table. An HTML table has  jQuery: code to get table cell value of specific HTML element (div or span) content using jquery. As we need to access specific div/span content inside table TD, we will use jquery .find() method. Using .find() method and pass class-name of a specific HTML element we able to get the table cell value of specific div / span content. Here we only want to fetch the price value from last table cell.

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>

HTML DOM Table cells Collection, Note: The elements in the collection are sorted as they appear in the source code​. Tip: Use the rows collection to return a collection of all <tr> elements in a table. if you want to do it properly w/o adding css to the TDs, then you need to read the innerHTML, and use regex to strip any select elements, then write that into a new element (not injected in dom) then read the innerText (so you get the plaintext again).

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>

Html table tr inside td, You must add a full table inside the td. <table> <tr> <td> <table> <tr> <td> </td> </tr> </table> </td> </tr> </table>. Definition and Usage. The <td> tag defines a standard data cell in an HTML table. An HTML table has two kinds of cells: Header cells - contains header information (created with the <th> element) Data cells - contains data (created with the <td> element) The text in <td> elements are regular and left-aligned by default.

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);

How to Read Data from an HTML Table using JavaScript – Quick Tip, First, I'll create a small table with header and few rows in it. The data is hardcoded. The Markup. <!DOCTYPE html> <html> <head> <title>Read Data from HTML  Tables within Tables. Nested Table always need to be placed between . td > /td > tags of the outer container Table. You can format nested tables as you would format any other HTML Table. The following HTML code create a Table with one row and two column and inside the second column again create another table (nested table) with two rows.

Organizing Data with Tables, Table Data. Once a table is defined and rows within that table have been set up, data cells may be added to the table via the table data, or <td> , element. Listing multiple <td> elements one after the other will create columns within a table row. The output you get is 37 and 29 (from the above example). Read Column Data using “cellIndex” Property. There’s another way you can get cell values for a particular column, without hard coding a number.

TD - Table Data Cell, Table cells may either contain "header" information (see the TH element) or "data​" (see the TD  You simply make a point of ending every line with an end command. When you do a simple table, you really only need one </TR> and one </TD> command at the end of the table. But here, you need to end every line with its own </TD> and each <TR> with its own </TR>.

Tables in HTML documents, The <td> element creates a single data cell in an HTML <table>. Data cells must be used as child elements of a  Dealing with <td> Layout Issues By default, table data elements are laid out vertically aligned with the table data elements in preceding and following rows. For example, if a table includes three rows of data cells, the first data cell from each row will be aligned with the first data cell of each other row.

Comments
  • well you are reading the innerHTML when you want to read the text.
  • Unfortunately i can't use span id instead of span class.I can't manipulate anything just call from another web site.Thank you for answer.