javascript - 无法使用 Javascript 函数从 HTML 5 表中获取字符串

Question

我创建了一个包含单个列的 html 5 表，其中包含各种字符串，这些字符串是 YouTube 视频 URL。我能够将字符串插入表中，但问题是我正在尝试使用 JavaScript 函数获取链接(字符串)并将其插入到我的 iframe YouTube 播放器中。这是我所拥有的:

这是我的表格:

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>

我在此处调用 JavaScript 函数以将 URL 插入 YouTube 播放器:

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

这是我用于抓取 URL 的 javascript 函数:

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;
}

请记住，我是 JavaScript 和 HTML5 的新手。

Answer 1

一些你需要考虑的事情

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

获取单元格的内容

此外，您永远不会设置 iframe src。给它一个 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/