正文
jquery添加行,jquery增加一行和删除一行
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
jquery里怎么用clone给表格增加一行
你想要的效果是，表格的每一行后面有个“添加”按钮，点击按钮后，会自动复制当前行，添加到当前行的后面，这个效果吧？
假设，我们有这样一个table表格：
table id="table"
tr
td内容1/td
td
button class="addtr"添加/button
button class="deltr"删除/button
/td
tr
/table
用jquery来实现“添加”和“删除”的功能：
下面这个是添加：
$("#table").on("click","button.addtr",function(){
var $tr=$(this).parents("tr");
$tr.append($tr.clone());
});
下面是删除：
$("#table").on("click","button.deltr",function(){
var $tr=$(this).parents("tr");
$tr.remove();
});
可以参考这里，有完整的在线实例演示：
query实例：表格里点击按钮后添加一行，新添加的行附带删除按钮
相关问答
Q1: 如何通过jquery动态给表格添加一行？
比如设置table的id为tab
var trHTML = "trtd.../td/tr"
$("#tab").append(trHTML);//在table最后面添加一行
$("#tab tr:eq(2)").after(trHTML); // 在table的第3行后面添加一行这样就可以进行动态的添加行了，至于你是通过什么事件来动态添加那就看你自己的意思了，通过button或者div之类的点击事件添加，只要把上面的两行代码放进去就ok，注意，要把var trHTML那行代码放进添加事件里面，不然不管点击多少下，都只能添加一行
$(function() {
$(":button").click(function() {
var tr = "trtdnew/td/tr";
//$("table").append(tr);
$("table tr:eq(2)").after(tr);
});
});
这是我测试用的代码，你可以运行看看
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（ 或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的模块可以分为：入口模块、底层支持模块和功能模块。其核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
Q2: jquery如何给指定的表格增加行，然后给每行插入数据，而且其中一行能有超链接的。
datatable如果想转换成JSON类型的数据，是需要处理的。直接用微软提供的JavaScriptSerializer类直接序列化，会报错。
所以这里需要贴上两个方法，专门用来转换datatable的
#region DataTable转换为JSON
/// summary
/// DataTable生成JSON
/// /summary
/// param name="dt"/param
/// returns/returns
public static string CreateJSON(DataTable dt)
{
Dictionarystring, object dit = new Dictionarystring, object();
ListDictionarystring, string list = DateTableConverter(dt);
if (list != null)
{
dit[dt.TableName] = DateTableConverter(dt);
return new JavaScriptSerializer().Serialize(dit);
}
else
{
return "";
}
}
/// summary
/// 将DataTable数据转化为字典类型
/// /summary
/// param name="dt"/param
/// returns/returns
public static ListDictionarystring, string DateTableConverter(DataTable dt)
{
ListDictionarystring, string list = new ListDictionarystring, string();
string cloName = string.Empty;
foreach (DataRow dr in dt.Rows)
{
Dictionarystring, string cloumn = new Dictionarystring, string();
foreach (DataColumn dc in dt.Columns)
{
cloName = dc.ColumnName;
cloumn.Add(cloName, dr[cloName].ToString());
}
list.Add(cloumn);
}
return list;
}
#endregion
2.调用代码如下
DataTable table = new DataTable("Table1");
DataColumn col1 = new DataColumn("ID", typeof(string));
DataColumn col2 = new DataColumn("Name", typeof(string));
table.Columns.Add(col1);
table.Columns.Add(col2);
DataRow row1 = table.NewRow();
row1["ID"] = "1";
row1["Name"] = "a";
table.Rows.Add(row1);
DataRow row2 = table.NewRow();
row2["ID"] = "2";
row2["Name"] = "b";
table.Rows.Add(row2);
string json = CreateJSON(table);
3.json结果如下
{"Table1":[{"ID":"1","Name":"a"},{"ID":"2","Name":"b"}]}
4.数组中每一个元素，都是一行数据。只要循环遍历，然后将结果添加入你已经创建好的table中就可以了。还有疑问，继续追问吧。我先去吃饭了。
Q3: jQuery如何点击保存可以在列表中增加这一行
点击保存以后，你的window窗口编辑的数据会存储在oracle库中的表（这个表应该是你table列表展示的信息用的表）中，
然后刷新页面，展示列表的sql按时间倒序排列，你就会立刻看到列表上添加了这个信息
Q4: jquery向表格中添加行 让id递增
script type="text/javascript" src="jquery.js"/script
script type="text/javascript"
function add()
{
var id = jQuery("table").find("tr").length +1 ;
var trHTML = " tr id='"+id+"'td"+id+"/tdtd1/td/tr";
jQuery("table").append(trHTML);
}
/script
body
table style="width:200px;height:200px;" border=1
tr id="1"
td1/td
td1/td
/tr
tr id="2"
td2/td
td1/td
/tr
/table
input type="button" value="增加行" onclick="add()"
/body
而且
变量不能这样定义
var len++;
这是错误的！！！
Q5: Jquery 的clone方法动态增加行，事件问题。
jquery clone方法实现动态增加行和删除行
//待克隆的div
div class="serviceList-sel-body"
div id="serviceId0" name="divName"
select id="service_select_id" name="serviceId" class="serviceSelect" style="width: 100px;" /select
input id="serviceRateId" name="serviceRate" class="serviceRate" onblur="javascript:checkServiceRate(this);"name=""maxlength="5" style="width: 60px;"/%
input id="divideRateId" name="divideRate" class="divideRate" onblur="javascript:checkDivideRate(this);" name="" maxlength="5" style="width: 60px;"/%
a href="#" id="delA" onclick="return false;" title="删除" class="delRow_Link" /a
/div
js代码//动态添加行
function addRow(service_id,service_rate,divide_rate,flag){
var idNum;//计数标识
var row1;
row1=$("#serviceId"+(idNum-1));//获得第一行 -----修改(显示) -- 设置jquery对象(待克隆的div)
//如果row1为空
if(row1.length==0){
idNum=1;
row1=$("#serviceId"+(idNum-1));
}
var newRow=row1.clone(true);//创建第一行的一个副本
// newRow.insertBefore(row1);//在第一行前插入
newRow.insertAfter(row1);//在第一行后插入
var rndID="serviceId"+idNum;
newRow.attr("id",rndID);//设置行ID 每次都不一样
//给各个 select input 加上不同的id
newRow.find("a").attr("id",rndID);
newRow.find("select.serviceSelect").attr("id","serviceSelect"+rndID);
newRow.find("input.serviceRate").attr("id","serviceRate"+rndID);
newRow.find("input.divideRate").attr("id","divideRate"+rndID);
//初始值为空
$("#serviceRate"+rndID).val("");
$("#divideRate"+rndID).val("");
//绑定事件
newRow.find("input.divideRate").blur(function(){
checkDivideRate(this);
});
newRow.find("input.serviceRate").blur(function(){
checkServiceRate(this);
});
//给新增的每一行内的删除加上删除事件
newRow.find("a").click(function(){
delRow(this);
});
// 新加行显示删除按键
newRow.find("a").html(" span style='color: blue;'删除/span");
//修改时候用到
if(flag==2){
newRow.find("select.serviceSelect").val(service_id);
newRow.find("input.serviceRate").val(service_rate);
newRow.find("input.divideRate").val(divide_rate);
}
//查看时候用到
if(flag==3){
//alert(service_id+" | "+service_rate+" | "+divide_rate);
newRow.find("select.serviceSelect_view").val(service_id);
newRow.find("input.serviceRate_view").val(service_rate);
newRow.find("input.divideRate_view").val(divide_rate);
}
//显示克隆出的新行数据
newRow.show();
idNum++;//克隆一次加一次
}
//动态删除行
function delRow(who) {
$("#" + who.id).remove();
}
