Зеркальное отображение таблицы HTML с помощью Javascript / jQuery - PullRequest
Новая
       14

Зеркальное отображение таблицы HTML с помощью Javascript / jQuery

0 голосов
/ 19 января 2012

Я пытаюсь отразить таблицу с динамической сеткой, такой как 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 для перестановки таблиц.

Я не хочу перетаскивать, я просто хочу, чтобы один клик отразил таблицу (не содержимое).

/ Edit
Поэтому я попытался сделать каждый идентификатор col уникальным, но в итоге у меня получилась куча кода: 

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

Так что, да, это вроде работает, но, вероятно, это может быть намного проще. (есть идеи?)

Ответы [ 2 ]

1 голос
/ 19 января 2012

Вместо использования строк рассмотрим манипуляции с 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

0 голосов
/ 19 января 2012

Во-первых, вы не должны использовать несколько идентификаторов с одинаковым значением! Вы должны использовать классы.

Во-вторых, приведенный ниже код работает, но вам необходимо изменить его в соответствии с вашим приложением.

Если вы не хотите, чтобы содержимое копировалось, просто удалите вызов 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>
...