jquery添加行,jquery增加一行和删除一行

jquery里怎么用clone给表格增加一行

你想要的效果是，表格的每一行后面有个“添加”按钮，点击按钮后，会自动复制当前行，添加到当前行的后面，这个效果吧？

成都网站设计、成都网站建设介绍好的网站是理念、设计和技术的结合。创新互联拥有的网站设计理念、多方位的设计风格、经验丰富的设计团队。提供PC端+手机端网站建设，用营销思维进行网站设计、采用先进技术开源代码、注重用户体验与SEO基础，将技术与创意整合到网站之中，以契合客户的方式做到创意性的视觉化效果。

假设，我们有这样一个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实例：表格里点击按钮后添加一行，新添加的行附带删除按钮

如何通过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+等。

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中就可以了。还有疑问，继续追问吧。我先去吃饭了。

jQuery如何点击保存可以在列表中增加这一行

点击保存以后，你的window窗口编辑的数据会存储在oracle库中的表（这个表应该是你table列表展示的信息用的表）中，

然后刷新页面，展示列表的sql按时间倒序排列，你就会立刻看到列表上添加了这个信息

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++;

这是错误的！！！

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();

}