javascript - 为什么我的 html 不显示第三列

我必须在第一行的第三列显示一个组合框。我当前的html代码有第一行包含 3 列。在第一列中，我有一个图像，在第二列中，我有一个文本，在第三列中，我再次有一个包含 2 列的表格，其中一列包含文本，另一列包含组合框。所以这都是关于第一行的，现在在第二行我只有 1 列，它呈现了一个具有列跨度的谷歌地图。

我现在有两个问题:

第一行的第三列没有显示在给定的维度中(我不知道为什么？)为什么它只显示 2 列？如何让所有 3 列都显示在第一行。
如何在 Javascript 中针对该组合的选择更改创建事件？

我的代码是:

<body style="overflow:hidden;">
    <table border="1" style="width:100%">
        <tr>
            <td style="width:30%;max-width:30%;">
                <img src="Image.jpg" alt="Mountain View" style="width:100px;height:50px">
            </td>
            <td style="width:30%; max-width:30%;">
                <h2> List1 </h2>
            </td>
            <td style="width:30%; max-width:30%; ">
                <table border="1">
                    <tr>
                        <td>
                            <h2>List2: </h2>
                        </td>
                        <td>
                            <select name="example">
                                <option value="A">A</option>
                                <option value="B">A</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="mapCanvas"></div>
            </td>
        </tr>
    </table>
</body>

如何解决这两个问题？

最佳答案

那是因为您已经定义了一个包含 2 个 colspans 的列，对于您的第一个表，它是 1*2 = 2columns。

如果要显示第三列，请使用以下更改之一:

<tr>
    <td colspan="3">
        <div id="mapCanvas"></div>
    </td>
<tr>

或者

<tr>
    <td colspan="2">
        <div id="mapCanvas"></div>
    </td>
    <td>
     &nbsp;
    </td>
<tr>

然后，在您的组合定义中添加 onChange:

<select name="example" onchange="alert(this.value)">
    <option value="A">A</option>
    <option value="B">A</option>
</select>

完整代码如下:

<body style="overflow:hidden;">
    <table border="1" style="width:100%">
        <tr>
            <td style="width:30%;max-width:30%;">
                <img src="Image.jpg" alt="Mountain View" style="width:100px;height:50px">
            </td>
            <td style="width:30%; max-width:30%;">
                <h2> List1 </h2>
            </td>
            <td style="width:30%; max-width:30%; ">
                <table border="1">
                    <tr>
                        <td>
                            <h2>List2: </h2>
                        </td>
                        <td>
                            <select name="example" onchange="myfunction(this.value)">
                                <option value="A">A</option>
                                <option value="B">B</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="mapCanvas"></div>
            </td>
            <td>
             &nbsp;
            </td>
        <tr>
    </table>
</body>

编辑: 更改onchange:

<select name="example" onchange="myfunction(this.value)">
    <option value="A">A</option>
    <option value="B">B</option>
</select>

将此添加到您的其余代码中:

<script>
  function myfunction(val){
    if(val == "A") 
      fnA();
    els if(val == "B") 
      fnB();
  }
  function fnA(){
    alert("This is the function for A");
  }
  function fnB(){
    alert("This is the function for B");
  }
// you can call fnA(); here as it is your default selection and call it by default.
</script>

关于javascript - 为什么我的 html 不显示第三列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29248729/

javascript - 为什么我的 html 不显示第三列

上一篇：html - 如何将溢出的跨度包装在固定的 div 中

下一篇：php - Yii2 可编辑图像