如何用JQUERY来删除TABLE当中的最后一行数据?

如何用JQUERY来删除TABLE当中的最后一行数据?,第1张

可以使用jquery的 :last 选择器来选取最后一个元素,

如果只是删除数据

$("table tr:last td").each(function() {

    $(this).text("")  // 将单元格td的内容设为空,以达到清除数据之目的

})

如果要删除最后一行

$("table tr:last").remove()

示例代码如下

创建Html元素

<div class="box">

<span>点击按钮删除最后一行或清空最后一行数据:</span><br>

<div class="content">

<table>

<tr><td>1</td><td>2</td><td>3</td></tr>

<tr><td>4</td><td>5</td><td>6</td></tr>

<tr><td>7</td><td>8</td><td>9</td></tr>

</table>

</div>

<input type="button" class="btn1" value="清空最后一行数据">

<input type="button" class="btn2" value="删除最后一行">

</div>

设置css样式

div.box{width:300pxpadding:20pxmargin:20pxborder:4px dashed #ccc}

div.box span{color:#999font-style:italic}

div.content{width:250pxmargin:10px 0padding:20pxborder:2px solid #ff6666}

table{border-collapse:collapse}

td{width:30pxheight:30pxline-height:30px text-align:centerborder:1px solid green}

input[type='button']{height:30pxmargin:10pxpadding:5px 10px}

编写jquery代码

$(function(){

// 只是清除最后一样的数据

$("input:button.btn1").click(function() {

$("table tr:last td").each(function() {

$(this).text("")

})

})

// 删除最后一行

$("input:button.btn2").click(function() {

$("table tr:last").remove()

})

})

观察效果

点击清除数据按钮

点击删除行按钮

使用Jquery插件,轻松实现。

1.应用Jquery插件

2.<script type="text/javascript">

$(function(){

if(判断为真)

{

$("table tr:last").hide()

}

})

</script>


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/sjk/9622282.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-30
下一篇2023-04-30

发表评论

登录后才能评论

评论列表(0条)

    保存