用js组表格字符串，然后写到你要添加的地方
var temp = "<table>";for (var i = 0; i < M; i++) {
temp += "<tr>";
for (var j = 0; j < N; j++) {
temp += "<td>";
if (iN+j<100)
temp += String[i N + j];
temp += "</td>";
}
temp += "</tr>";
}
比如第一行3列均分，第二行二列均分，就找第一行列数和第二行列数的最小公倍数，如以下这个，最小公倍数就是标题跨列数：6，第一行每一单元格跨列2 第二行跨列3，刚好。
<table class="m-pnjctable">
<tr>
<td colspan="6">我是一个标题</td>
</tr>
<tr>
<th colspan="2">我是第一行第一列</th>
<th colspan="2">我是第一行第二列</th>
<th colspan="2">我是第一行第三列</th>
</tr>
<tr>
<th colspan="3">我是第二行第一列</th>
<th colspan="3">我是第二行第二列</th>
</tr>
</table>
var trNum=行数；
var tdNum=列数；
var html = '<table>';
for(var i=0; i<trNum; i++){
html += '<tr>';
for(var j=0; j<tdNum; j++){
html += "<td></td>";
}
html += '</tr>';
}
html+='</table>';
$('body')append($(html)); //$用的是jquery，不懂你有没学
不知道是一列转三列，还是三列转一列 。
如果是一列转三列，可以根据行号除以步进值计算（除以3），中间要根据行差进行加减，列差用列号差加到被引用的行号里。用index或者offset函数偏移到对应引用位置即可。
如果是三列转一列，则同样是计算，行号计算用除法，列号计算用余数来解决，中间计算行列差要根据具体表格的情况用加减来调整。
可参考的视频：
EXCEL把交叉数据组合并转换为纵向列表数据
用EXCEL公式函数把二维交叉显示数据转成一一对应的明细信息
用EXCEL函数快速整理在网上复制下来的变成一列的表格数据
方法二：使用表格生成器
2 点击“插入”选项卡中的“表格”按钮，选择需要的表格大小。
4 如果需要增加或删除行列，可以将光标定位到表格边缘，点击鼠标右键，选择“插入”或“删除” *** 作。
3 根据需要选择表格大小和样式。
2 点击“新建文档”，选择“表格”。
4 输入您需要的内容。
<html>
<head>
<script language="javascript">
function getTable(row,col,color,border){
var str = "";
str += "<table bordercolor="+color+" border="+border+">"
for(var i=0;i<row;i++){
str += "<tr>"
for(var j=0;j<col;j++){
str += "<td>";
str += i+1+""+(j+1);
str += "</td>";
}
str += "</tr>";
}
str += "</table>"
documentgetElementById("test")innerHTML = str;
}
</script>
</head>
<body onload = "getTable('3','4','yellow','2px')">
<div id = "test"></div>
</body>
</html>
这是一个非常简单使用的JS在线生成表格的代码效果，通过JS功能代码，直接输入行数和列数就可以自动生成需要的表格，当然也可以扩展JS代码实现生成文字的各种形式。
<html><head>
<title>Js动态生成表格</title>
<style type="text/css">
table{font-size:14px;}
</style>
</head>
<body >
<script language="javascript">
function tableclick(name1,name2,name3){
Trow=name1value;
Tcol=name2value;
Tv=name3value;
if ((Trow=="") || (Tcol=="") || (Tv=="")){
alert("请将制作表格的条件填写完整");
}
else{
r=parseInt(Trow);
c=parseInt(Tcol);
Table1(r,c,Tv);
}
}
function tablevalue(a,ai,rows,col,str){
int1=alength;
for (i=0;i<rows;++i){
for (j=0;j<col;++j){
if ((j==0)&&(ai>=int1)){break;}
if (ai>=int1){
str=str+"<td scope='col'> </td>";
}
else{
if (j==0){
str=str+"<tr><th scope='col'> "+(a[ai++])+"</th>";
}
else{
if (j==col-1){
str=str+"<td scope='col'> "+(a[ai++])+"</td>";
}
else{
str=str+"<td scope='col'> "+(a[ai++])+"</td>";
}
}
}
}
str=str+"</tr>";
}
return str;
}
function Table1(row,col,Str1){
var str="";
a=new Array();
s=new String(Str1);
a=ssplit("#");
int1=alength;
ai=0;
if (col<=int1){
str=str+"<table width='300' border='4'>";
for (i=0;i<col;++i){
if (i==0){
str=str+"<tr><th scope='col'> "+(a[ai++])+"</th>";
}
else{
if (i==(col-1)){
str=str+"<th scope='col'> "+(a[ai++])+"</th></tr>";
}
else{
str=str+"<th scope='col'> "+(a[ai++])+"</th>";
}
}
}
if (int1>col){
if (row>1){
str=tablevalue(a,ai,row-1,col,str);
}
}
str=str+ "</table>";
aainnerHTML=str;
}
}
</script>
<form name="form1" method="post" action="">
<p><b>行数：</b>
<input name="name1" type="text" style="width:40px" value="4">
<b>列数：</b>
<input name="name2" type="text" style="width:40px" value="4">
<input type="button" name="Submit3" value="生成表格"
onClick="tableclick(documentform1name1,documentform1name2,documentform1name3)"></p>
<p><b align="top">表值：</b></p>
<p>
<input name="name3" wrap="VIRTUAL" style="width:520px "
value="COL1#COL2#COL3#COL4#ROW1#A1#A2#a3#ROW2#B1#B2#B3#ROW3#C1#C2#C3">
</p>
</form>
<div id="aa"></div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）