我正在尝试使用4x4,7x7或9x2等动态网格镜像表格。
我动态创建:
<table id="mainTable" class="mainClassTable" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr id="row-1">
<td id="col-1" onclick="imgClick(this)">Stuff Here</td>
<td id="col-2" onclick="imgClick(this)">Stuff Here</td>
<td id="col-3" onclick="imgClick(this)">Stuff Here</td>
<td id="col-4" onclick="imgClick(this)">Stuff Here</td>
</tr>
<tr id="row-2">
<td id="col-1" onclick="imgClick(this)">Stuff Here</td>
<td id="col-2" onclick="imgClick(this)">Stuff Here</td>
<td id="col-3" onclick="imgClick(this)">Stuff Here</td>
<td id="col-4" onclick="imgClick(this)">Stuff Here</td>
</tr>
<tr id="row-3">
<td id="col-1" onclick="imgClick(this)">Stuff Here</td>
<td id="col-2" onclick="imgClick(this)">Stuff Here</td>
<td id="col-3" onclick="imgClick(this)">Stuff Here</td>
<td id="col-4" onclick="imgClick(this)">Stuff Here</td>
</tr>
</tbody>
</table>
我想知道每一行最好的方法是让col-1移动到col-4,col-2是col-3。对于不均匀的色谱柱,我担心它会更复杂。
我发现了一些关于洗牌的事情,但我想要洗牌。
我正在考虑使用jQuery选择器来繁琐地重新定位每个td,但我想知道是否有一个很好的jquery插件来重新排列表。
我不想拖动,我只想一次点击镜像表(而不是内容)。
/编辑
所以我尝试使每个col ID都是唯一的,但我最终得到了这堆热气腾腾的代码:
function makeGrid(content, rowCount, colCount)
{
//Empty TD string
tableVarSet = "";
//gridTotal = gridTotal - gridTotal;
//Loop for multiple columns
for (c=1;c<=colCount;c++)
{
//make column var
tableVarSet = tableVarSet + makeColumns(content, c);
}
//Loop for multiple rows
for (i=1;i<=rowCount;i++)
{
//Make new Row
rowVarToAdd = "<tr id=TMPR>"+tableVarSet+"</tr>";
$("#mainTable").append(rowVarToAdd);
//Set new RowID
rowName = "row-" + i;
$("#TMPR").attr('id', rowName);
}
};
function makeColumns(content, count)
{
//Split String
tableVar1 = "<td id=col-"
tableNum = count;
tableVar2 = " onClick='imgClick(";
tableFunction = "this" ;
tableVar3 = ")'>"+content+"</td>";
//Combine Strings:
colVar = tableVar1 + tableNum + tableVar2 + tableFunction + tableVar3;
//Return result
return colVar;
};
所以,是的,它有点工作,但它可能会更容易。 (任何想法?)
答案 0 :(得分:1)
不要使用字符串,而应考虑使用DOM操作。
var rows = document.getElementById("mainTable").rows, cells, fragment = document.createDocumentFragment();
for(var i = 0, len = rows.length; i<len; i++){ //Iterate over each row
cells = rows[i].cells;
for(var j = cells.length-1; j>=0; j--) {
fragment.appendChild(cells[j]); //Remove the cells starting from the end and put them in a document fragment
}
rows[i].appendChild(fragment); //Append the fragment's contents to the current row
}
jsFiddle上的
答案 1 :(得分:0)
首先,您不应该使用具有相同值的多个ID!你应该使用类。
其次,以下代码有效,但您需要根据自己的应用进行更改。
如果您不想复制内容,只需删除每个单元格上的html()调用。
<!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=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<table id="test">
<tr id="row-1"><td class="col-1">col 1</td><td class="col-2">col 2</td><td class="col-3">col 3</td></tr>
<tr id="row-2"><td class="col-1">col 1</td><td class="col-2">col 2</td><td class="col-3">col 3</td></tr>
<tr id="row-3"><td class="col-1">col 1</td><td class="col-2">col 2</td><td class="col-3">col 3</td></tr>
</table>
</body>
<div id="mirror"></div>
<script type="text/javascript">
var table = $('#test');
var OUTPUT = '<table id="test">';
for (var i = 1; i <= $('#test tr').length; i++){
OUTPUT += '<tr id="row-' + i + '">';
OUTPUT += '<td class="col-1">' + $('#row-' + i + " .col-3").html() + '</td>' + "\n";
OUTPUT += '<td class="col-2">' + $('#row-' + i + " .col-2").html() + '</td>' + "\n";
OUTPUT += '<td class="col-3">' + $('#row-' + i + " .col-1").html() + '</td>' + "\n";
OUTPUT += '</tr>';
};
OUTPUT += '</table>';
$('#mirror').html(OUTPUT);
</script>
</html>