为什么我的HTML不显示第三列-Java 学习之路

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

我现在有两个问题：

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

那是因为你已经定义了一个带有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>

Edit: 更改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>

回复于 2024-05-04T22:29:50+08:00

试试第一个问题......

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

回复于 2024-05-04T22:29:50+08:00

为什么我的HTML不显示第三列

2 回答

相关问题