求一JS方法

Lakers_24号程序员 2011-07-04 11:24:53
现有一数组如下：


    var ary1= new Array();

    ary1[0]= "小牛,小雪";

    var1[1] = "A物品,B物品,C物品";

    var1[2] = "Price，Amount";

请根据如上数组实现给单元格取唯一名：最终单元格如下图所示！



另外告知一点，请不要认为数组只是三个元素，Table可以N层，不止三层！
...全文
261 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
lsw645645645 2011-07-05
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 sammy_luo 的回复:]
$.each 这方法是遍历么？
[/Quote]
是的。
Lakers_24号程序员 2011-07-05
  • 打赏
  • 举报
 回复
$.each 这方法是遍历么？
Lakers_24号程序员 2011-07-04
  • 打赏
  • 举报
 回复
2楼的你那样布局出来也是错的，小牛与小雪应该是同行的，而且你那个也不能实现N层，不要写死三层
Lakers_24号程序员 2011-07-04
  • 打赏
  • 举报
 回复
我不是要的把这玩意布局出来，我是想要每个单元格唯的ID
挨踢直男 2011-07-04
  • 打赏
  • 举报
 回复 
<!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=utf-8" />

<title></title>

<style type="text/css">

table{ background:#000; float:left}

table td{ background:#fff; text-align:center}

</style>

</head>

<body>

<div id="div"></div>

<script type="text/javascript">



   var ary1= new Array(3);

    ary1[0]= "小牛,小雪";

    ary1[1] = "A物品,B物品,C物品";

    ary1[2] = "Price,Amount";

    ary1[0]=ary1[0].split(",");

    ary1[1]=ary1[1].split(",");

    ary1[2]=ary1[2].split(",");

    

    for(var i = 0 ; i < ary1[0].length ; i ++)

    {

        var str = "<table><tr><td colspan='6'>"+ary1[0][i]+"</td></tr>"

        str+="<tr>";

        for(var j = 0 ; j < ary1[1].length ; j ++)

        {

           str+="<td colspan='2'>"+ary1[1][j]+"</td>";

        }

        str+="</tr><tr>"

        

        for(var f = 0 ;f <ary1[1].length ; f ++)

        {

            for(var k = 0 ; k < ary1[2].length ; k ++)

            {

                str+="<td>"+ary1[2][k]+"</td>"

            }

        }

        str+="</tr></table>"

        document.getElementById("div").innerHTML= document.getElementById("div").innerHTML+str;

    }

    

</script>



</body>

</html>
Lakers_24号程序员 2011-07-04
  • 打赏
  • 举报
 回复
楼上这这位兄弟，我顶礼膜拜，呵呵，等了一天终于见着了曙光！！
lsw645645645 2011-07-04
  • 打赏
  • 举报
 回复
这种？


<!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>

    <title></title>

    <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $.fn.GenerateTable = function (config) {//config配置 { binaryArray:二维数组 }              

                //层次

                var trLayer = config.binaryArray.length;



                //最后输出的html

                var html = [];

                //辅助函数stringBuilder

                var stringBuilder = function (str) {

                    html.push(str);

                }

                //辅助函数string format

                String.Format = function () {

                    var param = [];

                    for (var i = 0, length = arguments.length; i < length; i++) {

                        param.push(arguments[i]);

                    }

                    var format = param[0];

                    param.shift();

                    return format.replace(/\{(\d+)}/g, function (m, i) {

                        return param[i];

                    });

                }



                //得到colspan

                var getColspan = function () {

                    var colspan = [];



                    var arrTop = 1;

                    $.each(config.binaryArray, function (i, n) {

                        colspan.push(config.binaryArray[trLayer - i - 1].length * arrTop);

                        arrTop = config.binaryArray[trLayer - i - 1].length * arrTop;

                    });

                    return colspan;

                }

                //装饰Table 

                var column = [];

                column.push(1);

                $.each(config.binaryArray, function (i, n) {

                    var lastColumn = column.pop();

                    var temp_n1 = [];

                    var temp_n2 = [];

              

                    var innerTr = $.each(n, function (j, m) {

                        temp_n1[j] = String.Format('<td colspan="{0}" id="tr_{2}_{3}">{1} <br />colspan={0},id="tr_{2}_{3}"</td>', getColspan()[trLayer - i - 1] / n.length, m, i, j);

                    });



                    var alltd = [];

                    alltd = $.merge(alltd, temp_n1);

                    for (var k = 1; k < lastColumn; k++) {

                        $.each(n, function (j, m) {

                            temp_n2[j] = String.Format('<td colspan="{0}" id="tr_{2}_{3}">{1} <br />colspan={0},id="tr_{2}_{3}"</td>', getColspan()[trLayer - i - 1] / n.length, m, i+k, j);

                        });

                        alltd = $.merge(alltd, temp_n2);

                    }





                    var tr = String.Format('<tr>{0}</tr>', alltd.join(""));

                    column.push(n.length * lastColumn);

                    stringBuilder(tr);

                });

                $(this).html(html.join(""));



            }



            //调用

            $('#tb').GenerateTable({

                binaryArray: [['小牛', '小雪'], ['A', 'B', 'C'], ['Price', 'Amount']]

            });





        });

    </script>





</head>

<body>



<table id="tb" style="border:1px solid #ccc; text-align:center;" border="1">

</table>



</body>

</html>
Lakers_24号程序员 2011-07-04
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 lsw645645645 的回复:]
是这种么


HTML code



<!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……
[/Quote]

不是要这种，我的主要目的是想把各单元格取个唯一的名字，以及哪个单元格cospan多少，都记录下来，最后我要根据记录下来的这些ID，去加载数据到这table里的！因为这只是一个title部分，table下面还有实质数据部分，是到数据源里去找数据来匹配。最后我给各单元格赋值的时候直接根据生成的这些ID去赋值相应 的数据值
lsw645645645 2011-07-04
  • 打赏
  • 举报
 回复
是这种么





<!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>

    <title></title>

    <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $.fn.GenerateTable = function (config) {//config配置 { binaryArray:二维数组 }              

                //层次

                var trLayer = config.binaryArray.length;



                //最后输出的html

                var html = [];

                //辅助函数stringBuilder

                var stringBuilder = function (str) {

                    html.push(str);

                }

                //辅助函数string format

                String.Format = function () {

                    var param = [];

                    for (var i = 0, length = arguments.length; i < length; i++) {

                        param.push(arguments[i]);

                    }

                    var format = param[0];

                    param.shift();

                    return format.replace(/\{(\d+)}/g, function (m, i) {

                        return param[i];

                    });

                }



                //得到colspan

                var getColspan = function () {

                    var colspan = [];



                    var arrTop = 1;

                    $.each(config.binaryArray, function (i, n) {

                        colspan.push(config.binaryArray[trLayer - i - 1].length * arrTop);

                        arrTop = config.binaryArray[trLayer-i-1].length* arrTop;

                    });                

                    return colspan;

                }

                //装饰Table 

                var column = [];

                column.push(1);

                $.each(config.binaryArray, function (i, n) {

                    var lastColumn = column.pop();                

                    var innerTr = $.each(n, function (j, m) {

                        n[j] = String.Format('<td colspan="{0}">{1}</td>', getColspan()[trLayer - i - 1] / n.length, m);

                    });

                    var alltd = [];

                    for (var k = 0; k < lastColumn; k++) {

                        alltd = $.merge(alltd, innerTr);

                    }

                    var tr = String.Format('<tr>{0}</tr>', alltd.join(""));

                    column.push(n.length * lastColumn);

                    stringBuilder(tr);

                });

                $(this).html(html.join(""));

              

            }



            //调用

            $('#tb').GenerateTable({

                binaryArray: [['小牛', '小雪', 'ss'], ['A', 'B', 'C','d'], ['Price', 'Amount'],['1','2']]

            });





        });

    </script>





</head>

<body>



<table id="tb" style="border:1px solid #ccc; text-align:center;" border="1">

</table>



</body>

</html>
KK3K2005 2011-07-04
  • 打赏
  • 举报
 回复
根据事件驱动不需要设置ID
因为 在生td的同时设置了事件

根据mvc 不需要设置ID
因为数据的修改读取 直接从m层中获取
请根据 m层的变化来修改 v层
m层即你的 var ary1
Lakers_24号程序员 2011-07-04
  • 打赏
  • 举报
 回复
咋滴没人回答了
10. JS编程之求数组元素的二次方
这篇博客探讨了如何在JavaScript中为数组中的每个元素求二次方，提供了两种方法：一是通过函数调用求平方并创建新数组；二是利用for...of循环遍历并推入新数组。强调了不要直接修改原始数组。
js 求斐波那契数列的两种方式
本文介绍了JavaScript中求斐波那契数列的两种常见方法：一是使用循环结构，二是运用递归函数。通过这两种方式，可以有效地计算出斐波那契数列的任意项。
javascript判断日期奇偶_js判断数字是奇数还是偶数的2种方法实现
本文主要讲解通过JavaScript实现奇偶数判断的方法。介绍了两种方式，一是使用求余%，包括if...else和三元运算形式；二是使用按位与运算&，同样有if...else和三元运算形式，并对两种方法的原理进行了详细分析。
js练习（八）统计数组 arr 中值等于 item 的元素出现的次数、为数组 arr 中的每个元素求二次方
本文介绍了两种实用的数组操作方法：一是统计数组中特定元素的出现次数；二是为数组中的每个元素求二次方，生成新的数组。这些技巧对于JavaScript开发者来说非常实用。
JS 改变函数内this指向apply方法 及常见使用场景
博客介绍了JavaScript中apply方法的使用，其第二个参数要求为数组，可利用这一特性来求数组中的最大值、最小值等，属于前端开发领域的知识。
JavaScript

87,989

社区成员

224,684

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章