2

YouTube ビデオの URL であるさまざまな文字列を保持する単一の列を持つ html 5 テーブルを作成しました。テーブルに文字列を挿入することはできますが、問題は、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 の両方に不慣れであることを覚えておいてください。

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 に答える