JavaScript/jQueryを使用したHTMLテーブルをミラーリングします
-
30-10-2019 - |
質問
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-3でCOL-2に移動させるのに最適な方法は何だろうと思っています。そして、不均一な列で、私はそれがより複雑になることを恐れています。
列をシャッフルすることについて何かを見つけましたが、列をシャッフルしたいです。
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;
};
だから、ええ、それは一種の動作ですが、おそらくはるかに簡単になる可能性があります。 (何か案は?)
正しい解決策はありません
所属していません StackOverflow