0

最初の列の各行に div があるテーブルがあります。テーブルの行または列に応じて、ページの読み込み時にその位置を設定したいと考えています。

これは私の出力テーブルです：

col1 | col2 | col3 | col4 | col5 |
""""""""""""""""""""""""""""""""""
div1 |      |      |      |      |
""""""""""""""""""""""""""""""""""
div2 |      |      |      |      |
""""""""""""""""""""""""""""""""""
div3 |      |      |      |      |

データベースのクエリに応じて、ページの読み込み時に位置を別の列に設定したい。例：

col1 | col2 | col3 | col4 | col5 |
""""""""""""""""""""""""""""""""""
     | div1 |      |      |      |
""""""""""""""""""""""""""""""""""
     |      |      | div2 |      |
""""""""""""""""""""""""""""""""""
div3 |      |      |      |      |

出来ますか..？を使用してJavaScriptで位置を取得できます

   var pos = rd.get_position();
   console.log( pos[0][0] );

どんな方法でも、アドバイスでも構いません。ありがとう！

4

3 に答える 3

0

各 div を移動して、指定された列の子になるようにすることを想定しています (列に視覚的に配置するだけではなく、位置: 絶対)。

このソリューションでは、テーブル内の各 div の項目を持つ配列を使用します (したがって、posList[0] は div1 の値を保持し、postList[2] は div3 の値を保持するなど)。各配列エントリの値は、各 div の列を指定する数値です。

/* 
    posList is an array specifying, for each div, the zero-based column where you want to move each div.

    Example: The array [1, 3, 0] means the first div will be in column 2, the second div in column 4 and the third div in column 1 (remember that they are zero-indexed).

    In this code snippet it has been hard-coded for simplicity but it should be generated from the "query of [your] database" in whatever way is appropriate to your application.

 */
var posList = [1, 3, 0];    // Hard-coded for simplicity: div1 is in col2, div2 is in col4, div3 is in col1.

var rowList = $("table tr");    // Get all the rows in the table.
var divList = rowList.find("div");    // Find all the divs in the rows. This assumes there aren't any other divs in the table at all - make this selector more specific as required).

var i = 0
    ,colIndex = 0
    ,cell = null
    ,div = null
    ,row = null;


for (i = 0; i < posList.length; i++){

    colIndex = posList[i];  // Get the column index for each <div>.
    if (colIndex == 0){
        continue;    // Minor optimisation - if the index is 0 then we don't need to move the <div>.
    }

    div = divList.eq(i);    // The <div> that needs to be moved.
    row = rowList.eq(i);    // This is the <tr> element that is the ancestor of the current <div>.

    cell = row.find("td").eq(colIndex);    // We want to move the <div> to the <td> element specified by the column index from posList.
    div.detach().appendTo(cell);    // Move the <div> to the new column.

}
于 2012-04-30T03:53:31.393 に答える
0 
     | col1 | col2 | col3 |
"""""""""""""""""""""""""""
row1 |   x  |      |      |
"""""""""""""""""""""""""""
row2 |      |      |  y   |
"""""""""""""""""""""""""""
row3 |      |   z  |      |

jQuery

$('table tr:eq(0) td:eq(0)').text('x');
$('table tr:eq(1) td:eq(2)').text('y');
$('table tr:eq(2) td:eq(1)').text('z');​

また...

$('td', $('table tr').eq(0)).eq(0).text('x');
$('td', $('table tr').eq(1)).eq(2).text('y');
$('td', $('table tr').eq(2)).eq(1).text('z');

証明: http://jsfiddle.net/iambriansreed/mfTec/

于 2012-04-30T03:35:43.320 に答える
0

以下を使用できます。

// table is a reference to the table
// div is a reference to the div to move
table.rows(y).cells(x).appendChild(div);

ここで、y は行番号 (上から 0 から始まることに注意)、x は列番号 (左から 0 から始まる) です。また、div への参照がある場合は、それを新しい位置に割り当てるだけで、現在の親から自動的に削除され、新しい親に追加されることに注意してください (つまり、削除してから追加する必要はありません。追加）。

于 2012-04-30T04:04:57.727 に答える