プロジェクト中にこのような問題が発生しました。つまり、データベースにいくつかのデータ セットを追加する必要がありますが、特定のデータ セットが不明なため、顧客が入力する必要があります。割引戦略には、「100 個以上の購入で 50% オフ、200 個以上の購入で 40% オフ、500 個以上の購入で 30% オフ」など、戦略ごとに多くのセットのプランが存在します。プランはあるのですが、プランの集合にサブプランが何個あるのかが定かではないので、ここではJSを使ってサブスキームの追加と削除を行い、入力されたスキームの正当性を判断し、JSON送信でデータベースに書き込みます。ここでは主に、サブプロジェクトのグループを追加および削除する方法と、各テキスト ボックスに検証を追加する方法を書きます。
テキスト ボックスのグループを動的に追加します:
1. ここでの countTable は、各行を確実に識別するために使用される変数である必要があります。は異なり、行を削除した後の ID の重複を防ぎます。
2. 各テキストに対してフォーカス離脱イベントが追加されます。つまり、フォーカスが現在のテキスト ボックスから離れるときに、それが入力と一致するかどうかを判断する必要があります。
3. テキスト ボックスの後に検証コントロールとしてラベルが追加されます。入力したテキストが要件を満たしていない場合、ラベルが表示されます。
if (isNaN(terifyText))
{
objText.parentNode.children[1].style.display = "block"
} objText .parentNode.children[1].style.display = "none";
}
すべての情報を書き込む必要がある場合は、判断も必要です。それ以外の場合は、データテーブルが生成されて返されます。バックグラウンドに送信する具体的な方法については、次のブログで説明します。
コードをコピー
コードは次のとおりです:
//DataTable object を生成
functiongenerateDtb() {
//データをフラグに書き込めるかどうかを決定します。false は書き込み可能、true は書き込みできないことを意味します
var flag = false;
//テーブルを取得します
var tab1 = document.getElementById("discountTable");
//最初の列のデータ
var firstGroup = document.getElementsByClassName("groupFirst") ;
//2 番目の列データ
var SecondGroup = document.getElementsByClassName("groupSecond");
//検証情報が正当かどうかを判断します
var veritify = document.getElementsByClassName("veritifyMessage") ;
//alert(secondGroup.item(0).value);
//(var i = 0; i について空かどうかを判断します。 {
/ /データの最初の列が空かどうかを判断します。空の場合は、プロンプトを表示します。
if (firstGroup[i].value == "")
{
veritify[( i * 2)].style.display = "block";
flag = true;
}
//データの 2 番目の列が空であるかどうかを判断します。空の場合は、プロンプトが表示されます。
if (firstGroup[i].value == "" )
{
veritify[(i * 2 1)].style.display = "ブロック"
flag = true; >}
}
for (var i = 0 ; i {
if (veritify[i].style.display == "block")
{
flag = true;
}
}
//alert(veritify.length);
//入力された情報はすべて配列に編成され、情報は処理のために返されます。
if (flag == false) {
//書き込み
var txtName = document.getElementById("txtName").value;
// 配列を作成します
var dtb = new Array ( );
//ループを通じてデータを配列に書き込み、
for (var i = 0; i var row = new Object(); row.Name = txtName;
row.fullMoney = firstGroup[i].value;
dtb.push(row); >return dtb;
}
ここでの検証も比較的単純で、テキスト ボックスの入力が空であるかどうか、および数値であるかどうかを検証し、テキスト ボックスの表示と非表示を使用します。入力に従って、配列をバックグラウンドに渡してデータベースに書き込む方法を次の記事で書きます。