使用javascript或jquery刪除html表格行？

我在我的html表單中有一個動態表，它具有添加/刪除行的功能。每個元素的名稱在其尾部附加一個數字，指定行號（例如ID.0，ID.1等）。我寫了這個功能，試圖刪除每一行以及更新每個元素的名稱：使用javascript或jquery刪除html表格行？

function remove() { 

    var theName=getItemNames(); 
    var counter=theName.length; 
    var index=0; 

    f.preventDefault(); 
    $(this).parents("tr").remove(); 
    counter--; 

    $('input[name*="Id."]').each(function() { 

     $(this).attr("name", "Id."+index); 
     index++; 
    }); 
    $('input[name*="Date."]').each(function() { 

     $(this).attr("name", "Date."+index); 
     index++; 
    }); 
    $('input[name*="Value."]').each(function() { 

     $(this).attr("name", "Value."+index); 
     index++; 
    }); 
    $('input[name*="Required."]').each(function() { 

     $(this).attr("name", "Required."+index); 
     index++; 
    }); 

}

然而，這僅刪除刪除按鈕，而不是整行，因爲我預料到。任何人都可以看到我做錯了什麼？

來源

2013-08-26 macklin

你可以創建一個jsFiddle.net這個問題的例子嗎？ – j08691

你能發佈相關的標記嗎？ – kunalbhat

@macklin如果你解決了這個問題，請告訴我。 –

假設你的表看起來像這樣

<table> 
    <tbody> 
     <tr> 
      <td></td> 
      <td>col2</td> 
      <td><input type="button" name="x" value="x" /></td> 
     </tr> 
     <tr> 
      <td>col1</td> 
      <td>col2</td> 
      <td><input type="button" name="x" value="x" /></td> 
     </tr> 
    </tbody> 
</table>

只需使用

$("input.btn").click(function(event) { 
    $(this).parent().parent().remove(); 
});

或者

$("input.btn").click(function(event) { 
     $(this).closest("tr").remove(); 
    });

當你在做什麼打算也就是父tr然後尋找一個tr

如果你的表格是由JavaScript的可能還必須改變你的點擊

$("input.btn").on(click, function(){ 
    $(this).closest("tr").remove(); 
});

來源

2013-08-26 16:54:54

嘗試使用closest('tr').remove()

來源

2013-08-26 16:45:44 Vlad

試試這個

的Javascript

$(document).ready(function(){ 
$(".showaction").tipsy({gravity:'e'}); 

$(".deletenews") .click(function(){ 
var id_news = $(this).attr('rel'); 

var s = { 
"id_news":id_news 
} 
$.ajax({ 
url:'delete_news.php', 
type:'POST', 
data:s, 
beforeSend: function(){ 
     $(".loading[rel="+id_news+"]") .html("<img src=\"style/img/add.gif\" alt=\"Loading ....\" />"); 
     }, 
success:function(data){ 
$("tr[rel="+id_news+"]") .hide(); 
} 
}); 
return false; 
}); 




});

PHP

<table align="center" width="80%" cellpadding="0" cellspacing="0"> 
<tr> 
<td colspan="2" class="td3"> 
news 
</td> 
</tr> 
<tr> 
    <td width="70%" class="td1"> 
title 
    </td> 
    <td width="20%" class="td1">

編輯/刪除

<? 
    $select2 = $mysqli->query("SELECT * FROM news ORDER BY id DESC LIMIT 20 "); 
    $num2 = $select2->num_rows; 
    while ($rows2 = $select2->fetch_array(MYSQL_ASSOC)){ 

$id_news2  = $rows2 ['id']; 
$title_news2  = $rows2 ['title']; 
$pic_news2  = $rows2 ['pic']; 
$news_news2  = $rows2 ['news']; 
?> 
<tr rel="<? echo $id_news2; ?>"> 
    <td width="70%" class="td1"> 
<? echo $title_news2; ?> 
    </td> 
    <td width="20%" class="td1"> 
<a href="edit_news.php?id=<? echo $id_news2; ?>"><img src="style/img/edit.gif" class="showaction" title="Edit" /></a>/<a rel="<? echo $id_news2; ?>" class="deletenews" href="#"><img src="style/img/del.gif" class="showaction" title="remove" /></a> 
<span class="loading" rel="<? echo $id_news2; ?>"></span> 
    </td> 
</tr> 
<tr> 
<? 
} 
?> 
</table>

來源

2013-08-26 16:50:18

這裏的問題是呈現由你命名的功能remove不觸發功能在所有。它觸發內部功能，因此按鈕被刪除。

嘗試將該函數重命名爲removeIt或其他尚不存在的東西。然後你可以使它工作。

此外，每當您嘗試撥打removeIt時，請按照以下方式執行：onclick="removeIt(this)"，並像removeIt(elem)那樣捕獲它。現在

你可以做一個$(elem).parents('tr').remove() :)

工作實例Here。

乾杯！

來源

2013-08-26 16:55:18

使用javascript或jquery刪除html表格行？

回答

相關問題