jquery删除<tr>

发布网友 发布时间:2022-04-22 06:24

我来回答

4个回答

热心网友 时间:2022-04-23 12:34

jquery删除指定的tr可以参考以下的方法:

1、在button 的onclick事件中直接将this传过去:removeColunm(this);

2、在事件中,this.parent():代表获取到td ,this.parent().parent():代表获取到tr。

function removeColumn(thisbutton){

$(thisbutton).parent().parent().remove();

}

扩展资料:

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在jQuery 语法章节中已经提到过。

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTML 元素时执行。

在下面的实例中,当点击事件在某个 <p> 元素上触发时,隐藏当前的 <p> 元素:

$("p").click(function(){

$(this).hide();});

dblclick()

当双击元素时,会发生 dblclick 事件。

参考资料来源:百度百科-jQuery

热心网友 时间:2022-04-23 13:52

可以直接通过remove的方法进行删除,通过append方法进行添加。

举例:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script>
$(function(){   
    $("#getAtr").click(function(){           
        $str='';
        $str+="<tr align='center'>";
        $str+="<td><input type='text' name='advTitle[]'/></td>";
        $str+="<td><input type='file' name='img[]' /></td>";
        $str+="<td><input type='text' name='advContent[]' /></td>";
        $str+="<td><input type='text' name='advSource[]' /></td>";
        $str+="<td><input type='text' name='advAuthor[]' /></td>";
        $str+="<td><input type='text' name='advPosition[]' /></td>";
        $str+="<td onClick='getDel(this)'><a href='#'>删除追加</a></td>";     
        $str+="</tr>";
        $("#addTr").append($str);    
    });
});
 
function getDel(k){
    $(k).parent().remove();     
}
</script>
 
--------------------------------------------------------------------------------
html部分
<table align="center" border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr align="center">
   <td>广告名称</td>
   <td>广告图片</td>
   <td>广告内容</td>
   <td>广告来源</td>
   <td>广告作者</td>
   <td>广告描述</td>
   <td align="center"><a href="#" id="getAtr">追加内容</a></td>
 </tr>
<tbody id="addTr">
 <tr align="center">
   <td><input type="text" name="advTitle[]"/></td>
   <td><input type="file" name="img[]" /></td>
   <td><input type="text" name="advContent[]" /></td>
   <td><input type="text" name="advSource[]" /></td>
   <td><input type="text" name="advAuthor[]" /></td>
   <td><input type="text" name="advPosition[]" /></td>
   <td></td>
  </tr>
</tbody>
 <tr align="center">
  <td colspan="5"><input type="submit" value="全部添加" /></td>
 </tr>
</table>

热心网友 时间:2022-04-23 15:27

jQ删除<tr>,代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>

<style type="text/css">

body,ul,li{margin:0; padding:0; font-size:12px; line-height:20px; list-style:none; font-family:Verdana, Geneva, sans-serif}
table{width:600px; border-collapse:collapse}
th,td{border:1px #d0d0d0 solid; padding:5px 10px; font-size:14px; font-weight:lighter}
.btn01{padding:5px 20px; background-color:#09c; text-align:center; color:#fff; font-size:13px; cursor:pointer; border:0}
.btn01:hover{background-color:#f63}
</style>
    
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".btn01").click(function(){
$("tbody tr:last").remove()
});
});
</script>
</head>

<body>

<table>
    <thead>
        <tr>
            <th>ID</th>
                <th>Name</th>
                <th>Something</th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td>01</td>
                <td>Jcllince01</td>
                <td>Something</td>
            </tr>
            <tr>
            <td>02</td>
                <td>Jcllince02</td>
                <td>Something</td>
            </tr>
            <tr>
            <td>03</td>
                <td>Jcllince03</td>
                <td>Something</td>
            </tr>
            <tr>
            <td colspan="3"><input class="btn01" type="button" value="删除我" /></th>
            </tr>
        </tbody>
    </table>

</body>
</html>

希望能帮到你

追问这个是默认直接删除最后一行是吧,有没有方法能实现删除中间行,然后重置控件的ID呢

追答请问你具体要实现什么效果?

热心网友 时间:2022-04-23 17:18

$(this).closest("tr").remove();
$(this)表示你当前点击的这个button
希望能帮助到你追问这个删除功能我是实现了的,现在是想看看可以用什么办法在删除了这一行之后,将剩余行的编号重新整理下

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com