现有一数组如下： var ary1= new Array();
ary1[0]= "小牛,小雪";
var1[1] = "A物品,B物品,C物品";
var1[2] = "Price，Amount";请根据如上数组实现给单元格取唯一名：最终单元格如下图所示！另外告知一点，请不要认为数组只是三个元素，Table可以N层，不止三层！
ary1[0]= "小牛,小雪";
var1[1] = "A物品,B物品,C物品";
var1[2] = "Price，Amount";请根据如上数组实现给单元格取唯一名：最终单元格如下图所示！另外告知一点，请不要认为数组只是三个元素，Table可以N层，不止三层！
<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>
因为 在生td的同时设置了事件根据mvc 不需要设置ID
因为数据的修改读取 直接从m层中获取
请根据 m层的变化来修改 v层
m层即你的 var ary1
<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>
不是要这种，我的主要目的是想把各单元格取个唯一的名字，以及哪个单元格cospan多少，都记录下来，最后我要根据记录下来的这些ID，去加载数据到这table里的！因为这只是一个title部分，table下面还有实质数据部分，是到数据源里去找数据来匹配。最后我给各单元格赋值的时候直接根据生成的这些ID去赋值相应 的数据值
<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>