Question

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

尝试将两个table单元格放在div或span元素中，但这似乎不是有效的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;
}

Answer 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);

Answer 2

您可以使用嵌套表解决此问题。想象一下在左侧列中放置链接的外部表。在外表的右栏中放置一个div。在这个div中，内部表格有两列，一旦你点击链接就会被一个新的内部表替换为一列。

可在此处找到jsFiddle：http://jsfiddle.net/uwe_guenther/k92pK/

的index.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>';
};

有没有办法将表格单元放在div或变通方法中

2 个答案: