JavaScript, getting value of a td with id name

Question

Originally I was using input with an id and grabbing it's value with getElementById. Currently, I'm playing with <td>s. How can I grab the values of the <td>?

Originally I used:

<input id="hello">
document.getElementById("hello").value;

Now I want to get value of <td>, but I don't know how;

<td id="test">Chicken</td>
<td>Cow</td>

Edit: What's the difference between textContent, innerHTML, and innerText?

score 119 · Accepted Answer · answered Feb 22 '10 at 10:15

119

To get the text content

document.getElementById ( "tdid" ).innerText

or

document.getElementById ( "tdid" ).textContent

var tdElem = document.getElementById ( "tdid" );
var tdText = tdElem.innerText | tdElem.textContent;

If you can use jQuery then you can use

$("#tdid").text();

To get the HTML content

var tdElem = document.getElementById ( "tdid" );
var tdText = tdElem.innerHTML;

in jQuery

$("#tdid").html();

answered Feb 22 '10 at 10:15

rahul

184,426
49
232
263

1

Interesting. Under which conditions is `textContent` the better choice? – Pekka Feb 22 '10 at 10:18
1

innerText isn't supported in FF. – rahul Feb 22 '10 at 10:31
3

@Pekka웃 `innerText` returns a version of the text similar to [what would show](http://perfectionkills.com/the-poor-misunderstood-innerText/) on screen (including new lines and spacing). `textContent` gets exactly what is between the start and end tag (including tabs and spaces) with all child tags removed (though their text is also included). In general, you should always use `textContent` to prevent compatibility issues with FF. – Trisped Mar 03 '16 at 01:22

score 10 · Answer 2 · answered Feb 22 '10 at 10:15

10

use the

innerHTML

property and access the td using getElementById() as always.

answered Feb 22 '10 at 10:15

Pekka

442,112
142
972
1,088

score 9 · Answer 3 · answered Feb 22 '10 at 10:15

9

Again with getElementById, but instead .value, use .innerText

<td id="test">Chicken</td>
document.getElementById('test').innerText; //the value of this will be 'Chicken'

answered Feb 22 '10 at 10:15

anthares

11,070
4
41
61

Work like a charm – Bcktr Mar 23 '21 at 03:40

score 3 · Answer 4 · answered Feb 22 '10 at 10:15

3

If by 'td value' you mean text inside of td, then:

document.getElementById('td-id').innerHTML

answered Feb 22 '10 at 10:15

Qwerty

1,732
1
13
18

Is it supposed to have a hyphen? – Strawberry Feb 22 '10 at 10:16
@Doug No, it's just an example. You need to put your ID in there. – Pekka Feb 22 '10 at 10:18

score 3 · Answer 5 · answered Feb 22 '10 at 10:16

For input you must have used value to grab its text but for td, you should use innerHTML to get its html/value. Example:

alert(document.getElementById("td_id_here").innerHTML);

To get its text though, use:

alert(document.getElementById("td_id_here").innerText);

score 1 · Answer 6 · edited Sep 28 '12 at 12:03

1

.innerText doesnt work in Firefox.

.innerHTML works in both the browsers.

edited Sep 28 '12 at 12:03

Mihai Iorga

39,330
16
106
107

answered Aug 21 '12 at 13:36

Vipin

67
4

score 1 · Answer 7 · answered Feb 22 '10 at 10:15

1

Have you tried: getElementbyId('ID_OF_ID').innerHTML?

answered Feb 22 '10 at 10:15

Select0r

12,234
11
45
68

score 0 · Answer 8 · edited Dec 09 '17 at 09:03

if i click table name its shown all fields about table. i did table field to show. but i need to know click function.

My Code:

$sql = "SHOW tables from database_name where tables_in_databasename not like '%tablename' and tables_in_databasename not like '%tablename%'";


$result=mysqli_query($cons,$sql);

$count = 0;

$array = array();

while ($row = mysqli_fetch_assoc($result)) {

    $count++;

    $tbody_txt .= '<tr>';

    foreach ($row as $key => $value) {
        if($count  == '1') {
            $thead_txt .='<td>'.$key.'</td>';
        }
        $tbody_txt .='<td>'.$value.'</td>';


        $array[$key][] = $value;
    }
}?>

JavaScript, getting value of a td with id name

8 Answers8

Linked

Related