0

はい、このフォームを作成してから約 3 日が経ちました。すべてが機能していましたが、入力が入力されているかどうかを確認するために検証が必要になったときに、すべてが制御不能になりました。

フォームには、mySQL 値が取り込まれるドロップダウン ボックスが必要です。その横にも入力用のテキストボックスがあります。入力がテキストボックスにあるかどうかを確認するには、テキストボックスを JavaScript で検証する必要があります。次に、行を削除するためのボタン。

追加ボタンはこれらすべての上にある必要があり、同じ入力の別の行を追加するだけです。

これを innerHTML ステートメントで処理し、カウンターを使用してすべてを PHP 配列に渡しましたが、削除ボタンと検証で複雑になりすぎました。

私は Web アプリケーションの他の部分で jQuery を使用しているので、それはオプションです。

方向性やサンプルコードは非常に役立ちます。

ありがとうございました

このコードで動作させることができました

<script type="text/javascript">
$(document).ready(function() {
if(typeof intId==='undefined')
{
     $(".add").attr("disabled", "true");
}
$("#addButton").click(function() {
    var intId = $("#prodpart div").length + 1;
    var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"partfield" + intId +     "\"/>");
    var partlabel = $("<label>Part #" + intId + ":</label>&nbsp;");
    var part = $("<select name=\"part[" + intId + "]\"><?php echo $option2; ?></select>");
    var partqtylabel = $("<label>Part QTY #" + intId + ":&nbsp;</label>&nbsp;");
    var partqty = $("<input type=\"text\" class=\"required\" onblur=\"enable()\"     value=\"\" size=\"5\" id=\"partqty" + intId + "\" name=\"partqty[" + intId + "]\" class=\"fieldname\" />");
    var parttimelabel = $("<label> Run Time #" + intId + ":</label>&nbsp;");
    var parttime = $("<input type=\"text\" size=\"5\" value=\"NOT REQUIRED\" name=\"runparttime[" + intId + "]\" />");
    var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Del\" />");
    removeButton.click(function() {
        $(this).parent().remove();
    });
    fieldWrapper.append(partlabel);
    fieldWrapper.append(part);
    fieldWrapper.append(partqtylabel);
    fieldWrapper.append(partqty);
    fieldWrapper.append(parttimelabel);
    fieldWrapper.append(parttime);
    fieldWrapper.append(removeButton);
    $("#prodpart").append(fieldWrapper);
    });
});
function disable(){
$(".add").attr("disabled", "true");
$(".required").blur(function(){
    if ($(this).val() != initVal && $(this).val() != "") {
    $(".add").removeAttr("disabled");
    } else {
    $(".add").attr("disabled", "true");        
    }
}); 
};
function enable(){
    $(".add").removeAttr("disabled");
};

これは、行の書き込み、削除、および検証用の上記の JavaScript です。

<input type="button" value="Add Prod Part" class="add" onclick="disable()" id="addButton" />

私のボタンの一つ。必要なボックスにテキストを入力する前は、ボタンは無効になっています。テキストが入力されると、ボタンが有効になり、別の行を追加できます。これはまだ少しバグがありますが、必要なものには問題なく機能します。

4

1 に答える 1

0

私は最近似たようなものを構築しましたが、私が持っていたのは次のとおりです。

  1. 最初に、すべての行、セル、およびフィールドが生成され、mySQL DB から入力されます。

  2. すべての入力タイプが表の行にあります。

  3. 左側に注文番号があります。これにより、人々はデータを並べ替えることができます。

  4. 次に、行を自動的にシフトできるインタラクティブな「並べ替え」機能がありました。

  5. 「削除」機能は各行の右側にありました。行を削除すると、その行が一番下に移動してから、一番下の行が削除されます。

  6. 「追加」機能は、テーブル行を追加しtable.insertRow(table.rows.length);、関連データを挿入します。

それに加えて、追加/削除ボタンによってそれぞれ増分/減分される「行数」変数もありました。

その後、データ検証はforすべてのテーブル行でループになります (「行数」を使用)。これを作成できて幸運です-私にとっては簡単ではなかったので、ソースコードを投稿しましたが、あなたが探しているものではないと思います(検証がなく、多くのテーブルデータ列が既に事前設定されています)。

于 2012-06-07T13:26:11.807 に答える