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

我创建了一个HTML5表，其中包含一列，其中包含各种字符串，这些字符串是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和HTML5都是新手。

我想这就是你想要做的，但只是改变页面上一个iframe的src

适用于IE9+、FF、Chrome和Safari。最好在Chrome、Safari或IE10中查看

我创建这个演示是为了向您展示您可以做些什么，虽然JS是高级的，但是添加了很多核心概念，可以帮助您解决问题。并不是所有的东西都有评论，因为我很快就把它放在了一起，但它是一个非常好的演示，可以帮助你组织你的概念

还要注意的是，我没有使用table元素=），我使用了您今天在现代web页面上看到的标准元素，以及新的CSS3特性

您不应该让一个表充满字符串，而应该将类似JavaScript的数据存储在数组

[]

中。我的演示中的

links

数组存储页面加载时显示的所有链接，之后用户可以通过单击+添加并插入有效的Youtube嵌入URL（类似于）来添加更多链接

---

稍后我将更新此答案。

您需要考虑的一些事项

tbl.rows[counter]

将获取表行作为对象，其中将包含单元格集合。您需要使用

tbl.rows[counter].cells[0].innerHTML获取单元格内容

此外，您从未设置
iframe
src。给它一个ID，然后你可以通过javascript访问它

这里是粗糙的，我的意思是粗糙的，工作样品

HTML

我已经对你的脚本做了其他调整，但仍然需要一些整理

示例：
顺便问一下，是我一个人在使用HTML5表，还是HTML5表让人头疼。它似乎一点也不灵活。想知道是否有更好的方法来处理这张桌子？亚伦写道：“把它插入我的iframe YouTube播放器”——我想你会发现这就是问题所在。AFEK，你可以考虑一个iFrAm类似浏览器中的另一个标签，即包含它的页面不能得到它的内部。它可以设置它的“外部”属性，如src、style、position和size，但不能触及它的DOM。不，我认为html5非常灵活。如果您在服务器上，我会尝试将get或post请求传递到另一个页面，这样结果就是播放器的html。我用ajax抓取，将结果插入div中。是的，我认为HTML5非常灵活，我只是相信用HTML创建这个表似乎没有那么灵活。但这只是我的意见。至于内部属性和外部属性，你说过可以设置外部属性，实际上我试图设置的唯一属性是src属性，它是一个外部属性。我现在将开始研究AJAX，看看您在谈论什么。谢谢该元素与HTML5无关，事实上，它从CSS之前的Web时代就开始了。HTML5是非常灵活的，它建立在HTML（和JS，以及CSS，取决于你问HTML5涵盖了什么）中已经存在的技术之上。真的吗？我不知道是这样的。很高兴知道！非常感谢Jon P。这非常有帮助，也很有意义。再次感谢。
<iframe width="888" height="420"
src="getURL()">
</iframe>  

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

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>  

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