Hello. I want to get data from a table. I wrote the folloing JavaScript code:
var homeTeam = document.getElementById('home').firstChild.data;
The html code for the table is:
<table>
<tr>
<td id="home"><span class='yellowcard'></span>Tottenham</td>
<td id="away">Chelsea</td>
</tr>
</table>
How is it possible to get the word 'Tottenham' in this case?
My JavaScript code is working only if 'span' tags are removed.
hello,
by fixing the issue within the td data with the id of home and code in the JavaScript block, you can access the word 'Tottenham'. I modified the JavaScript code by adding an alert box so that you can see results in the popup.
<body>
<script type="text/javascript">
function getValue(){
var x=document.getElementById("home");
alert(x.firstChild.innerHTML);
}
</script>
<h1 id="header1" onclick="getValue()">Click me!</h1>
<table>
<tr>
<td id="home"><span class='yellowcard'>Tottenham</span></td>
<td id="away">Chelsea</td>
</tr>
</table>
</body>
Thank you for reply. I would like to know what code to use leaving Tottenham as it is.
I think you want this:
function getValue(){
var homeTeam = document.getElementById('home');
alert(homeTeam.textContent);
}
Ok, so I had assumed that the table data was a typo with the first <span> element. I do not see how you will be able to access that information unless you place the word 'Tottenham' within an element so that it can be accessed via the DOM tree. How about this...would you be able to leave the current <span> element as is, and then just wrap that word within its own <span> element, then update the JavaScript to access the second <span> element as follows:
Line #6 in my first example would be changed to:
alert(x.childNodes[1].innerHTML);
Then line #13 changed to:
<td id="home"><span class='yellowcard'></span><span>Tottenham</span></td>
I have created a site on localhost using php and mysql for soccer statistics. And now I am learning javascript to be able to create a code to take soccer results from another site. I am not sure if it is possible to do it just using the address and the 'source code' of that site:
<table id="blocks" class="gteam team2432-1 team10818-1" onmouseover="rowOver('2432-1','10818-1')" onmouseout="resetOver()">
<tbody>
<tr class="even">
<td class="kick">20:45</td>
<td class="status"><span title="Final Time">FT</span></td>
<td class="home uc winteam"> <span class='yellowcard'></span> Tottenham</td>
<td class="score"><a title="Match Details" class="score_link" href="javascript:popup('771395-1')">2 - 0</a></td>
<td class="away uc ">Everton FC <span class='yellowcard'></span><span class='yellowcard'></span><span class='yellowcard'></span> </td>
<td class="halftime">(1 - 0)</td>
<td class="tools"><span class="toolBox"><span title="Rescheduled from 13.08.2011." class="info"> </span></span></td>
<td class="fav"></td>
</tr>
</tbody>
</table>
As you can see, this is the reason I cannot modify the code, because it's not mine.
Fellows - I have alist of 100 books (a couple different list actually) and I want to strip out and list the H3 headings only. I tried the script in the first message but the massage box says 'unidentified' if i have multiple h3 headings. Am I on the right track. I am not a coder. A wee bit of a script monkey is all.
Thank You
This is what I would like to strip out into a text document or another HTML - I don't think I know what I am doing :-)
<HTML><HEAD><TITLE>This is a test document for stripping text</TITLE>
<script type="text/javascript">
function getValue(){
var x=document.getElementById("home");
alert(x.firstChild.innerHTML);
}
</script>
</HEAD>
<body>
<h1 id="header1" onclick="getValue()">Click me!</h1>
<h3 id="home"><span class='yellowcard'>Tottenham</span></h3>
This is a text document
<h3 id="home"><span class='yellowcard'>Jim Nielsen</span></h3>
This is a text document
<h3 id="home"><span class='yellowcard'>Hello</span></h3>
This is a text document
<h3 id="home"><span class='yellowcard'>This is what</span></h3>
This is a text document
<h3 id="home"><span class='yellowcard'>I wuld like to strip out</span></h3>
This is a text document
</body>
</HTML>
This works in Internet Explorer, Chrome and Opera:
<body>
<table>
<tr>
<td id="home"><span class='yellowcard'></span>Tottenham</td>
<td id="away">Chelsea</td>
</tr>
</table>
<script type="text/javascript">
var homeTeam = document.getElementById('home');
alert(homeTeam.innerText);
</script>
</body>
This works in Firefox:
<body>
<table>
<tr>
<td id="home"><span class='yellowcard'></span>Tottenham</td>
<td id="away">Chelsea</td>
</tr>
</table>
<script type="text/javascript">
var homeTeam = document.getElementById('home');
alert(homeTeam.textContent);
</script>
</body>
Because there are many differences in interpreting the JavaScript codes by browsers, it is better to use jQuery in such situations.
Using JQuery:
var text = $("#home").text();
Using pure JavaScript:
var cell = document.getElementById('home');
var text = typeof cell.textContent === 'string' ? cell.textContent : cell.innerText;
Just by curiosity, I made a version extending the Table Cell prototype:
HTMLTableCellElement.prototype.getText = function() {
return typeof this.textContent === 'string' ? this.textContent : this.innerText;
};
var cell = document.getElementById('home');
alert(cell.getText());
And from other html code above we need to get the text from a <td> tag that belongs to a certain class:
<td class="home uc winteam"> <span class='yellowcard'></span> Tottenham</td>
With jQuery we can get it in the following way:
var homeTeam = $('td[class^=home]').text();
alert(homeTeam);
This means: get the text from the <td> tag which classname begins with "home".
@Jimnto
1. First you need to place the JavaScript code before the closing tag </body>, because the whole page needs to load for the code to act.
2. If you need to get the information between tags, you can use "getElementsByTagName" method. Because it returns an Array, you need to use a loop type "for".
3. Instead using "alert" I think in this situation it is better to use "document.write".
In this way we have the code:
<HTML>
<HEAD>
<TITLE>This is a test document for stripping text</TITLE>
</HEAD>
<body>
<h1 id="header1" onclick="getValue()">Click me!</h1>
<h3 id="home"><span class='yellowcard'>Tottenham</span></h3>
This is a text document
<h3 id="home"><span class='yellowcard'>Jim Nielsen</span></h3>
This is a text document
<h3 id="home"><span class='yellowcard'>Hello</span></h3>
This is a text document
<h3 id="home"><span class='yellowcard'>This is what</span></h3>
This is a text document
<h3 id="home"><span class='yellowcard'>I wuld like to strip out</span></h3>
This is a text document
<script type="text/javascript">
function getValue(){
var x = document.getElementsByTagName("h3");
document.write("<br /><br />The info below is provided by JavaScript code:<br />");
for (var i=0; i<x.length; i++){
document.write(x[i].innerText + "<br />");
}
}
getValue();
</script>
</body>
</HTML>
Hope this helps.
Jimnto
Also please notice that "innerText" works in Internet Explorer, Chrome and Opera. In Firefox replace it with "textContent".
That is perfectly awesome! It will really really help me compose a list for my students!
And it wored perfectly.
Thanks so very much
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.