0

我有一个使用表格布局的页面。它有三列我想在第一列（最左边）有链接，使用 Javascript 将两列的内容更改为右侧。

尝试将两个table单元格放在divorspan元素中，但这似乎不是有效的 HTML

我知道您可以在一个单元格内放置一个 div 或 span。但是，我想使用两个单元格作为一种“窗格”来显示链接后面的内容。首先，考虑到需要显示的内容，我更喜欢两个独立的单元格，而不是一个双单元格。

由于这是一个遗留站点，因此不能选择无表布局。

任何人都可以建议一种解决方法来创建一个两列窗格以在单击链接时显示内容？

html

<table
    <tr>
        <td>StartContent1</td>
        <td>StartContent2</td>
        <td>StartContent3</td>
    </tr>
    <tr>
        <td>
            <a href="javascript:void()" onclick="loadPane();">Link</a>
        </td>
        <span id="pane">
            <td>StartContent4</td>
            <td>StartContent5</td>
        </span>
    </tr>
</table>

JS

function loadPane() {
    document.getElementById('pane').innerHTML= "<td colspan=2>Two columns worth of expanded content</td>;
    return false;
}
4

2 回答 2

1

除了表格行中的元素之外<td>，您不能有任何东西。<th>

尝试这样的事情：

<tr>
    <td>
        <a href="javascript:void()" onclick="loadPane();">Link</a>
    </td>
    <td id="pane">StartContent4</td>
    <td id="paneHide">StartContent5</td>
</tr>

Javascript：

var pane = document.getElementById('pane');
pane.innerHTML = 'Two columns worth of expanded content';
pane.setAttribute('colspan','2');
var paneHide = document.getElementById('paneHide');
paneHide.parentNode.removeChild(paneHide);
于 2013-03-06T12:07:22.783 回答
0

您可以使用嵌套表解决此问题。想象一个外部表，您在左列中放置了一个链接。在外部表的右列中放置一个 div。在这个 div 中，内部表包含 2 列，一旦单击链接，它就会被替换为具有一列的新内部表。

jsFiddle可以在这里找到：http : //jsfiddle.net/uwe_guenther/k92pK/

索引.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
    <body>
        <table id='outerTable'>
            <tr>
                <td>StartContent1</td>
                <td>
                    <table>
                        <tr>
                            <td>StartContent2</td>
                            <td>StartContent3</td>
                        </tr>
                    </table>
                </td>
            </tr>   
            <tr>
                <td><a href="#" onclick="loadPane();">Link</a></td>
                <td>
                    <div id='pane'>
                        <table id='innerTable'>
                            <tr>
                                <td>StartContent4</td>
                                <td>StartContent5</td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
        <script src='main.js'></script>
    </body>
</html>

main.js

function loadPane() {
    var pane = document.getElementById('pane')
    pane.innerHTML= '<table id="newInnerTable"><tr><td>Two columns worth of expanded content</td></tr></table>';
};
于 2013-03-06T12:59:01.860 回答