Dynamically create ID for table-rows

Hi there, so i am working on a website, and on it there is a video with youtube api.

I need to hide all Table-rows that are not during each 5 second time frame.
So for example, when it is at 0:36, it will hide all TR's besides the TR that has to do with the video between 0:35 and 0:40.

Each TR displays a start time, content, and end time.

Here is what the tables currently look like.
<table width="600" class="table" >
<tr class="item-titles">
<td width="75" class="none">Start</td>
<td width="400">Caption</td>
<td width="75">End</td>
</tr>



<tr>
<td class="none"><a href="javascript:player.seekTo(0, false)">0</a></td>
<td><a href="javascript:player.seekTo(0, false)"></a></td>
<td><a href="javascript:player.seekTo(5, false)">5</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(5, false)">5</a></td>
<td><a href="javascript:player.seekTo(5, false)"></a></td>
<td><a href="javascript:player.seekTo(10, false)">10</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(10, false)">10</a></td>
<td><a href="javascript:player.seekTo(10, false)"></a></td>
<td><a href="javascript:player.seekTo(15, false)">15</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(15, false)">15</a></td>
<td><a href="javascript:player.seekTo(15, false)"></a></td>
<td><a href="javascript:player.seekTo(20, false)">20</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(20, false)">20</a></td>
<td><a href="javascript:player.seekTo(20, false)"></a></td>
<td><a href="javascript:player.seekTo(25, false)">25</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(25, false)">25</a></td>
<td><a href="javascript:player.seekTo(25, false)"></a></td>
<td><a href="javascript:player.seekTo(30, false)">30</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(30, false)">30</a></td>
<td><a href="javascript:player.seekTo(30, false)"></a></td>
<td><a href="javascript:player.seekTo(35, false)">35</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(35, false)">35</a></td>
<td><a href="javascript:player.seekTo(35, false)"></a></td>
<td><a href="javascript:player.seekTo(40, false)">40</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(40, false)">40</a></td>
<td><a href="javascript:player.seekTo(40, false)"></a></td>
<td><a href="javascript:player.seekTo(45, false)">45</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(45, false)">45</a></td>
<td><a href="javascript:player.seekTo(45, false)"></a></td>
<td><a href="javascript:player.seekTo(50, false)">50</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(50, false)">50</a></td>
<td><a href="javascript:player.seekTo(50, false)"></a></td>
<td><a href="javascript:player.seekTo(55, false)">55</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(55, false)">55</a></td>
<td><a href="javascript:player.seekTo(55, false)"></a></td>
<td><a href="javascript:player.seekTo(60, false)">60</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(60, false)">60</a></td>
<td><a href="javascript:player.seekTo(60, false)"></a></td>
<td><a href="javascript:player.seekTo(65, false)">65</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(65, false)">65</a></td>
<td><a href="javascript:player.seekTo(65, false)"></a></td>
<td><a href="javascript:player.seekTo(70, false)">70</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(70, false)">70</a></td>
<td><a href="javascript:player.seekTo(70, false)"></a></td>
<td><a href="javascript:player.seekTo(75, false)">75</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(75, false)">75</a></td>
<td><a href="javascript:player.seekTo(75, false)"></a></td>
<td><a href="javascript:player.seekTo(80, false)">80</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(80, false)">80</a></td>
<td><a href="javascript:player.seekTo(80, false)"></a></td>
<td><a href="javascript:player.seekTo(85, false)">85</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(85, false)">85</a></td>
<td><a href="javascript:player.seekTo(85, false)"></a></td>
<td><a href="javascript:player.seekTo(90, false)">90</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(90, false)">90</a></td>
<td><a href="javascript:player.seekTo(90, false)"></a></td>
<td><a href="javascript:player.seekTo(95, false)">95</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(95, false)">95</a></td>
<td><a href="javascript:player.seekTo(95, false)"></a></td>
<td><a href="javascript:player.seekTo(100, false)">100</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(100, false)">100</a></td>
<td><a href="javascript:player.seekTo(100, false)"></a></td>
<td><a href="javascript:player.seekTo(105, false)">105</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(105, false)">105</a></td>
<td><a href="javascript:player.seekTo(105, false)"></a></td>
<td><a href="javascript:player.seekTo(110, false)">110</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(110, false)">110</a></td>
<td><a href="javascript:player.seekTo(110, false)"></a></td>
<td><a href="javascript:player.seekTo(115, false)">115</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(115, false)">115</a></td>
<td><a href="javascript:player.seekTo(115, false)"></a></td>
<td><a href="javascript:player.seekTo(120, false)">120</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(120, false)">120</a></td>
<td><a href="javascript:player.seekTo(120, false)"></a></td>
<td><a href="javascript:player.seekTo(125, false)">125</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(125, false)">125</a></td>
<td><a href="javascript:player.seekTo(125, false)"></a></td>
<td><a href="javascript:player.seekTo(130, false)">130</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(130, false)">130</a></td>
<td><a href="javascript:player.seekTo(130, false)"></a></td>
<td><a href="javascript:player.seekTo(135, false)">135</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(135, false)">135</a></td>
<td><a href="javascript:player.seekTo(135, false)"></a></td>
<td><a href="javascript:player.seekTo(140, false)">140</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(140, false)">140</a></td>
<td><a href="javascript:player.seekTo(140, false)"></a></td>
<td><a href="javascript:player.seekTo(145, false)">145</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(145, false)">145</a></td>
<td><a href="javascript:player.seekTo(145, false)"></a></td>
<td><a href="javascript:player.seekTo(150, false)">150</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(150, false)">150</a></td>
<td><a href="javascript:player.seekTo(150, false)"></a></td>
<td><a href="javascript:player.seekTo(155, false)">155</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(155, false)">155</a></td>
<td><a href="javascript:player.seekTo(155, false)"></a></td>
<td><a href="javascript:player.seekTo(160, false)">160</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(160, false)">160</a></td>
<td><a href="javascript:player.seekTo(160, false)"></a></td>
<td><a href="javascript:player.seekTo(165, false)">165</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(165, false)">165</a></td>
<td><a href="javascript:player.seekTo(165, false)"></a></td>
<td><a href="javascript:player.seekTo(170, false)">170</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(170, false)">170</a></td>
<td><a href="javascript:player.seekTo(170, false)"></a></td>
<td><a href="javascript:player.seekTo(175, false)">175</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(175, false)">175</a></td>
<td><a href="javascript:player.seekTo(175, false)"></a></td>
<td><a href="javascript:player.seekTo(180, false)">180</td>
</tr>



<tr>
<td class="none"><a href="javascript:player.seekTo(180, false)">180</a></td>
<td><a href="javascript:player.seekTo(180, false)"></a></td>
<td><a href="javascript:player.seekTo(185, false)">185</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(185, false)">185</a></td>
<td><a href="javascript:player.seekTo(185, false)"></a></td>
<td><a href="javascript:player.seekTo(190, false)">190</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(190, false)">190</a></td>
<td><a href="javascript:player.seekTo(190, false)"></a></td>
<td><a href="javascript:player.seekTo(195, false)">195</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(195, false)">195</a></td>
<td><a href="javascript:player.seekTo(195, false)"></a></td>
<td><a href="javascript:player.seekTo(200, false)">200</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(200, false)">200</a></td>
<td><a href="javascript:player.seekTo(200, false)"></a></td>
<td><a href="javascript:player.seekTo(205, false)">205</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(205, false)">205</a></td>
<td><a href="javascript:player.seekTo(205, false)"></a></td>
<td><a href="javascript:player.seekTo(210, false)">210</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(210, false)">210</a></td>
<td><a href="javascript:player.seekTo(210, false)"></a></td>
<td><a href="javascript:player.seekTo(215, false)">215</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(215, false)">215</a></td>
<td><a href="javascript:player.seekTo(215, false)"></a></td>
<td><a href="javascript:player.seekTo(220, false)">220</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(220, false)">220</a></td>
<td><a href="javascript:player.seekTo(220, false)"></a></td>
<td><a href="javascript:player.seekTo(225, false)">225</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(225, false)">225</a></td>
<td><a href="javascript:player.seekTo(225, false)"></a></td>
<td><a href="javascript:player.seekTo(230, false)">230</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(230, false)">230</a></td>
<td><a href="javascript:player.seekTo(230, false)"></a></td>
<td><a href="javascript:player.seekTo(235, false)">235</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(235, false)">235</a></td>
<td><a href="javascript:player.seekTo(235, false)"></a></td>
<td><a href="javascript:player.seekTo(240, false)">240</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(240, false)">240</a></td>
<td><a href="javascript:player.seekTo(240, false)"></a></td>
<td><a href="javascript:player.seekTo(245, false)">245</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(245, false)">245</a></td>
<td><a href="javascript:player.seekTo(245, false)"></a></td>
<td><a href="javascript:player.seekTo(250, false)">250</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(250, false)">250</a></td>
<td><a href="javascript:player.seekTo(250, false)"></a></td>
<td><a href="javascript:player.seekTo(255, false)">255</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(255, false)">255</a></td>
<td><a href="javascript:player.seekTo(255, false)"></a></td>
<td><a href="javascript:player.seekTo(260, false)">260</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(260, false)">260</a></td>
<td><a href="javascript:player.seekTo(260, false)"></a></td>
<td><a href="javascript:player.seekTo(265, false)">265</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(265, false)">265</a></td>
<td><a href="javascript:player.seekTo(265, false)"></a></td>
<td><a href="javascript:player.seekTo(270, false)">270</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(270, false)">270</a></td>
<td><a href="javascript:player.seekTo(270, false)"></a></td>
<td><a href="javascript:player.seekTo(275, false)">275</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(275, false)">275</a></td>
<td><a href="javascript:player.seekTo(275, false)"></a></td>
<td><a href="javascript:player.seekTo(280, false)">280</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(280, false)">280</a></td>
<td><a href="javascript:player.seekTo(280, false)"></a></td>
<td><a href="javascript:player.seekTo(285, false)">285</td>
</tr>


</table>

And you can see the page at

http://134.117.226.43:8000/check_subs/Carleton_University/test101/91/

any help ?

just a couple of changes :D

around line 122 of your original code, add these variables and change your existing functions like this:


var oldtime;
var int;

function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PAUSED) {
stopped(player.getCurrentTime());
}
if (evt.data == YT.PlayerState.PLAYING) {
rollover(player.getCurrentTime());
}
if (evt.data == YT.PlayerState.ENDED) {
clearInterval(int)
}

}



function stopped(cur_time) {
alert('Inside stopped() ' + cur_time);
var i=0;
var t_start = document.getElementById('starttime');
var cont = document.getElementById('content');
var t_end = document.getElementById('endtime');
clearInterval(int)
}

function rollover(cur_time) {
int=setInterval(timer,100)
alert('Inside rollover() ' + all_chunklets_text[1]);
}


then right at the bottom of your body section, add this:


<script>
rows=document.getElementById("mytable").getElementsByTagName("tr")
for ( x = 2; x < rows.length; x++ ){
rows[x].style.display="none"
}

function timer() {
time=parseInt(player.getCurrentTime())
if (time%5==0&&oldtime!=time){
rows[1].innerHTML=rows[(time/5)+1].innerHTML
oldtime=time
}
}
</script>


I think that's it - let me know if something goes pear-shaped

- let me know if something goes pear-shaped

Hmmmm....like my body?

Hello, and thank you for the reply.
I added your code and added the id to my table.
And it seems like its working, except for one thing.
The video seems to be hidden.

yes, it seems that you have deleted your onPlayerReady function. That entire first script block should look like this:


<script>
//Load player api asynchronously. Inspired by http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '215',
width: '300',
videoId: '0L_iOnLNt9M',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
player.seekTo(0, false)
player.pauseVideo();
}

var oldtime;
var int;

function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PAUSED) {
stopped(player.getCurrentTime());
}
if (evt.data == YT.PlayerState.PLAYING) {
rollover(player.getCurrentTime());
}
if (evt.data == YT.PlayerState.ENDED) {
clearInterval(int)
}
}

function stopped(cur_time) {
alert('Inside stopped() ' + cur_time);
var i=0;
var t_start = document.getElementById('starttime');
var cont = document.getElementById('content');
var t_end = document.getElementById('endtime');
clearInterval(int)
}

function rollover(cur_time) {
int=setInterval(timer,100)
alert('Inside rollover() ' + all_chunklets_text[1]);
}

</script>

also it occurs to me that if you change your timer function to:

function timer() {
time=parseInt(player.getCurrentTime()/5)
if (oldtime!=time){
rows[1].innerHTML=rows[time+1].innerHTML
oldtime=time
}
}


it will update the row to display instantly (or close enough) if someone drags the slider, instead of waiting for the 5 second mark to tick over, like the previous version did.

hope that helps. and Old Pedant - sorry, some solutions are beyond even my reach :D

Yes that was it :)
thanks very much for your time.
You are a gentleman and a scholar

Hey, so im trying one more thing.
I want to be able to show the time before and after the current time.
So say we have a Row in the middle that displays the current times - Lets say 10 - 15.
And then a Row above that displays 5-10
And then a row below that displays 15 - 20.

How would i be able to make all of them count up.
This is what i have, but the second row doesnt count up.

<script>
//Load player api asynchronously. Inspired by http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '215',
width: '300',
videoId: '0L_iOnLNt9M',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
player.seekTo(0, false)
player.pauseVideo();
}

var oldtime;
var int;

function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PAUSED) {
stopped(player.getCurrentTime());
}
if (evt.data == YT.PlayerState.PLAYING) {
rollover(player.getCurrentTime());
rollover2(player.getCurrentTime());
}
if (evt.data == YT.PlayerState.ENDED) {
clearInterval(int)
}
}

function stopped(cur_time) {
var i=0;
var t_start = document.getElementById('starttime');
var cont = document.getElementById('content');
var t_end = document.getElementById('endtime');
clearInterval(int)
}

function rollover(cur_time) {
int=setInterval(timer,100)
}

function rollover2(cur_time) {
int=setInterval(timer2,100)
}

function timer() {
time=parseInt(player.getCurrentTime()/5)
if (oldtime!=time){
rows[1].innerHTML=rows[time+1].innerHTML
oldtime=time
}


}

function timer2() {
time=parseInt(player.getCurrentTime()/5)
if (oldtime!=time){
rows[2].innerHTML=rows[time+1].innerHTML
oldtime=time
}


}

</script>

and

<script>
rows=document.getElementById("main-table").getElementsByTagName("tr")
for ( x = 3; x < rows.length; x++ ){
rows[x].style.display="none"
}

function timer() {
time=parseInt(player.getCurrentTime())
if (time%5==0&&oldtime!=time){
rows[1].innerHTML=rows[(time/5)+1].innerHTML
oldtime=time
}
}

function timer2() {
time=parseInt(player.getCurrentTime())
if (time%5==0&&oldtime!=time){
rows[2].innerHTML=rows[(time/5)+1].innerHTML
oldtime=time
}
}

thanks

well, it's getting kinda hokey, but this seems to work...


<script>
var contents=[]
rows=document.getElementById("mytable").getElementsByTagName("tr")
for ( x = 1; x < rows.length; x++ ){
contents.push(rows[x].innerHTML);
if (x<5){
continue;
} else{
rows[x].style.display="none"
}
}

function timer() {
time=parseInt(player.getCurrentTime()/5)
if (oldtime!=time){
rows[2].innerHTML=contents[time]
rows[3].innerHTML=contents[time+1]
if(time+2<contents.length){
rows[4].innerHTML=contents[time+2]
}else{
rows[4].innerHTML=""
}
oldtime=time
}
}
</script>