2

間違ったキーワードを使用して Google を検索しているだけかもしれませんが、拡張可能なフォーム フィールドの作成に関する情報を見つけることがほとんどできません。ユーザーがサーバー ノードに割り当てられたすべてのインベントリを一覧表示できる入力フォームがありますが、必要に応じてアイテムを追加できるようにしたいと考えています。フォームの例では、(1) ディスクを追加するためのオプションが示されていますが、+ 記号をクリックしてさらに追加することができます。

かなりの量を格納できるように、disk1、disk2 などの各タイプに対して 8 つの MYSQL 行を既に作成しました。ただし、私の懸念は、これが多くのオプションになることです。

1) Javascript を使用して展開可能なフォームを作成するにはどうすればよいですか? 機能しないコード例を 1 つだけ見つけました。2) すべてのオプションをハードコーディングする必要がありますか? 現在、私のコードには「ram」、「motherboard」などの名前の選択ボックスがあります。これらを生成できますか、それとも「ram1」、「ram2」などの各フィールドに書き出す必要がありますか?

ここに画像の説明を入力

4

3 に答える 3

2

JavaScript でフィールドを複製するのは簡単です。あなたが持っているとしましょう：

<select name="hdd"><!-- ...options here...--></select>

次に、DOM 内の既存の要素への参照を取得したら (以下を参照)、これを行うことができます。

var newSelect = existingSelect.cloneNode(true);
newSelect.selectedIndex = -1; // To clear any existing selection
existingSelect.parentNode.insertBefore(newSelect, existingSelect.nextSibling);

CSS セレクターを使用して(最初の一致を取得するため) または(すべての一致のリストを取得するため) を使用して、最新のブラウザーで既存の参照を取得selectできます。たとえば、次のようになります。document.querySelectordocument.querySelectorAll

var list = document.querySelectorAll('select[name="hdd"]');
var existingSelect = list[list.length - 1]; // Get the last one

...これで最後の 1 つが得られます。または、コピーしたいものを含む何らかの行 ( a tr、または a div)がある可能性が高いです。問題ありません。その行にクラスを指定し (たとえば、)、全体を複​​製します (ここでは、最後の行を複製し、最後に追加しています)。"hdd"

var list = document.querySelectorAll('.hdd');
var existingRow = list[list.length - 1];  // Get the last one
var newRow = existingRow.cloneNode(true); // Clone it
newRow.querySelector('select[name="hdd"]').selectedIndex = -1; // Clear selected value
existingRow.parentNode.insertBefore(newRow, existingRow.nextSibling);

MySQL 側では、 、 などの列を持たないことが最善です。これらのフィールドに対するクエリが複雑になり、もちろん、使用できる最大数が制限されるためです (もちろん、おそらくそれを制限したいでしょう)。とりあえず）。(これらの列を 1 つの行に配置することを、DB の「非正規化」と呼びます。)hdd1hdd2

DB 設計でこれを行う通常の方法は、HDD をリストする 2 番目のテーブルを用意し、その 2 番目のテーブルのキー (「外部キー」) をメイン テーブルにリンクすることです。(詳細については、「データベースの正規化」を参照してください。)

したがって、メイン テーブルには、たとえばSystemID. HDDs テーブルにはSystemID列とHDD列があり、同じSystemID.

フォーム ビットの完全な例を次に示します。ライブソース

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Add Form Field Example</title>
</head>
<body>
  <div class="hdd">
    <label>HDD: <select name="hdd">
      <option>--choose--</option>
      <option>80GB</option>
      <option>500GB</option>
      <option>1TB</option>
      <option>2TB</option>
      </select></label></div>
  <input type="button" id="theButton" value="Add Row">
  <script>
    (function() {
      document.getElementById("theButton").addEventListener("click", addRow, false);

      function addRow() {
        var list = document.querySelectorAll('.hdd');
        var existingRow = list[list.length - 1];  // Get the last one
        var newRow = existingRow.cloneNode(true); // Clone it
        newRow.querySelector('select[name="hdd"]').selectedIndex = -1; // Clear selected value
        existingRow.parentNode.insertBefore(newRow, existingRow.nextSibling);
      }
    })();
  </script>
</body>
</html>

参考文献:

于 2013-05-16T09:31:04.867 に答える
0

TYPE および DETAILS の列を含む汎用 DEVICE_DETAIL テーブルを作成してみてください。その後、任意の数を保持し、将来新しいタイプを追加できます。

create table DEVICE (
    ID integer not null,
    ..
    primary key (ID)
);
create table DEVICE_DETAIL (
    ID integer not null,
    FK_DEVICE integer not null,
    "TYPE" varchar(24),                  -- type code; defined internally.
    CONFIG varchar(200),
    NOTES clob,                          -- if necessary?
    .. more columns if useful
    primary key (ID)
);

これの利点は、HDD、IP アドレス、RAM、または幅広い将来の可能性のために個別のテーブルが必要ないことです。詳細を保持できる列が 2 つあれば十分です。ほとんどの場合、1 行で十分です。

ユーザーが以前のフィールドに入力すると、UI に新しいフィールドを追加して表示します。

于 2013-05-16T09:32:01.157 に答える