Question

我必须创建一个包含两列和10行的表的页面。在左栏中，它必须显示国家/地区的名称，另一方面，它必须显示国家/地区的标志。我必须在这个页面上使用Javascript，但我不知道如何将它放在一起。这就是我所拥有的（可能非常错误）：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
    </style>
    <title>New Items</title>
<script type="text/javascript">
    var img1 = document.createElement("img");
        img.src = "argentina.jpg";
    var img2 = document.createElement("img");
        img.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
    var img3 = document.createElement("img");
        img.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
    var img4 = document.createElement("img");
        img.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
    var img5 = document.createElement("img");
        img.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
    var img6 = document.createElement("img");
        img.src = "argentina.jpg";
    var img7 = document.createElement("img");
        img.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
    var img8 = document.createElement("img");
        img.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
    var img9 = document.createElement("img");
        img.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
    var img10 = document.createElement("img");
        img.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
</script>
</head>
<body>
<h1>Flags</h1>
<form action="#" name="Flags" method="get">
<table style="border: 0; width: 100%;">
<tr>
    <td>
    <select name="flags" multiple="multiple"
        style="height: 98px">
        <option onclick="document.productImage.src=img1">
    Argentina</option>
    </select>
    </td>
    <td>
    <textarea name="news" cols="30" rows="10"
    style="background-color: Transparent"></textarea>
    </td>
</tr>
<tr>
    <td>
    <select name="flags" multiple="multiple"
        style="height: 98px">
        <option onclick="document.productImage.src=img2">
    Australia</option>
    </td>
    <td>
    <textarea name="news" cols="30" rows="10"
    style="background-color: Transparent"></textarea>
    </td>
</tr>
<tr>
    <td>
    <select name="flags" multiple="multiple"
        style="height: 98px">
        <option onclick="document.productImage.src=img3">
    Bolivia</option>
    </td>
    <td>
    <textarea name="news" cols="30" rows="10"
    style="background-color: Transparent"></textarea>
    </td>
</tr>
<tr>
    <td>
    <select name="flags" multiple="multiple"
        style="height: 98px">
        <option onclick="document.productImage.src=img4">
    Cuba</option>
    </td>
    <td>
    <textarea name="news" cols="30" rows="10"
    style="background-color: Transparent"></textarea>
    </td>
</tr>
<tr>
    <td>
    <select name="flags" multiple="multiple"
        style="height: 98px">
        <option onclick="document.productImage.src=img5">
    Finland</option>
    </td>
    <td>
    <textarea name="news" cols="30" rows="10"
    style="background-color: Transparent"></textarea>
    </td>
</tr>
<tr>
    <td>
    <select name="flags" multiple="multiple"
        style="height: 98px">
        <option onclick="document.productImage.src=img6">
    France</option>
    </td>
    <td>
    <textarea name="news" cols="30" rows="10"
    style="background-color: Transparent"></textarea>
    </td>
</tr>
<tr>
    <td>
    <select name="flags" multiple="multiple"
        style="height: 98px">
        <option onclick="document.productImage.src=img7">
    Italy</option>
    </td>
    <td>
    <textarea name="flags" cols="30 rows="10"  
    style="background-color: Transparent"></textarea>
    </td>
</tr>
<tr>
    <td>
    <select name="flags" multiple="multiple"
        style="height: 98px">
        <option onclick="document.productImage.src=img8">
    Peru</option>
    </td>
    <td>
    <textarea name="flags" cols="30" rows="10"
    style="background-color: Transparent"></textarea>
    </td>
</tr>
<tr>
    <td>
    <select name="flags" multiple="multiple"
        style="height: 98px">
        <option onclick="document.productImage.src=img9">
    Syria</option>
    </td>
    <td>
    <textarea name="flags" cols="30" rows="10"
    style="background-color: Transparent"></textarea>
    </td>
</tr>
<tr>
    <td>
    <select name="flags" multiple="multiple"
        style="height: 98px">
        <option onclick="document.productImage.src=img10">
    Tunisia</option>
    </td>
    <td>
    <textarea name="flags" cols="30" rows="10"
    style="background-color: Transparent"></textarea>
    </td>
</tr>

</tr>
</table>
</form>

</body>
</html>

请帮助我花了很多时间，我的教科书没有给出任何img的例子。

Answer 1

可以对您的代码进行一些改进。没有特别的顺序，我看到了

1）所有文本区域都应用了相同的内联样式。在这种情况下，您可以删除所有额外的膨胀，将样式标记中包含的单个1的所有10个语句进行交换。所以，

<textarea name="flags" cols="30" rows="10"
 style="background-color: Transparent"></textarea>

变为

<textarea name="flags" cols="30" rows="10"></textarea>

此外，将规则添加到“样式”部分：

textarea
{
  background-color: transparent;
}

2。您可以使用Image对象。您拨打document.createElement('image')的多个电话 - 可以将其替换为new Image;

3。一切都是硬编码的 - 你似乎根本没有使用任何循环。您可以将国家/地区列表及其标志存储在数组中。然后，您可以根据需要处理此数组，吐出表行。因此，您可以使用为每行创建DOM的函数，使用2个变量 - 图像路径和国家/地区名称。

以下是方法中某些变化的工作示例：http://jsfiddle.net/AfBwJ/

创建一个使用Javascript显示img的表

1 个答案: