如何通过使用行和列设置div在表中的位置

Question

I have a table with a div in each row on the first column, I want to set its position on page load depending on what table row or column I want it to be.

This is my output table:

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

I want on page load set their position to different column depending on the query of my database. example:

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

Is it possible..? i can get the position in javascript using

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

Any method or advice is ok. Thanks!

Answer 1

     | 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');​

or...

$('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');

Proof: http://jsfiddle.net/iambriansreed/mfTec/

Answer 2

I'm assuming that you want to move each div so that it is a child of the specified column (as opposed to just positioning it visually on the column eg position: absolute).

This solution uses an array with an item for each div in the table (so posList[0] holds the value for div1, postList[2] holds the value for div3, etc.). The value of each array entry is a number specifying the column for each 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.

}

Answer 3

You can use:

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

where y is the row number (noting that they are indexed from zero from the top) and x is the column number (indexed from zero from the left). Also note that if you have a reference to the div, you just assign it to a new position, it will automatically be removed from it's current parent and appended to the new one (ie you don't have to do remove then append, just append).