2

I created an html 5 table with a single column that holds a variety of strings which are YouTube video URLs. I am able to insert strings into the table but the issue is that I am trying to use a JavaScript function to get a link(string) and insert it into my iframe YouTube player. Here is what I have:

Here is my table:

Link: <input id="link" type="link" name="link">
<button onClick="appendRow()" > Add Song </button>
<table id = "my_table" table border = "5">
<tr>
   <th>Link</th>
  </tr>
  <tr>
    <td>http://www.youtube.com/embed/evuSpI2Genw</td>
  </tr>
</table>

Here is where I call my JavaScript function to insert the URL to the YouTube player:

<iframe width="888" height="420"
src="getURL()">
</iframe>

Here is my javascript function for grabbing the URL:

var counter = 0;
var songURL = "http://www.youtube.com/embed/evuSpI2Genw";
function getNextSong()
{
    if(counter != 0)
    {
        var tbl = document.getElementById('my_table'), // table reference
        songURL = tbl.rows[counter];
        counter++;
        return;
    }
    songURL = tbl.rows[0];
    counter++;
    return;     
}
function getURL()
{
    return songURL;
}

Please keep in mind that I am new to both JavaScript and HTML5.

4

2 回答 2

3

您需要考虑的几件事

tbl.rows[counter]将获取表格行作为一个对象，其中将包含一组单元格。您需要使用获取单元格的内容tbl.rows[counter].cells[0].innerHTML

此外，您永远不会设置iframesrc。给它一个 ID，然后你可以通过 javascript 访问它。

这是粗糙的，我的意思是粗糙的工作样本。

HTML

Link: <input id="link" type="url" name="link">
<button onClick="appendRow()" > Add Song </button><button onClick="getNextSong()" > Play Next </button>
<table id = "my_table" table border = "5">
<tr>
   <th>Link</th>
  </tr>
  <tr>
    <td>http://www.youtube.com/embed/evuSpI2Genw</td>
  </tr>
</table>

<iframe width="888" height="420" id="player"
src="">
</iframe>

Javascript

var counter = 1;//The Header Row will be row 0
var songURL = "http://www.youtube.com/embed/evuSpI2Genw";
function getNextSong()
{

    var tbl = document.getElementById('my_table'); // table reference
    if(counter != 0)
    {
        songURL = tbl.rows[++counter].cells[0].innerHTML
        document.getElementById('player').src=songURL;
        return;
    }
    songURL = tbl.rows[1].cells[0].innerHTML;
    counter++;
    document.getElementById('player').src=songURL;
    alert(songURL);
    return;  
}

function getURL()
{
    return songURL;
}

function appendRow()
{
    var tbl = document.getElementById('my_table');
    var rowCount = tbl.rows.length;    
    var row = tbl.insertRow(rowCount);
    var cell = row.insertCell(0);
    cell.innerHTML = document.getElementById("link").value;
}
window.onload=function(){

document.getElementById('player').src=getURL();
};

我已经对您的脚本进行了其他调整，但仍然可以进行一些整理。

示例：http: //jsfiddle.net/HGKgn/

于 2013-06-12T00:53:37.150 回答
0

I think this is what you're trying to do, but only changing the src of one iframe on the page.

http://jsbin.com/orinas/2/

Works on IE9+, FF, Chrome, and Safari. Best viewed in Chrome, Safari or IE10.

I created this demo to show you what you could possibly do, while the JS is advanced, there are a lot of core concepts added in that could help you out. Not everything is commented in, because I threw it together quickly, but it is a very good demo that can help you organize your concept.

Notice as well, I do not use the table element =) I use standard elements that you would see on modern web pages today, as well as new CSS3 features.

Instead of having a table full of strings, you should store data like that on JavaScript's side in an Array []. The links array in my demo stores all the links that will show up on page load, and afterwards a user can add more links by clicking +Add and inserting a valid Youtube embed URL (something like http://youtube.com/embed/randomString).

I will be updating this answer later on.

于 2013-06-11T23:51:54.783 回答