使用Javascript/jQuery镜像HTML表_Javascript_Html Table_Jquery Selectors_Mirror

使用Javascript/jQuery镜像HTML表

javascript

使用Javascript/jQuery镜像HTML表,javascript,html-table,jquery-selectors,mirror,Javascript,Html Table,Jquery Selectors,Mirror,我正在尝试镜像一个表，它有一个动态网格，比如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>

我正在尝试镜像一个表，它有一个动态网格，比如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插件来重新排列表

我不想拖拉，我只想点击一下镜像表（而不是内容）

/编辑
因此，我尝试使每个列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;
};

函数makeGrid（内容、行数、列数）
{   
//空TD字符串
tableVarSet=“”；
//gridTotal=gridTotal-gridTotal；
//多列循环
对于（c=1；c首先，您不应该使用具有相同值的多个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>


无标题文件
col 1col 2col 3
col 1col 2col 3
col 1col 2col 3
变量表=$（“#测试”）；
var输出=“”；
对于（var i＝1；i而不是使用字符串），考虑DOM操作。< /P>
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
}

var rows=document.getElementById（“mainTable”）。行、单元格、片段=document.createDocumentFragment（）；
对于（变量i=0，len=rows.length；i=0；j--）{
fragment.appendChild（cells[j]）；//删除从末尾开始的单元格，并将它们放入文档片段中
}
行[i].appendChild（片段）；//将片段的内容追加到当前行
}

在JSFIDLE上
我会从唯一的IDS开始，也许-1你说的第一件事是不要使用相同的id
s，然后你继续给出一个答案，给用户提供多个具有相同id
的元素。Dennis在评论中明确指出他需要根据自己的应用程序进行调整，我这样做是为了让他能够看到or原始表与屏幕上的镜像表相比，在降级之前，您真的应该阅读代码以了解它的功能！即使我给您这样的答案，您的答案也使用HTML字符串而不是DOM，这不是处理DOM操作问题的首选方法。这是正确的dennis，但他并没有要求使用仅限DOM的方法：）@mplungjan追加其内容可以清除它。当我最初提交答案时，jsfiddle没有保存，但我刚刚发布了一个演示。你的意思是rows[I]。appendChild（片段）；
清除片段？@mplungjan当使用片段作为参数调用el.appendChild
时，片段的子级将被删除并添加到el
。