append动态生成table，数据保存到数据库

添加row，然后赋值，提交时，用adapter提交

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript">
function contactlist(){
var table = document.getElementById("contactTable");
var tr = table.insertRow(table.rows.length);//添加一行
tr.align="center";
tr.bgcolor="#F3F4F3";
tr.height="23"; //添加五列
var td0 = tr.insertCell(0);
td0.width="20%";
var td1 = tr.insertCell(1);
td1.width="20%";
var td2 = tr.insertCell(2);
td2.width="8%";
var td3 = tr.insertCell(3);
td3.width="30%";
var td4 = tr.insertCell(4);
td4.width="20%";

//设置列内容
td0.innerHTML = "";
td1.innerHTML = "<input type='file' id='dataAudio' name='dataAudio'/><input type='hidden' name='dataAudios'/><input type='hidden' name='audioOldName'/>";
td2.innerHTML = "<input type='text' name='playDateTime' id='playDateTime' onkeyup='validateNumber(this);' size='5' maxlength='3' style='color: red' />";
td3.innerHTML = "<input type='text' name='content' id='content' size='35' maxlength='300'/>";
td4.innerHTML = "<input type='button' value='删除' onclick='removeRow(this.parentNode.parentNode)'/>";

}function removeRow(r)
{
    var root = r.parentNode;
    var allRows = root.getElementsByTagName('tr');
    if(allRows.length > 3){
        root.removeChild(r);
    }else{
     alert("不能删除改行！");
    }
}
</script >
</head>
<body><table id="contactTable" width="98%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#D9D9D9">
    <tr bgcolor="#F3F4F3" align="center" height="23">
       <td colspan="5" align="left"><input type="button" value="添加帧" class="button" onclick="return contactlist();"/></td>
    </tr>
    <tr bgcolor="#F3F4F3" align="center" height="23">
       <td width="20%">上传图片</td>
       <td width="20%">上传声音</td>
       <td width="8%">播放时间</td>
       <td width="30%">内    容</td>
       <td width="20%">操作</td>
    </tr>
</table></body>
</html>

本帖最后由 net_lover 于 2012-10-15 10:07:22 编辑

我会生成，问题是不会保存
function table_data(){
      fn_ajax("PurchBilling.aspx/tbl_data",null,function(data){
        if(data=="null_data"){
           table();
        }
        else{
           var tbl_json=eval(data);
             $("#content_body").empty();
           $.each(tbl_json,function(i,k){
              $("#content_body").append("<tr id='tr' onclick='win_open(\"add_open\")' num='"+k["Goods_id"]+"'><td  style='border-left:1px solid #cccccc'><input name='checkbox' class='checkbox' type='checkbox' check='false' id='"+k["Goods_id"]+"' /></td><td>"+k["Goods_id"]+"</td><td>"+k["Goods_name"]+"</td><td>"+k["Specifications"]+"</td><td>"+k["Singular"]+"</td><td>"+k["PurchBilling_number"]+"</td><td>"+k["PurchBilling_unitprice"]+"</td><td>"+k["PurchBilling_unitprice"]+"</td><td>"+k["Goods_barcode"]+"</td></tr>");
           })
        }
      },erroy)
   }

现在生成table你会了。
下一步，你得到数据会吗？

$('table input:checked').parent('td').siblings('td')
这样获取啦所有哒，算获取啦数据不

例子<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>dddd</title>
    <script src="jquery-1.8.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function AddRows() {
            //测试数据，你从哪里得到都是可以的，这里只是示例
            arr = [{ "Goods_id": "66", "Goods_name": "AAA" }, { "Goods_id": "6", "Goods_name": "BBB" }, { "Goods_id": "3", "Goods_name": "CCC"}];
            $(arr).each(function (index,k) {
                $("#content_body").append("<tr><td style='border-left:1px solid #cccccc'><input type='checkbox' id='ID" + k["Goods_id"] + "' /></td><td>" + k["Goods_id"] + "</td><td><input id='Name" + k["Goods_id"] + "'/></td><td>" + k["Goods_name"] + "</td></tr>");
            });
        }        function GetData() {
            txtdata = [];
            id = [];
            chkbox = [];
            $("#content_body tr").each(function (index, k) {
                chk = $(k).find("input[type='checkbox']");
                rowId = chk.attr("id").substr(2);
                id.push(rowId);
                if (chk.attr("checked")) {
                    chkbox.push('"checkbox' + rowId + '":"' + rowId + '"');
                 }
                txtdata.push('"name' + rowId + '":"' + $("#Name" + rowId).val() + '"');
            });
            data = '{"id":"' + id + '",' + txtdata + ',' + chkbox + '}';
            $.ajax({ url: 'getData.aspx',
                type: 'post',
                data: $.parseJSON(data),
                success: function (result) { alert(result); }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table id="content_body">
    </table>
    <input type="button" value="生成表格" onclick="AddRows()" />
    <input type="button" value="得到数据" onclick="GetData()" />
    </form>
</body>
</html>
后台接收输入的内容
<%@ Page Language="C#" %><script runat="server">    protected void Page_Load(object sender, EventArgs e)
    {
        String[] id = Request.Form["id"].Split(',');
        Response.Write("你输入的内容：\r\n");
        for (int i = 0; i < id.Length; i++)
        {
            Response.Write("得到选中的Id=："+ Request.Form["checkbox" + id[i]] +"\r\n");
            Response.Write("得到输入的内容：" + Request.Form["name" + id[i]] + "\r\n");
        }
    }
</script>需要注意的是格式。
你可以先拷贝粘贴测试

“/WebSite1”应用程序中的服务器错误。
未将对象引用设置到对象的实例。
说明: 执行当前 Web 请求期间，出现未处理的异常。请检查堆栈跟踪信息，以了解有关该错误以及代码中导致错误的出处的详细信息。异常详细信息: System.NullReferenceException: 未将对象引用设置到对象的实例。源错误:
行 7:      protected void Page_Load(object sender, EventArgs e)
行 8:      {
行 9:          string[] id = Request.Form["id"].Split(',');
行 10:         Response.Write("你输入的内容：\r\n");
行 11:         for (int i = 0; i < id.Length; i++)

test.aspx
jquery-1.8.0.min.js
getdata.aspx
放在一个目录下，http访问，就可以了没有不行的，代码都是测试过的。asp.net2.0,4.0都是可以的不行的代码我会给你贴吗？？

不要激动啊，是我还木有搞清楚，贴出来是想问问你我怎么错啦，不是说你代码错啦哈，sorry

调试易

append动态生成table，数据保存到数据库

解决方案 »