テーブル編集操作を実現する js+Html
|
この記事では、テーブルの編集操作を実現するためのjs+Htmlの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 機能説明: ページをクリックするとセルが編集可能になります。内容を入力した後、セルのフォーカスが失われると、入力した内容が保存されます。
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8" />
<title>テーブルデータの編集</title>
<スタイル タイプ="text/css">
<!--
本文、div、p、ul、li、フォント、span、td、th{
フォントサイズ:10pt;
行の高さ:155%;
}
テーブル{
上境界線の幅: 1px;
右境界線の幅: 1px;
境界線の下の幅: 0px;
左境界線の幅: 1px;
ボーダー上部のスタイル: solid;
右境界線のスタイル: solid;
境界線下部スタイル: なし;
左境界線のスタイル: solid;
上の境界線の色: #CCCCCC;
右境界線の色: #CCCCCC;
境界線下部の色: #CCCCCC;
左境界線の色: #CCCCCC;
}
td{
境界線の下の幅: 1px;
境界線下部のスタイル: solid;
境界線下部の色: #CCCCCC;
}
.EditCell_TextBox {
幅: 90%;
境界線:1px実線 #0099CC;
}
.EditCell_DropDownList {
幅: 90%;
}
-->
</スタイル>
<スクリプト>
/**
* JS は編集可能なテーブルを実装します * 使用法: EditTables(tb1,tb2,tb2,......);
**/
// 複数のテーブルを編集するように設定する function EditTables(){
for(var i=0;i<arguments.length;i++){
SetTableCanEdit(引数[i]);
}
}
//テーブルを編集可能に設定する function SetTableCanEdit(table){
for(var i=1; i<table.rows.length;i++){
テーブルの行を編集可能に設定(i)
}
}
関数SetRowCanEdit(行){
for(var j=0;j<row.cells.length; j++){
//現在のセルが編集タイプを指定している場合は、編集が許可されます var editType = row.cells[j].getAttribute("EditType");
if(!editType){
//現在のセルが指定されていない場合は、現在の列で指定されているかどうかを確認します editType = row.parentNode.rows[0].cells[j].getAttribute("EditType");
}
if(編集タイプ){
row.cells[j].onclick = 関数 (){
EditCell(これ);
}
}
}
}
//指定されたセルを編集可能に設定する function EditCell(element, editType){
var editType = element.getAttribute("EditType");
if(!editType){
//現在のセルが指定されていない場合は、現在の列で指定されているかどうかを確認します。editType = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("EditType");
}
スイッチ(編集タイプ){
ケース「テキストボックス」:
テキストボックスを作成します(要素、要素.innerHTML);
壊す;
ケース「ドロップダウンリスト」:
ドロップダウンリストを作成します(要素);
壊す;
デフォルト：
壊す;
}
}
//セルの編集可能な入力ボックスを作成する function CreateTextBox(element, value){
// 編集状態をチェックし、すでに編集状態の場合はスキップします。var editState = element.getAttribute("EditState");
if(editState != "true"){
//テキスト ボックスを作成します var textBox = document.createElement("INPUT");
textBox.type = "テキスト";
textBox.className="EditCell_TextBox";
//テキストボックスの現在の値を設定する if (! value) {
値 = element.getAttribute("値");
}
テキストボックスの値 = 値;
//テキストボックスのフォーカス喪失イベントを設定する textBox.onblur = function () {
セルの編集をキャンセルします(this.parentNode、this.value);
}
//現在のセルにテキスト ボックスを追加します。ClearChild(element);
要素に子要素を追加します(テキストボックス)。
テキストボックス.focus();
テキストボックスを選択します。
//状態変数を変更します。element.setAttribute("EditState", "true");
要素.parentNode.parentNode.setAttribute("CurrentRow", 要素.parentNode.rowIndex);
}
}
//セルの選択ボックスを作成する function CreateDropDownList(element, value){
// 編集状態をチェックし、すでに編集状態の場合はスキップします。var editState = element.getAttribute("EditState");
if(editState != "true"){
// 下のフレームを作成します var downList = document.createElement("Select");
downList.className="EditCell_DropDownList";
//リスト項目を追加します var items = element.getAttribute("DataItems");
if(!items){
項目 = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("DataItems");
}
if(アイテム){
項目 = eval("[" + 項目 + "]");
for(var i=0; i<items.length; i++){
var oOption = document.createElement("OPTION");
oOption.text = items[i].text;
oOption.value = items[i].value;
downList.options.add(oOption);
}
}
//リストの現在の値を設定する if (! value) {
値 = element.getAttribute("値");
}
downList.value = 値;
//次のフレームのフォーカス喪失イベントを設定する downList.onblur = function (){
セルの編集をキャンセルします(this.parentNode、this.value、this.options[this.selectedIndex].text);
}
//現在のセルに下フレームを追加します。ClearChild(element);
要素に子要素を追加します(downList)。
ダウンリストにフォーカスを当てます。
//状態の変更を記録します element.setAttribute("EditState", "true");
要素.parentNode.parentNode.setAttribute("LastEditRow", 要素.parentNode.rowIndex);
}
}
//セル編集をキャンセルする function CancelEditCell(element, value, text){
要素.setAttribute("値", 値);
if(テキスト){
要素.innerHTML = テキスト;
}それ以外{
要素.innerHTML = 値;
}
要素.setAttribute("EditState", "false");
//数式計算があるかどうかを確認します CheckExpression(element.parentNode);
}
// 指定されたオブジェクトのすべての子ノードをクリアします。 function ClearChild(element) {
要素.innerHTML = "";
}
//行を追加する関数 AddRow(table, index){
var lastRow = table.rows[table.rows.length-1];
var newRow = lastRow.cloneNode(true);
//新しく追加された行のシリアル番号を計算するには、jQuery jar パッケージをインポートする必要があります var startIndex = $.inArray(lastRow,table.rows);
var endIndex = table.rows;
テーブル.tBodies[0].appendChild(新しい行);
newRow.cells[0].innerHTML=endIndex-startIndex;
新しい行を編集可能に設定
新しい行を返します。
}
//行を削除する関数DeleteRow(table, index){
for(var i=table.rows.length - 1; i>0;i--){
var chkOrder = table.rows[i].cells[0].firstChild;
if(chkOrder){
if(chkOrder.type = "チェックボックス"){
if(chkOrder.checked){
//削除を実行します。table.deleteRow(i);
}
}
}
}
}
//テーブルの値をJSON形式で抽出する function GetTableData(table){
var tableData = 新しい配列();
alert("行数: " + table.rows.length);
for(var i=1; i<table.rows.length;i++){
tableData.push(GetRowData(tabProduct.rows[i]));
}
tableData を返します。
}
//指定された行のデータをJSON形式で抽出する function GetRowData(row){
var rowData = {};
for(var j=0;j<row.cells.length; j++){
名前 = row.parentNode.rows[0].cells[j].getAttribute("名前");
if(名前){
var 値 = row.cells[j].getAttribute("値");
if(!値){
値 = row.cells[j].innerHTML;
}
rowData[名前] = 値;
}
}
//アラート("ProductName:" + rowData.ProductName);
//または次のようになります: alert("ProductName:" + rowData["ProductName"]);
rowData を返します。
}
// 現在のデータ行で実行する必要があるフィールドをチェックします function CheckExpression(row){
for(var j=0;j<row.cells.length; j++){
expn = row.parentNode.rows[0].cells[j].getAttribute("式");
//数式が指定されている場合は計算が必要です if (expn) {
var result = Expression(行、expn);
var format = row.parentNode.rows[0].cells[j].getAttribute("Format");
if(フォーマット){
// フォーマットが指定されている場合は、テキスト値をフォーマットします row.cells[j].innerHTML = formatNumber(Expression(row,expn), format);
}それ以外{
row.cells[j].innerHTML = 式(行、expn);
}
}
}
}
//計算が必要なフィールドを計算する function Expression(row, expn){
var rowData = GetRowData(行);
//ループ値の計算 for(var j=0;j<row.cells.length; j++){
名前 = row.parentNode.rows[0].cells[j].getAttribute("名前");
if(名前){
var reg = 新しい RegExp(名前、"i");
expn = expn.replace(reg, rowData[name].replace(/\,/g, ""));
}
}
eval(expn) を返します。
}
///
/**
* 数値表示モードの書式設定 * 使用法 * formatNumber(12345.999,'#,##0.00');
* フォーマット番号(12345.999,'#,##0.##');
* フォーマット番号(123,'000000');
* @param 数値
* @param パターン
*/
/* 以下は例です formatNumber('','')=0
フォーマット番号(123456789012.129,null)=123456789012
フォーマット番号(null,null)=0
フォーマット番号(123456789012.129,'#,##0.00')=123,456,789,012.12
フォーマット番号(123456789012.129,'#,##0.##')=123,456,789,012.12
フォーマット番号(123456789012.129,'#0.00')=123,456,789,012.12
フォーマット番号(123456789012.129,'#0.##')=123,456,789,012.12
フォーマット番号(12.129,'0.00')=12.12
フォーマット番号(12.129,'0.##')=12.12
フォーマット番号(12,'00000')=00012
フォーマット番号(12,'#.##')=12
フォーマット番号(12,'#.00')=12.00
フォーマット番号(0,'#.##')=0
*/
関数formatNumber(num,pattern){
var strarr = num?num.toString().split('.'):['0'];
var fmtarr = pattern?pattern.split('.'):[''];
var retstr = '';
// 整数部分 var str = strarr[0];
var fmt = fmtarr[0];
var i = str.length-1;
var カンマ = false;
for(var f=fmt.length-1;f>=0;f--){
スイッチ(fmt.substr(f,1)){
場合 '＃'：
i>=0 の場合、 retstr = str.substr(i--,1) + retstr;
壊す;
ケース '0':
i>=0の場合、retstr = str.substr(i--,1) + retstr;
それ以外の場合、retstr = '0' + retstr;
壊す;
場合 '、'：
カンマ = true;
retstr=','+retstr;
壊す;
}
}
i>=0の場合{
if(カンマ){
var l = str.length;
for(;i>=0;i--){
retstr = str.substr(i,1) + retstr;
if(i>0 && ((li)%3)==0) retstr = ',' + retstr;
}
}
そうでない場合、retstr = str.substr(0,i+1) + retstr;
}
retstr = retstr+'.';
// 小数部分を処理します str=strarr.length>1?strarr[1]:'';
fmt=fmtarr.length>1?fmtarr[1]:'';
私=0;
for(var f=0;f<fmt.length;f++){
スイッチ(fmt.substr(f,1)){
場合 '＃'：
i<str.length の場合、 retstr+=str.substr(i++,1);
壊す;
ケース '0':
i<str.length の場合、 retstr+= str.substr(i++,1);
それ以外の場合はretstr+='0';
壊す;
}
}
retstr.replace(/^,+/,'').replace(/\.$/,''); を返します。
}
</スクリプト>
</head>
<本文>
<フォーム id="form1" 名前="form1" メソッド="投稿" アクション="">
<h3>編集可能なテーブル</h3>
<テーブル幅="698" 境界線="0" セルパディング="0" セル間隔="0" id="tabProduct">
<tr>
<td width="32" align="center" bgcolor="#EFEFEF" Name="Num"><input type="checkbox" name="checkbox" value="checkbox" /></td>
<td width="186" bgcolor="#EFEFEF" Name="Num" EditType="TextBox">シリアル番号</td>
<td width="152" bgcolor="#EFEFEF" Name="ProductName" EditType="DropDownList" DataItems="{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'},{text:'D',value:'d'}">製品名</td>
<td width="103" bgcolor="#EFEFEF" Name="金額" EditType="TextBox">数量</td>
<td width="103" bgcolor="#EFEFEF" Name="価格" EditType="TextBox">単価</td>
<td width="120" bgcolor="#EFEFEF" Name="SumMoney" Expression="金額*価格" Format="#,###.00">合計</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox2" value="チェックボックス" /></td>
<td bgcolor="#FFFFFF">1</td>
<td bgcolor="#FFFFFF" 値="c">C</td>
<td bgcolor="#FFFFFF">0</td>
<td bgcolor="#FFFFFF">0</td>
<td bgcolor="#FFFFFF">0</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox22" value="チェックボックス" /></td>
<td bgcolor="#FFFFFF">2</td>
<td bgcolor="#FFFFFF" 値="d">D</td>
<td bgcolor="#FFFFFF">0</td>
<td bgcolor="#FFFFFF">0</td>
<td bgcolor="#FFFFFF">0</td>
</tr>
</テーブル>
<br />
<input type="button" name="送信" value="追加" onclick="AddRow(document.getElementById('tabProduct'),1)" />
<input type="button" name="Submit2" value="削除" onclick="DeleteRow(document.getElementById('tabProduct'),1)" />
<input type="button" name="Submit22" value="リセット" onclick="window.location.reload()" />
<input type="submit" name="Submit3" value="送信" onclick="GetTableData(document.getElementById('tabProduct'));return false;" />
</フォーム>
<script language="javascript" src="GridEdit.js"></script>
<スクリプト言語="javascript">
var tabProduct = document.getElementById("tabProduct");
// テーブルを編集可能に設定します // 一度に複数設定できます。例: EditTables(tb1,tb2,tb2,......)
テーブルを編集します(タブ製品);
</スクリプト>
</本文>
</html>効果は以下のとおりです。
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 起動エラー 1067 および文字セットを変更して再起動した後の無効な回復
>>: VMware 仮想マシンの NAT モードを構成する方法
推薦する
vue.js パッケージ化プロジェクトの後の空白ページの解決策
Vueに触れたばかりのパートナーの多くは、開発環境ではVueプロジェクトは正常であるが、パッケージ化...
HttpsページでBaiduシェアを使用するためのソリューション
サイト全体で https アクセスを有効にしてから、共有コードが利用できなくなり、有効になっていた小...
MYSQLは時間（年、月、日）フィールドを変更されていない時間、分、秒に置き換えます。分析例
書き方1： sas_order_supply_month_pay セットを更新 RECEIVE_TI...
シンプルな加算計算機の JavaScript 実装
この記事では、参考までに、加算計算機を実装するためのJavaScriptの具体的なコードを紹介します...
docker リモート API のワンクリック TLS 暗号化の実装
目次1. Docker の 2375 ポートを別のポートに変更します。これは一時的な対策にすぎません...
セマンティック HTML 構造の利点は何ですか?
1つ： 1.セマンティック タグは単なる HTML であり、CSS にはセマンティクスはありません...
Mysql 主キー UUID と自動増分主キーの違いと利点と欠点
導入私はしばらくの間、postgresql データベースを使用していました。クラウドに移行した後、自...
よくある MySQL テーブル設計エラーの概要
目次間違い1: データの列が多すぎる誤解2: 共同クエリが多すぎる誤解3: ENUMの代わりにSET...
VMware Workstation Pro 16 ライセンス キーと使用方法のチュートリアル
VMware Workstation は、開発、テスト、デモンストレーション、展開のために仮想マシン...
MySQLデータベースに他のIPアドレスからアクセスできない問題の解決策
序文先ほどのプロジェクトを参考にすると、環境は整いました。プロジェクトの準備と検証の段階で、問題が発...
MySQLテーブルパーティショニングプログラムを変更する方法
MySQLテーブルパーティショニングプログラムを変更する方法1. サブテーブルの実装の原則は次のとお...
MySQL テーブルがロックされているかどうかを照会する方法
具体的な方法： （推奨チュートリアル：MySQLデータベース学習チュートリアル）テーブルロックの状態...
Dockerイントラネット侵入FRP展開の実装プロセスの分析
1. 設定ファイルディレクトリを作成するcd /ホームディレクトリmkdir frp最終的なディレク...
MySql データ型チュートリアル例の詳細な説明
目次1. 概要2. MySQLデータ型の詳細な説明1) 文字列型2) 整数型3) 浮動小数点型4) ...
CentOS6で定期的にjarプログラムを実行するスクリプトをcrontabで実行する
1. 簡単なJavaプログラムを書く パブリッククラステストシェル{ パブリック静的voidメイン(...