使用parent.removeChild(child)删除表行

时间:2015-08-29 08:12:22

标签: javascript function delete-row removechild

我有一个表,当用户打开页面并且用户添加了行时,该表开始为空白。用户搜索数据库,结果将回显到搜索结果"表格如下。

while ($dbsearch = mysqli_fetch_assoc($run_query))
         {
            $dbu = $dbsearch['Username'];
            $id = $dbsearch['PlayerID'];
            $func = "add(" . $id . ", Brad Henry )";
         array_push ($_SESSION['players'],$dbsearch['PlayerID']);
         echo "<tr><td>".$id ."</td><td>".$dbu."</td><td><input type=\"submit\" id=\"PlayerAdded".$id."\" value=\"Add\" onclick=\"add('".$id."','".$dbu."');\"></input></td></tr>";
         }

这非常有效。当用户点击添加时,以下功能会将搜索结果添加到&#34;今日事件&#34;表:

function add(id,name){
    var t = ("</td><td>");
    var str = ("<tr id='Players" + id + "'><td>")
    var ctr = ("</td></tr>")
    var place = ("<select name='place'><option value='17'>17th</option><option value='16'>16th</option><option value='15'>15th</option><option value='14'>14th</option><option value='13'>13th</option><option value='12'>12th</option><option value='11'>11th</option><option value='10'>10th</option><option value='9'>9th</option><option value='8'>8th</option><option value='7'>7th</option><option value='6'>6th</option><option value='5'>5th</option><option value='4'>4th</option><option value='3'>3rd</option><option value='2'>2nd</option><option value='1'>1st</option></select>")
    var points = ("<input name='points' placeholder='50'></input>");
    var cash = ("$<input name='cash' placeholder='0'></input>");
    var ticket = ("<select name='ticket'><option value='No'>No</option><option value='Yes'>Yes</option>");
    var del = ("<input type='submit' value='Delete' onclick='remove(" + id + ")'> </input>")

   $('#PlayerAdded').before(str+ id + t + name + t + place + t + points + t + cash + t + ticket + t + del + ctr);
}

我的问题是,单击“删除”按钮(请参阅var del)时没有任何反应。 var del调用&#34;删除&#34;粘贴在下面的功能。我不确定错误在哪里,我一直在网上寻找答案,但无济于事。我想知道我是否错误地声明var child,因为它查找带有字符串和int的elementID ...

function remove(RowID) {
    var parent = document.getElementById("resultTable");
    var child = document.getElementById("Players" + RowID);
    parent.removeChild(child);
}

1 个答案:

答案 0 :(得分:0)

您的代码会生成无效的HTML标记。删除标记为**的项目并添加标记为++的项目。我已经使用值10作为代码中的id。

<table>
      <tr id='Players10'>
   <td>10</td>
   <td></td>
   <td><select name='place'>
         <option value='17'>17th</option>
         <option value='16'>16th</option>
         <option value='15'>15th</option>
         <option value='14'>14th</option>
         <option value='13'>13th</option>
         <option value='12'>12th</option>
         <option value='11'>11th</option>
         <option value='10'>10th</option>
         <option value='9'>9th</option>
         <option value='8'>8th</option>
         <option value='7'>7th</option>
         <option value='6'>6th</option>
         <option value='5'>5th</option>
         <option value='4'>4th</option>
         <option value='3'>3rd</option>
         <option value='2'>2nd</option>
         <option value='1'>1st</option>
      </select></td>
   <td><input name='points' placeholder='50'>
      **</input>**</td>
   <td>$
      <input name='cash' placeholder='0'>
      **</input>**</td>
      <td>
      <select name='ticket'>
   <option value='No'>No</option>
   <option value='Yes'>Yes</option>
++</select>++
      </td>
      <td>
      <input type='submit' value='Delete' onclick='remove(10)'>
      **</input>**
      </td>
      </tr>
</table>

然后再次测试您的代码。