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实例：表格里点击按钮后添加一行，新添加的行附带删除按钮

serialize()、serializeArray()方法都是jquery用户序列化表单的，用于ajax提交的data值的序列化

在chrome的控制台我们很清楚的看到了serializeArray()返回的是json数组，数组的每个对象都是有json字符串构成，我们可以看到，每个json字符串包括两个键值对，每个键值对都是有name,value组成，其实serializeArray()它把表单里的每个需要提交的dom的name的值赋给json字符串的name,dom的value的值赋给json字符串的value.

那么我们只需这要添加额外的内容：

var dataParam = $("#updateChannelForm").serializeArray()

例如我想添加sex="男"

dataParam.push({"name":"sex","value":"男"}) 就可以了

我们看到serialize()方法把表单里的内容序列化成了字符串

"id=58&channelType=2&subTitle=591teststetets&extAttrValueId=599"

那么我们只需这要添加额外的内容：

var dataParam = $("#updateChannelForm").serialize()

例如我想添加sex="男"

dataParam =dataParam +"&"+"sex=男"

datatable如果想转换成JSON类型的数据，是需要处理的。直接用微软提供的JavaScriptSerializer类直接序列化，会报错。

所以这里需要贴上两个方法，专门用来转换datatable的

#region DataTable转换为JSON

    /// <summary>

    /// DataTable生成JSON

    /// </summary>

    /// <param name="dt"></param>

    /// <returns></returns>

    public static string CreateJSON(DataTable dt)

    {

        Dictionary<string, object> dit = new Dictionary<string, object>()

        List<Dictionary<string, 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 List<Dictionary<string, string>> DateTableConverter(DataTable dt)

    {

        List<Dictionary<string, string>> list = new List<Dictionary<string, string>>()

        string cloName = string.Empty

        foreach (DataRow dr in dt.Rows)

        {

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

---