質問

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;
};

だから、ええ、それは一種の動作ですが、おそらくはるかに簡単になる可能性があります。 (何か案は?)

正しい解決策はありません

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top