jquery添加和删除行
发布网友
发布时间:2023-05-03 08:46
我来回答
共1个回答
热心网友
时间:2023-10-19 02:10
首先创建html文件 将 jquery 文件引入 html中
代码如下:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<style>
body{
margin:0 auto;
padding: 0;
}
tr:nth-child(odd){
background-color: aquamarine;
}
tr:nth-child(even){
background-color: #CCCCCC;
}
table{
width: 400px;
}
</style>
<script>
$(document).ready(function () {
$("#button").click(function () {
var name = $("#name").val();
var phone = $("#phone").val();
var tr = "<tr><td>" + '<input type="checkbox">' + "</td><td>" + name + "</td><td>" + phone + "</td><td>" + '<input type="button" value="删除">' + "</td></tr>";
$("#table").append(tr);
$(":button").click(function () {
$(this).parent().parent().remove();
});
});
});
</script>
</head>
<body>
姓名:<input id="name" type="text">
联系方式:<input id="phone" type="text">
<input type="submit" id="button" value="添加">
<table id="table" border="1ps">
<tr>
<td><input type="checkbox"></td>
<td>姓名</td>
<td>联系方式</td>
<td>操作</td>
</tr>
</table>
</body>
</html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
运行效果:
添加
删除
测试完成
使用jquery对表格的行进行增删。要求:用按钮对表格的行进行增删,并且增 ...
});// 点击删除,则删除对应的行 ("#del").click(function(){ var tr_id = $("table>tbody>tr:last").attr("id");("#"+tr_id).remove();});});也可以给tr赋值id号,删除的时候检索到id值,对应删除行就好了。。你下载附件试试,测试过了,ok的。。。id、class之类的对应修改好...
jquery每次点击table最后一行,然后在其后面新增一行,其他的功能么,就是...
});删除的话:你可以在每个行中添加一个button 然后 ("table tr button").click(function(){ (this).parent().parent().remove();第一个parent()代表列 第二个parent()代表行, 然后就将那一行删除了 })PS:before()是在被点击行的后面添加一行, after() 是在被点击行的前面添加一行 ...
求动态添加删除表格行JS(必须→兼容火狐和IE)
这个功能可以用jquery简单实现,其实表格就是一旦格式化的html代码。//添加行 function appendRow(){ var tr = $("#jmcyxm1").clone(true);//克隆一行 tr.find("td:last").html("");tr.insertBefore("#table2 tr:last");//把这行加到表格的倒数第二行,表格添加完毕 } //删除相对应的行...
JQUERY方法给TABLE动态增加行
1、首先输入下方的代码:<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 利用jquery给指定的table添加一行、删除一行 <script type="text/javascript"src="<%=request.getContextPath()%>/js/jquery...
用jquery怎么删除的一行
1、自行百度搜索jQuery,然后把jQuery给下载到电脑里面。2、版本下载完毕。3、新建一个HTML文件,并且把HTML文件和jQuery放在同一个文件夹里面。4、使用sublime打开HTML文件,然后用script标签来引入jQuery。如图所示,src后面接的就是jQuery所在的路径。5、再另外写一个script标签,一定是要另外写,不然待会...
JQuery中的remove()删除表格中的行求解
n=1;$(function(){ $("button").click(function(){ var btn=$(""); btn.click(function(){ $(this).closest("tr").remove(); }); $("tbody").append($(""+n+"新添加的表格").append($("
jquery中有什么可编辑表格内容的grid插件
可以自己写代码的 这个难度不是很大 非要用插件吗? 添加行 append函数 删除行 remove函数 编辑表格内容的话 这个能难一点 我给你个思想:点击td,在td中填加,当失去焦点时,把val()值添加到td里面 本人表达不太好 如果有问题可以追问
jQuery删除表格行且只保留前第一行 求解决 麻烦啦
如果trlen大于1则可以删除,反之如果只剩下一个tr了不允许删除。其中.prev()是获取上一个相邻的元素。相关的其他教程你可以去三体教程(santii.com)看一下。先引入jquery,以下为实例代码: 1 删除 2 删除...
jquery循环获取table中select ,input的值,要求一行一行的读取组织成字...
var after_tr=$(".after_tr");//选择插入行的类名 after_tr.html(this_html);//把变量this_html内容插入到创建后的空tr中 after_tr.find(".J_add").addClass("J_del").removeClass("J_add").val("删除");//把原来新增操作改成删除操作,并且把它的类名改成J_del }); //移除方法 $(".J...
如何用js删除表格一行或者多行
3、在你的JavaScript部分,使用jQuery库来操作DOM。在或标签内的标签内,编写如下代码:(document).ready(function(){ //删除表格的第二行 ('tabletr').eq(1).remove();//如果你想删除多行,可以添加更多的.eq()方法,比如删除第三行:$('tabletr').eq(2).remove();});4.保存并预览index...