0

我必须创建一个包含两列和 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 的例子。

4

1 回答 1

0

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

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

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

于 2012-10-28T02:48:06.260 回答