通过表中的链接或按钮进行的​​Javascript调用将不会超出第一行

Question

无论出于何种原因，在调用连续的ajax请求重新填充HTML表之后，表的第一行中的链接工作并调用Javascript函数，但此后的任何行都不再有链接或按钮。

在网页上，我右边有一个包含多个链接的表，当你点击其中任何一个时，它会调用一个Javascript函数，该函数使用ajax请求再次填充表，这次使用单独的项和链接。在第二个表中，第一行之后没有链接或按钮工作。我已附上相关的代码段，我真的很感激任何帮助！

<form id="mylists" name="mylists">
<div id="table" style="overflow: auto; height: 250px; width: 250px;">
   <table id="myplaylists" cellspacing="0" cellpadding="2" width="225px" style="position: relative; left: -7%;">
      <tr height='8px'><td><a href='javascript:getUserPlaylist(0)'>title</a></td></tr>
          <tr height='8px'><td><a href='javascript:getUserPlaylist(1)'>title1</a></td></tr>
          <tr height='8px'><td><a href='javascript:getUserPlaylist(2)'>title2</a></td></tr>
          <tr height='8px'><td><a href='javascript:getUserPlaylist(3)'>title3</a></td></tr>
         </table>
</div>
</form>

Javascript功能：

function getUserPlaylist(id)
{
var request;
var table = document.getElementById("table");

try {
    request = new XMLHttpRequest(); /* e.g. Firefox */
    } 
catch(e) {
      try {
      request = new ActiveXObject("Msxml2.XMLHTTP");  /* some versions IE */
      } catch (e) {
        try {
        request = new ActiveXObject("Microsoft.XMLHTTP");  /* some versions IE */
        } catch (E) {
         request = false;
        } 
      } 
 }

request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200)
    {
        table.innerHTML = "";
        table.innerHTML = request.responseText;
    }
};

request.open("GET", "user_playlists.php?display=" + id, true);
request.send();
}

PHP文件：

$display = $_GET['display'];
$query = "SELECT item, title FROM Playlists WHERE playlistID = '$display'";
    $result = mysql_query($query);
    $numr = mysql_num_rows($result);

    if($numr > 0)
    {
        $row = mysql_fetch_array($result, MYSQL_ASSOC);
        $item = $row['item'];
        $title = $row['title'];
        $temp = explode(",", $item);
        $items = array();

        echo "<table id='myplaylists' cellspacing='0' cellpadding='2' width='225px' style='position: relative; left: -7%;'>";
        echo "<tr height='8px' scope='col'><td><b>$title</b>&nbsp;<a href='javascript:editPlaylist($display)'>add</a></td></tr>";

        foreach ($temp as $id)
        {
            $query = "SELECT title FROM Info WHERE ID = '$id'";
            $result = mysql_query($query);
            $numr = mysql_num_rows($result);

            if ($numr > 0)
            {
                $row = mysql_fetch_array($result, MYSQL_ASSOC);
                $title = $row['title'];

                echo "<tr height='8px' scope='col'>";
                echo "<td><a href='javascript:editPlaylist($id)'>$title</a></td>";
                echo "<td><input type='button' value='x' onclick='remove($id)' /></td></tr>";
            }
        }

        echo "</table>";
    }
    else {
        echo "Error finding requested playlist.";
    }
}

编辑：这是来自第二个表的ajax请求的responseText：

<table id='myplaylists' cellspacing='0' cellpadding='2' width='225px' style='position: relative; left: -7%;'>
  <tr height='8px' scope='col'><td><b>playlist2</b>&nbsp;<a href='javascript:editPlaylist(4025199)'>add</a></td></tr>
  <tr height='8px' scope='col'><td><a href='javascript:editPlaylist(6)'>Duck Sauce</a></td><td><input type='button' value='x' onclick='remove(6)' /></td></tr>
  <tr height='8px' scope='col'><td><a href='javascript:editPlaylist(O)'>Young, Wild and Free</a></td><td><input type='button' value='x' onclick='remove(O)' /></td></tr>
  <tr height='8px' scope='col'><td><a href='javascript:editPlaylist(9)'>No Sleep</a></td><td><input type='button' value='x' onclick='remove(9)' /></td></tr>
  <tr height='8px' scope='col'><td><a href='javascript:editPlaylist(R)'>The Show Goes On</a></td><td><input type='button' value='x' onclick='remove(R)' /></td></tr>
  <tr height='8px' scope='col'><td><a href='javascript:editPlaylist(s)'>Waka Flocka Flame</a></td><td><input type='button' value='x' onclick='remove(s)' /></td></tr>
  <tr height='8px' scope='col'><td><a href='javascript:editPlaylist(U)'>Roll Up</a></td><td><input type='button' value='x' onclick='remove(U)' /></td></tr>
</table>

Answer 1

在您的表格中，您缺少打开<tr>标记：

<tr height='8px'><td><a href='javascript:getUserPlaylist(0)'>title</a></td></tr>
<td><a href='javascript:getUserPlaylist(1)'>title1</a></td></tr>
<td><a href='javascript:getUserPlaylist(2)'>title2</a></td></tr>
<td><a href='javascript:getUserPlaylist(3)'>title3</a></td></tr>

在其他3行的开头还需要额外的<tr>：

<tr height='8px'><td><a href='javascript:getUserPlaylist(0)'>title</a></td></tr>
<tr><td><a href='javascript:getUserPlaylist(1)'>title1</a></td></tr>
<tr><td><a href='javascript:getUserPlaylist(2)'>title2</a></td></tr>
<tr><td><a href='javascript:getUserPlaylist(3)'>title3</a></td></tr>

HTH。