Question

我必须在第一行的第三列中显示一个组合框。我目前的HTML代码有第一行包含3列。在第一列我有一个图像，在第二列我有一个文本，在第三列我再次有一个表，其中包含2列，一列包含文本，另一列包含组合框。所以这就是第一行，现在在第二行，我只有一列，它呈现一个带有列跨度的谷歌地图。

我现在有两个问题：

第一行的第三列未显示在给定的维度中（我不知道为什么？）为什么它只显示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>

如何解决这两个问题？

Answer 1

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

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

<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>

Answer 2

首先要问这个问题......

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<table width="100%" border="1">
  <tr>
 <td><img src="#" alt="Your Image" /></td>
 <td>Your Text goes here</td>
 <td>

    <table width="100%">
<tr>
<td>Your Text here</td>
<td>

    <select name="example">
         <option value="A">A</option>
         <option value="B">A</option>
    </select>

 </td>
</tr>
</table>


 </td>
</tr>
</table>

</body>
</html>

为什么我的HTML没有显示第三列

2 个答案: