如何将我的TD按钮元素从文本更改为链接到URL的图像

Question

编辑：我正在使用Stratus SoundCloud API，因此我不希望URL将我带到另一个选项卡或页面。在页面底部，它应该像弹出窗口一样，以播放音乐。对不起，应该写这篇文章！

我有一个我正在设置为变量的字符串。在字符串中，我有一个td元素，用于一个称为PlayButton的按钮，该按钮链接到URL。目前，这只是文字"播放歌曲"，但我想将其更改为图像(即使用"资产/play.png"(。

var track = '<tr><td><button class="playButton" data-url="'+url+'"><img src="assets/play.png" alt="Play Song"></button></td><td><button class="playlistButton"> + </button></td></tr>';

我想为playlistbutton做同样的事情，因此将其从文本" "符号更改为加号图像。

谢谢！

Answer 1

只需使用<a> </a>标签。

在这里：

var track = '
    <tr>
        <td>
         <a class="playButton" href="'+url+'"><img src="assets/play.png" alt="Play Song"></a>
        </td>
        <td>
            <a class="playlistButton" href = "url"> + </a>
        </td>
    </tr>';

，对于新的选项卡部件，请使用此

在新标签中打开：

var track = '
    <tr>
        <td>
         <a class="playButton" href="'+url+'" target="_blank"><img src="assets/play.png" alt="Play Song"></a>
        </td>
        <td>
            <a class="playlistButton" href = "url" target="_blank"> + </a>
        </td>
    </tr>';

在同一选项卡中打开以下情况：

var track = '
        <tr>
            <td>
             <a class="playButton" href="'+url+'" target="_self"><img src="assets/play.png" alt="Play Song"></a>
            </td>
            <td>
                <a class="playlistButton" href = "url" target="_self"> + </a>
            </td>
        </tr>';

Answer 2

只需将 button更改为 a

下面的示例。

<tr><td><a class="playButton" href="'+url+'"><img src="assets/play.png" alt="Play Song"></a></td><td><a class="playlistButton" href="#"> + </a></td></tr>

基础

var track = '<tr><td><button class="playButton" data-url="'+url+'"><img src="assets/play.png" alt="Play Song"></button></td><td><button class="playlistButton"> + </button></td></tr>';

Answer 3

var track = '
<tr>
    <td>
     <a class="playButton" href="'+url+'" style="background-image:url("assets/play.png");background-repeat:no-repeat;" alt="Play Song"></a>
    </td>
    <td>
        <a class="playlistButton" href = "'+url+'" style="background-image:url("assets/play.png")" > + </a>
    </td>
</tr>';

Answer 4

使用

<a> </a>

标签。它用于超链接，用于从一个页面链接到其他。尝试转到此链接(https://www.w3schools.com/tags/tag_a.asp(以获取有关标签的更多信息。