0

2 列 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)すべてのテキスト領域に同じインライン スタイルが適用されます。その場合、スタイル タグに含まれる 1 つの 1 に対してこれら 10 個のステートメントすべてを交換することで、余分な肥大化をすべて取り除くことができます。そう、

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

になる

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

また、Style セクションにルールを追加します。

textarea
{
  background-color: transparent;
}

2. Image オブジェクトを利用できます。複数の呼び出しを行うdocument.createElement('image')- これは次のように置き換えることができますnew Image;

3.すべてがハードコーディングされている - ループをまったく使用していないようです。国とその国旗のリストを配列に保存できます。次に、この配列を処理し、必要に応じてテーブルの行を吐き出すことができます。したがって、画像パスと国名の 2 つの変数を使用して、各行の DOM を作成する関数を使用できます。

アプローチのいくつかの変更の実例を次に示します: http://jsfiddle.net/AfBwJ/

于 2012-10-28T02:48:06.260 に答える