0

我有一个表格，第一列的每一行都有一个 div，我想根据我想要的表格行或列来设置它在页面加载时的位置。

这是我的输出表：

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

我想在页面加载时根据我的数据库查询将它们的位置设置为不同的列。例子：

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

可能吗..？我可以使用 javascript 在 javascript 中获得位置

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

任何方法或建议都可以。谢谢！

4

3 回答 3

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

我假设您要移动每个 div 以使其成为指定列的子级（而不是将其视觉定位在列上，例如 position: absolute）。

此解决方案使用一个数组，其中表中的每个 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

您可以使用：

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

其中 y 是行号（注意它们从顶部开始从零开始索引），x 是列号（从左侧开始从零开始索引）。另请注意，如果您有对 div 的引用，只需将其分配给新位置，它将自动从当前父级中删除并附加到新位置（即您不必先删除然后附加，只需附加）。

于 2012-04-30T04:04:57.727 回答