求用js编写html中的多张表的列组合

就是想用js写出多张表中怎么循环得到第一列值的全部组合
例如这边有三张表，如下图组合
这边一共的组合数为：表一行数*表二行数*表三行数
现在就是想知道怎么实现N张表，他们的组合情况的字符串，
求各位大虾们的帮助jshtml组合

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

化繁为简吧
<!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" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        //有如下4个表
        var tList = [, ];
        tList[0] = [1, 2, 3];
        tList[1] = [4, 5, 6];
        tList[2] = [7, 8, 9];
        tList[3] = [10, 11, 12];        //统计前3个表
        var tableCalCount = 3;
        //统计每个表的第1列
        var colId = 0;
        //统计字符串
        var str = "";        //遍历二维数组
        for (var i = 0; i < tableCalCount; i++) {
            str += tList[i][colId] + "\n";
        }        alert(str);
    });
</script>
</head>
<body>
<div>
</div>
</body>
</html>
你再扩展一下就可以得到了。比如：tList[0]里的每一个元素也是数组，这样就可以了。
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$("#abv").click(function(){
var ar=["苹果","橘子","西瓜"];//设ar为表格1第一列中每一行的值，br,cr同理
var br=["香蕉","菠萝"];
var cr=["桃","杏"];
var str;
for(var i=0;i<ar.length;i++){
for(var j=0;j<br.length;j++){
for(var k=0;k<cr.length;k++){
str=ar[i]+br[j]+cr[k];
$("#div1").append(str+"<br/>");
}
}
} });
})
</script>
<input type="button" id="abv" value="测试用按钮" />
<div id="div1">
</div>
非递归实现（已调试通过）
<script>
var col1Oftable1=["11","22","33"];
var col1Oftable2=["aa","bb","cc","dd"];
var col1Oftable3=["AA","SS","DD","FF","EE"];
var col1Oftable4=["你","我","他","它","你们","我们","他们","它们"];function combineTables(col1Oftable1,col1Oftable2,col1Oftable3){ var numOfTables=arguments.length;  //要处理的表的数量
var countOfEachTable=new Array(); //存储每个表的行数
var currentRowNumber=[];   //扫描每个表时，用于跟踪当前处理的行的行号，通过下面的循环初始化为0； var resultList=[];  //存储输出结果
for(var i=0;i<numOfTables;i++){
countOfEachTable[i]=arguments[i].length;//传入参数时，确保没有空表
currentRowNumber[i]=0;
}
var tempItem=[];
//alert(countOfEachTable);
//alert(currentRowNumber);
//alert(arguments[1][2]); //var tag=0;//标识是否全部扫描完
//下面逐个扫描每个表，固定前面的表，遍历后面的表
while(currentRowNumber[0]<countOfEachTable[0]){
//第一个表没扫描完最后一行的下一行，说明还没扫描完
tempItem=[];
//把各表当前行的第一列连接成字符串
for(var i=0;i<numOfTables;i++){
tempItem.push(arguments[i][currentRowNumber[i]]);
}

resultList.push(tempItem.join(","));  //每个项内以","分割
//alert(tempItem);
//alert(resultList);

//处理各表当前行指标
currentRowNumber[numOfTables-1]++;  //最后一个表的指标加一（其他表的指标都是由这个指标驱动的，因为内层循环不遍历完，外层指标是不会变的）
for(var i=numOfTables-1;i>0;i--){
if(currentRowNumber[i]==countOfEachTable[i]){
currentRowNumber[i]=0;
currentRowNumber[i-1]++;
}
else break;

}

}

alert(resultList.join("|"));
alert(resultList.length);
}combineTables(col1Oftable1,col1Oftable2,col1Oftable3,col1Oftable4);
</script>
强势插入
<body>
<table id='t1' width="600" border="1">
<tr>
<td>1</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td> </td>
<td> </td>
</tr>
</table>
<table id="t2" width="600" border="1">
<tr>
<td>a</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>b</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>c</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>d</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table id="t3" width="600" border="1">
<tr>
<td>!</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>@</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table><script type="text/javascript">
var tableList = [document.getElementById("t2"), document.getElementById("t1"), document.getElementById("t3")]; //表格列表
var maxTableRowLen = Math.max(tableList[0].rows.length, tableList[1].rows.length, tableList[2].rows.length); //最大行数
var col = 0; //取第几列数据
var result = []; //结果数组
var i = 0;
var j = 0;
var currTableRows = null;
var currTableCels = null;
var currVal = null;
var currResult = [];
var currTableRowsLen = 0;
var currTableCelsLen = 0;
while(tableList.length && j < maxTableRowLen) {//如果还有表格
currTableRows = tableList[i].rows;
currTableRowsLen = currTableRows.length;
currTableCels = j < currTableRowsLen? currTableRows[j].cells : null; //如果第i个表格有第j行
currTableCelsLen = currTableCels? currTableCels.length : -1;
currVal = col < currTableCelsLen? currTableCels[col].innerHTML : null; //如果表格列数 >= 默认取数据列数
if(currVal) {//取到值
currResult.push(currVal);
i++; //取下一个表格
} else {//没有值，表格少于j行，删除此表格
tableList.splice(i, 1);
}
if(i >= tableList.length) {//如果第j列己遍历完
i = 0; //重置遍历表格标志
j++;   //遍历下一列
currResult.length && result.push(currResult.join(","));
currResult = [];
}
}
alert(result.join("|"));
</script>
</body>
测试结果a,1,!|b,2,@|c,3|d   这个不是我需要的排列组合  按照你这个例子  组合数至少是3*4*2=24种才是呀
不过还是很感谢哈
你看这样行吗var data = {
'A':{
'a':['1','2','3'],
'b':['1','2','3'],
'c':['1','2','3']
}
｝
var str = '';
for(var a in datas['A']){
for(var c in datas['A'][a]){
str += datas['A'][a][c];
}
}
alert(str);
给一个递归调用的，时间仓促，代码为进行优化，基本实现了功能了<div id="tables">
        <table>
            <tr><td>1</td></tr>
            <tr><td>2</td></tr>
            <tr><td>3</td></tr>
            <tr><td>4</td></tr>
        </table>
        <table>
            <tr><td>5</td></tr>
            <tr><td>6</td></tr>
            <tr><td>7</td></tr>
            <tr><td>8</td></tr>
        </table>
        <table>
            <tr><td>9</td></tr>
            <tr><td>10</td></tr>
            <tr><td>11</td></tr>
            <tr><td>12</td></tr>
        </table>
        <table>
            <tr><td>13</td></tr>
            <tr><td>14</td></tr>
            <tr><td>15</td></tr>
            <tr><td>16</td></tr>
        </table>
    </div>
<script type="text/javascript">
        var tableArr = document.getElementById("tables").getElementsByTagName("table");
        var trArr = [];
        var arr = [];
        var count = tableArr.length,
            index = 0,
            len,tr,td,txt;
        for (var i = 0; i < count; i++) {
            trArr[i] = tableArr[i].getElementsByTagName("tr");
            arr[i] = [];
            for (var j = 0; j < trArr[i].length; j++) {
                tr = trArr[i][j];
                txt = tr.getElementsByTagName("td")[0].innerHTML;
                arr[i].push({
                    "table":i,
                    "txt": txt,
                    "child":null
                });
            }
        }
        for (var i = 0; i < arr.length; i++) {
            if (i + 1 == arr.length) {
                break;
            }
            for (var j = 0; j < arr[i].length; j++) {
                arr[i][j].child = arr[i + 1];
            }
        }        var result = "",temp = [];
        for (var i = 0; i < arr[0].length; i++) {
            deep(arr[0][i]);
        }
        function deep(obj) {
            if (obj.child) {
                temp[obj.table] = obj.txt;
                for (var i = 0; i < obj.child.length; i++) {
                    deep(obj.child[i]);
                }
            } else {
                result += temp.join("");
                result += obj.txt;
                result += "$";
            }
        }
        console.log(result);
    </script>