1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

get Data inside <TD>

Discussion in 'JavaScript' started by srox, Oct 8, 2008.

  1. #1
    Hii

    How to get data inside <td> tag using javascript and DOM?? I want to read display inside <td> display</td>
    eg

    <table id="copyme">
    <tr>
    <td> dispay </td>
    <td>
    </tr>
    </table>
    SEMrush
     
    srox, Oct 8, 2008 IP
    SEMrush
  2. xlcho

    xlcho Guest

    Messages:
    532
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Put an id on your <td>. I've used 'mytd' as id. Then use the fallowing:
    document.getElementById('mytd').innerHTML = 'blah blah blah';
    Code (markup):
    to set the data. And
    alert(document.getElementById('mytd').innerHTML);
    Code (markup):
    to get it.
     
    xlcho, Oct 8, 2008 IP
  3. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #3
    if you don't want to assign an id to each TD, look at document.getElementsByTagName("td") - will return an array of all your TDs as objects, get innerHTML then.
     
    dimitar christoff, Oct 8, 2008 IP
  4. srox

    srox Guest

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    when i do this
    var a=document.getElementsByTagName("td").innerHTML;
    alert(a);

    so its give error: undefined


    Actually there are many tags inside <td> like

    <td>abc</td>
    <td><div id="d"> def </div></td>



    But I want to get only "abc"
    Please help me
     
    srox, Oct 8, 2008 IP
  5. srox

    srox Guest

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    And i dont want to get it through id beacuse there are alots of <td> Then i have to mention the ids of each td tag..

    Kindly give me the right solution
     
    srox, Oct 8, 2008 IP
  6. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #6
    wrong. this will get the elements array only - you can iterate through through them afterwards to extract the data via the innerHTML or innerText proeprties:
    
    var tds = document.getElementsByTagName("td");
    var counter = tds.length();
    while(counter--) {
        alert(tds[counter].innerHTML);
        // if you want to strip html and care about text only, use innerText instead.
    
    }
    
    PHP:
     
    dimitar christoff, Oct 8, 2008 IP
  7. srox

    srox Guest

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Thx its really helpful innerText.

    But it also prints the

    value 1 value 2 value 3 value 4

    <select id="sel1">
    <option value="value 1">value 1</option>
    <option value="value 2">value 2</option>
    <option value="value 3">value 3</option>
    <option value="value 4">value 4</option>
    </select>

    please tell me
     
    srox, Oct 8, 2008 IP
  8. srox

    srox Guest

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Where i just want to print the "abc" not "value 1 value 2 value 3 value 4 "

    <td>abc</td>
    <td>
    <select id="sel1">
    <option value="value 1">value 1</option>
    <option value="value 2">value 2</option>
    <option value="value 3">value 3</option>
    <option value="value 4">value 4</option>
    </select>
    </td>

    kindly help me out..I spent the whole day
     
    srox, Oct 8, 2008 IP
  9. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #9
    i believe in the teach a man to fish approach--the fact that you have spent a day learning is great--you won't always have somebody write your scripts for you. but i will give you a clue anyway :)

    if you want to skip particular TDs from being picked, having a css based selector (well, not really but it's the same principle) may be the way to go. To those TDs you do not want to include, add class="skip".

    <td>abc</td>
    <td class="skip">
    <select id="sel1">
    <option value="value 1">value 1</option>
    <option value="value 2">value 2</option>
    <option value="value 3">value 3</option>
    <option value="value 4">value 4</option>
    </select>
    </td>
    <td>testing!
    </td>
    <script>
    var tds = document.getElementsByTagName("td");
    var counter = tds.length();
    while(counter--) {
        if (tds[counter].className != "skip")
            alert(tds[counter].innerText);
    }
    </script>
    
    HTML:
    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).

    alternatively, you can read all child elements of the td and iterate through them, getting their innerText and adding it all up, skipping unwanted by class (you can add class="skip" to the select, for instance).

    anyway, nothing is ever simple, is it--at least, not the good things in life :)
     
    dimitar christoff, Oct 8, 2008 IP
  10. srox

    srox Guest

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    If we have So many Tds So do you think its become too much hard to write the class attribute again and again??

    Isn't it become too difficult??

    there is no simplest way to get the innerText inside the td??

    <td> userName<input type="text" /></td>
    <td> pasword</td>
    <td> <select name="s"><option value="a">a</option></select></td>

    tell me
     
    srox, Oct 9, 2008 IP
  11. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #11
    sigh. does not look like you want to do much...

    you owe me...
    
    <html>
    <head>
    <script type="text/javascript">
    var getData = function() {
        var tds = document.getElementsByTagName("td");
        var result = [], count = 0;
        
        for (ii = 0; ii < tds.length; ii++) {
            var selects = tds[ii].getElementsByTagName("select");
            if (selects.length == 0) {
                // only include td text if no selects in the td.
                result[count] = tds[ii].innerText;
                count++;
            }
    
        }
        return result;
    }
    
    window.onload = (function() {
        var tdTextArray = getData(), output = document.getElementById("output");
        for (ii = 0; ii < tdTextArray.length; ++ii)
            output.innerHTML += "<div style='border-bottom: 1px dotted #000; padding: 2px;'>" + tdTextArray[ii] + "</div>";
    });
    </script>
    
    </head>
    <body>
    <table>
    <tr>
    <td> userName <input type="text" /></td>
    <td> pasword</td>
    <td> <select name="s"><option value="a">a</option></select></td>
    </tr>
    </table>
    <br /><br />
        <h1>Output</h1>
    <div id="output">  
    </div>
    </body>
    </html>
    PHP:
    i hope you can take it from here, I am done. please also note innerText is an IE property only. no such thing in FF.
     
    dimitar christoff, Oct 9, 2008 IP