JS如何根据选择的项创建表格

有木有人会啊，有没有demo可以看一下的，谢谢各位了

貌似是js+ajax实现的，只是，这表格，，，写起来有点复杂；脑袋里装不了太多东西

如果只是实现创建表格来说~基本的dom操作就可以，无需ajax。
思路也比较简单：给选框添加(click)事件监听函数，函数主要职责如下：
判断当前是否已经选中：
（1）如果选中先退到未选状态==>然后把所有选框当前的状态和值与表格进行对比，匹配的在表格中留着，不匹配的从表格中去掉。
（2）如果是未选中先变成选中==>然后先检查是否有表格存在，没有就看看当前所有的选框状态是否能满足生成表格的条件(满足就创建)，如果之前有创建的表格存在就重复第一步中的第二个步骤。

简单来说的话，
1. 颜色区域和尺码区域制定规则ID做区分
2. 选中颜色区域或选中尺码区域都要互相检查，如果之前已经选择了颜色或选择了尺码，就在表格里生成对应的行
3. 已经生成表格的数据需要内存保存。当然如果取消选择后，相应的删除表格里对应的行，就不用考虑了
4. 最重要的是颜色和尺码的对应关系，N-N还是N-1，这个与表格的生成内容有紧密关系

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
    body,html{font-size:12px;padding:2px 0px 0px 3px;margin:0px;background-color:#FFF;word-break:break-all;word-wrap:break-word;height: auto;line-height:20px;width:99%;overflow:scoll; }

    table,tbody,tr{background-color:#000; width:100%;}
    td {font-family: Arial, Helvetica, sans-serif;border:0px; background-color:White; padding-left:3px;height:20px}
    thead td,tfoot td{ text-align:center; font-weight:bold;height:25px;line-height:25px;}
</style>
</head><body>
<div style="width:600px;height:50px;margin:20px 50px 10px" id="color">颜色：
<input type='checkbox' value='红色'>红色 <input type='checkbox' value='蓝色'>蓝色 <input type='checkbox' value='绿色'>绿色  <input type='checkbox' value='黄色'>黄色 </div>
<div style="width:600px;height:50px;margin:10px 50px " id="size">尺码：
<input type='checkbox' value='33'>33 <input type='checkbox' value='34'>34 <input type='checkbox' value='35'>35  <input type='checkbox' value='36'>36</div>
<div style="width:600px;height:auto;margin:10px 50px" id='tableDiv'></div>
</body>
<script type="text/javascript">(function(){
var colorDiv = document.getElementById("color");
var sizeDiv = document.getElementById("size");
var tableDiv = document.getElementById("tableDiv");
colorDiv.onclick = sizeDiv.onclick = function(e){
e= e.srcElement||e.target;
if(e.tagName=="INPUT" && e.type=="checkbox"){
createTable();
}
};
function createTable()
{
var colors=colorDiv.getElementsByTagName("input");
var sizes=sizeDiv.getElementsByTagName("input");
var colorArr=getChecked(colors);
var sizeArr=getChecked(sizes);
if(colorArr.length==0 || sizeArr.length==0){
tableDiv.innerHTML="";
return;
}
var arr=["<table border=0 cellspacing=1><tr><td>颜色</td><td>尺码</td><td>价格</td><td>数量</td><td>编号</td><td>操作</td></tr>"];
for(var i=0;i<colorArr.length;i++)
{
arr.push("<tr><td rowspan="+sizeArr.length+">"+colorArr[i].value+"</td>");
for(var j=0;j<sizeArr.length;j++)
{
if(j>0){
arr.push("<tr>");
}
arr.push("<td>"+sizeArr[j].value+"</td>");
arr.push("<td><input></input></td><td><input></input></td><td><input></input></td><td>操作</td></tr>");
}
}
arr.push("</table>");
tableDiv.innerHTML=arr.join("");
}function getChecked(inputs){
var arr=[];
for(var i=0;i<inputs.length;i++){
if(inputs[i].checked)
{
arr.push(inputs[i]);
}} return arr;
}
})();
</script></html>

我把我的东西也贴出来吧，看不看的懂就不管了，写的很乱，不过问题解决了
<script src="../Scripts/jquery-1.6.3.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        function Getdata(productId, sku) {//得到请求数据方法
            //alert(sku);
            var str = "";
            $.ajax({
                type: "GET",
                url: "../Ajax/GetSkus.aspx?productId=" + productId + "&sku=" + sku,
                contentType: "application/text; charset=utf-8",
                dataType: "text",
                cache: false,
                async: false,
                success: function (returnMsg) {
                    if (returnMsg.substring(0, 6) != "nodata") {
                        returnMsg = returnMsg.split('|');
                        //alert(returnMsg.length);
                        str += returnMsg[0] + "|" + returnMsg[1];
                    }
                    else {
                        str = "";
                    }
                    //alert(str);
                },
                error: function (err) {
                    alert("ajax错误码:" + err.status);
                }
            });
            // alert(str);
            return str;
        }        var hfRptSkusItems = parseInt($("#hfRptSkusItems").val());
        var hfLowestPrice = parseFloat($("#hfLowestPrice").val()).toFixed(2); //保留两位小数
        function SkuGroup(obj) {
            var arr = new Array();
            var label = new Array();
            var id = obj.id.toString().substring(0, 36);
            for (var i = 0; i < hfRptSkusItems; i++) {
                var newid = id + i;
                // alert(newid);
                var table = document.getElementById(newid);
                var items = table.getElementsByTagName("input");
                arr[i] = new Array();
                label[i] = items[0].value.split('|')[3];
                var k = 0;
                for (var j = 1; j <= items.length; j++) {
                    if (items[j - 1].checked == true) {
                        arr[i][k] = items[j - 1].value;
                        //alert(arr[i][k]);
                        k++;
                    }
                }
            }
            //alert(arr.length);
            if (arr.length == hfRptSkusItems) {
                CreateTable3(arr, label);
            }
        }        function CreateTable1(str) {
            //alert(str);
            var arr1 = new Array();
            var label = new Array();
            var items = str.split('*');
            for (var m = 1; m < items.length; m++) {
                arr1[m - 1] = new Array();
                // alert(items[1]);
                var skus = items[m].split(',');
                label[m - 1] = skus[0].split('|')[3];
                //  alert(skus.length);
                for (var j = 0; j < skus.length - 1; j++) {
                    arr1[m - 1][j] = skus[j];
                }
            }
            if (arr1.length == items.length - 1) {
                // alert(arr1[0].length);
                // alert(label);
                CreateTable3(arr1, label);
            }
        }        function GetTrClass(num) {
            var trClass = "";
            if (num == 0 || num % 2 == 0) {
                trClass = "tbrow"
            }
            else {
                trClass = "tbrowalter"
            }
            return trClass;
        }        function GetTextName(skuItem) {
            var name = "";
            for (var i = skuItem.length - 1; i > -1; i--) {
                name = name + skuItem[i].split('|')[1] + skuItem[i].split('|')[2];
            }
            return name;
        }        function GetSkus(skuItem) {
            var name = "";
            for (var i = skuItem.length - 1; i > -1; i--) {
                name = name + skuItem[i].split('|')[3] + ":" + skuItem[i].split('|')[0] + ";";
            }
            return name;
        }        function CreateTable3(arr, label) {
            // alert(arr);
            function combine(arr) {
                var r = [];
                (function f(t, a, n) {
                    if (n == 0) return r.push(t);
                    for (var i = 0; i < a[n - 1].length; i++) {
                        f(t.concat(a[n - 1][i]), a, n - 1); //递归
                    }
                })([], arr, arr.length);
                return r;
            }            var res = combine(arr);            if (res == "") {
                // alert(1);
                document.getElementById('divSkuGroups').innerHTML = "";
            }
            // alert(res);
            // alert(arr.length - 1);
            //合并单元格
            var row = new Array();
            var rowspan = res.length;
            for (var n = arr.length - 1; n > -1; n--) {
                row[n] = parseInt(rowspan / arr[n].length);
                rowspan = row[n]; //循环
            }
            row.reverse();            var str = "";
            var len = res[0].length;
            var trClass = "";
            for (var i = 0; i < res.length; i++) {
                var tmp = "";
                for (var j = 0; j < len; j++) {
                    if (i % row[j] == 0 && row[j] > 1) {
                        tmp += "<td class=tbpost rowspan='" + row[j] + "'>" + res[i][j].split('|')[0] + "</td>";
                    } else if (row[j] == 1) {
                        tmp += "<td class=tbpost>" + res[i][j].split('|')[0] + "</td>";
                    }
                }
                trClass = GetTrClass(i);
                var inputName = GetTextName(res[i]);
                var productId = $("#hfProductId").val();
                var sku = GetSkus(res[i]);
                var priceAndQuantity = Getdata(productId, sku);
                var skuItemQuantity = 0;
                //alert(priceAndQuantity);
                if (priceAndQuantity.length > 0) {
                    hfLowestPrice = parseFloat(priceAndQuantity.split('|')[0]).toFixed(2);
                    skuItemQuantity = priceAndQuantity.split('|')[1];
                }
                //alert(priceAndQuantity);
                //alert(1);
                str += "<tr class='" + trClass + "'>" + tmp + "<td class=tbpost>" + "<input type=text value='" + hfLowestPrice + "'  name='Price_" + inputName + "' style=width:80px; />" + "</td>" + "<td class=tbpost>" + "<input value='" + skuItemQuantity + "' type=text name='Quantity_" + inputName + "' style=width:50px; />" + "</td>" + "</tr>";
            }            //thead
            var th = "";
            for (var k = len - 1; k > -1; k--) {
                th += "<th class=tbheader >" + label[k] + "</th>";
            }
            th = "<thead>" + th + "<th class=tbheader>价格</th>" + "<th class=tbheader>数量</th>" + "</thead>";
            str = "<table border=0 cellpadding=0 cellspacing=0 class=table>" + th + str + "</table>";
            document.getElementById('divSkuGroups').innerHTML = str;
        }

    </script>保存数据后，点编辑 protected void MyRegisterStartupScript()
        {
            long productId = long.Parse(hfProductId.Value);
            long categoryId = long.Parse(hfCategoryId.Value);
            using (ItemsEntities db = new ItemsEntities())
            {
                //销售属性
                List<List<string>> strLists = new List<List<string>>();
                foreach (RepeaterItem item in rptSkus.Items)
                {
                    if (item.ItemType == ListItemType.AlternatingItem || item.ItemType == ListItemType.Item)
                    {
                        HiddenField hfAttributeId = (HiddenField)item.FindControl("hfAttributeId");
                        CheckBoxList cblSkus = (CheckBoxList)item.FindControl("cblSkus");
                        long attributeId = long.Parse(hfAttributeId.Value);
                        Category2Attributes attribute = db.Category2Attributes.FirstOrDefault(o => o.AttributeId == attributeId && o.CategoryId == categoryId);                        List<string> strs = ItemUtility.Instance.GetChecked(hfAttributeId.Value, cblSkus);                        strLists.Add(strs);
                    }
                }
                string arr = "";
                for (int i = 0; i < strLists.Count; i++)
                {
                    arr += "*";
                    for (int j = 0; j < strLists[i].Count; j++)
                    {
                        arr += strLists[i][j] + ",";
                    }
                }                if (!string.IsNullOrEmpty(arr))
                {
                    StringBuilder sb = new StringBuilder();
                    sb.Append("<script type=\"text/javascript\" charset=\"UTF-8\" >");
                    sb.Append("CreateTable1('" + arr + "');");//0，初始className
                    sb.Append("</script>");                    this.ClientScript.RegisterStartupScript(typeof(string), Guid.NewGuid().ToString(), sb.ToString());
                }
            }
        }

后台获取数据是根据input type=text 文本框的name
string price = Request.Form[inputPridceName];
string quanlity = Request.Form[inputQuanlityName];获取

调试易

JS如何根据选择的项创建表格

解决方案 »