Javascriptでテーブルデータ行を動的に追加（ASPバックグラウンドデータベース保存例）_JavaScriptスキル

多くの Web アプリケーションでは、複数行のレコードを動的に挿入する必要がある場所がたくさんあります。たとえば、人材サイトでは、履歴書を記入する際に、実際の状況に応じて項目の数を動的に追加する必要がありますが、これは別のページの形で追加されません。この動的追加は、「同じページに動的に追加し、最後にサーバーに送信してデータベースに保存する」にあります。

この記事では、同様の例を使用して、フロントエンドで Javascript を使用してデータ項目を動的に追加し、バックグラウンドでデータベースに保存します。

ブラウザ: IE.6.0
バックエンド: ASP (VBScript)
フロントエンド: HTML JavaScript

HTML コード:

コードをコピーします コードは次のとおりです:

Name:
性別:
>


説明の前に< /td>開始日:
削除 < /tr>

<入力タイプ=送信値=送信>

;




JS コード:




コードをコピー


コードは次のとおりです:

/**//*この関数は 1 行を動的に追加するために使用されます
* tabObj : ターゲット テーブル
* colNum: テーブル内の行の列数

* sorPos: 新しい行のソース。 * targPos: 新しい行が追加される位置。 * */ function addRow(tabObj,colNum,sorPos,targPos)...{ var nTR = tabObj.insertRow(tabObj.rows. length-targPos); // 指定されたテーブルの //指定された位置に新しい行を挿入します。

var TRs = tabObj.getElementsByTagName('TR') // 指定されたテーブルから TRs コレクションを取得します。 >var sorTR = TRs [sorPos]; // sorTR を配置します

var TDs = sorTR.getElementsByTagName('TD') // 指定された行から TD コレクションを取得します
if(colNum==0 || colNum) ==未定義 ||colNum==isNaN)...{
colNum=tabObj.rows[0].cells.length;

var ntd = new Array();新しい TD 配列を作成します
for(var i=0; intd[i] = nTR.insertCell() // 新しい TD を作成します。 cell
ntd [i].id = TDs[0].id; // TD の ID を新しいセルにコピーします。 注意: TD の
// サフィックスは
ntd[i] に指定する必要があります。 innerHTML = TDs[i ].innerHTML; // 対応する TD から ntd[i] の innerHTML の値をコピーします
}

}
/**//* この関数は、指定されたテーブル内の指定された行を削除するために使用されます
* tabObj: 指定されたテーブル
* targPos: ターゲット行の位置
* btnObj: 現在クリックされている画像削除ボタン
*
*/
function deleteRow(tabObj, targPos,btnObj)...{ //テーブル行を削除
for(var i =0; iif(tabObj.getElementsByTagName ('img') [i]==btnObj)...{
tabObj.deleteRow(i targPos)
}
}
}

;

フロントエンド コードの概要:
上記のコードで注意すべき点は、元の行 でスタイルを Display に設定していることです。 none 。これは、次の js で行を追加するために newTD.innerHTML = sourceTD.innerHTML メソッドが使用されているためです。つまり、既存の列のコンテンツが、新しく追加された列の innerHTML 属性に直接コピーされるため、「データ「ソース」は非表示です。「「オブジェクトは例外です」エラーのため、ユーザーは列を削除できません。

VBScript コード:

コードをコピー コードは次のとおりです:

<%
'###### Begin Transcation #####
conn.beginTrans ' トランザクションを開始します
sql = "insert into UserInfo(username,sex) names("
sql=sql& "'"& request("Name") &"',"
sql=sql&"'"& request("Sex") &"')"
Response.Write sql&"conn.execute(sql)

if request("ProjectName").count>0 then
dim maxid
maxid = 1
sql = "select max(id ) UserInfo の maxid として
set rs = conn.execute(sql)
maxid = rs("maxid")
rs.close
set rs = nothing


for i =1 to request("ProjectName").count
sql = "insert into ProjectInfo(uid,pname,pdesc,bdate,fdate) names("
sql=sql&""& maxid &", "
sql=sql&"'"& request("ProjectName")(i) &"',"
sql=sql&"'"& request("Desc")(i) &"',"
sql =sql&"'"& request("BDate")(i) &"',"
sql=sql&"'"& request("FDate")(i) &"')"
Response.Write " "&sql&"
"
conn.execute(sql)
next
end if

if conn.Errors.count > then ' If occus anyトランザクションでエラーが発生しました。トランザクションをロールバックします。
conn.RollBackTrans
else ' エラーでない場合は、トランザクションをコミットします。
conn.commitTrans
end if
conn.close
set conn = nothing

%>

バックエンド コードの概要:
複数のデータを取得する方法は、request("").count を呼び出し、カウントの数を使用して決定します。メインテーブルに挿入される子の数。テーブルにはその回数が記録されます。 データ操作の回数は不定であるため、データベース操作時に例外が発生し、データの不整合が生じるのを防ぐためです。当社ではトランザクション管理を使用しています。トランザクション管理には、原子性、一貫性などの特徴があります。データのセキュリティを保証できます。データベース操作の開始時に conn.beginTrans を呼び出してトランザクションを開きます。データ操作の終了時に、conn.Errors.count を使用して、トランザクション中にエラーが発生したかどうかを判断します。 .RollBackTrans はロールバックします。それ以外の場合は、トランザクションをコミットしてデータベース操作を完了します。

プレビュー:
図 1: データ入力ページに入り、「追加」ボタンをクリックして、図 2 に行を追加します

図 2: 別の行を追加し、図 3 にデータを入力します

図 3: 2 行のデータを追加した後、[送信] ボタンをクリックしてデータを送信します

図 4: フォームを送信すると、データベースはブラウザーで出力されたとおりにいくつかの SQL ステートメントを実行し、データがデータベースに正常に追加されます。

概要:
この記事では、JavaScript を使用してフロントエンドでユーザー入力データの列を動的に追加し、バックエンドで ASP テクノロジを使用してフロントエンドで追加されたデータをデータベースに挿入する方法について説明します。
ASP や Javascript を学習している方の参考になれば幸いです。
ご質問がございましたら、私に連絡してください。 この記事に関してコメントがあれば、批判や修正を大歓迎です。