ホームページ > ウェブフロントエンド > jsチュートリアル > jsはテーブル内のTdの値を変更します(tdのダブルクリックイベントを定義)_javascriptスキル

jsはテーブル内のTdの値を変更します(tdのダブルクリックイベントを定義)_javascriptスキル

WBOY
リリース: 2016-05-16 17:44:10
オリジナル
1685 人が閲覧しました

顧客のニーズが第一です。
今回は変更されたコードで、「OK」ボタンと「キャンセル」ボタンを削除します。シングルクリック イベントをダブルクリック イベントに変更し、ユーザーが ESC キーを押して変更をキャンセルします。

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

//ダブルクリック イベントを追加しますeach Td
function ReWritable()
{
var tbmian=document.getElementById("tbmain");
//ループ、各行と列にダブルクリック イベントを追加しますが、最初の行 (thead) と最後の行 (tfoot) は追加されません。
for(var i=1;i{
for(var j=0;j{
tbmain.rows[i].cells[j].ondblclick=TdDoubleClick;
}
}
}
// td のダブルクリック イベントを定義し、 add it ユーザーが入力できるテキストボックス。
function TdDoubleClick()
{
//最初にテキスト ボックスが既に正方形に存在するかどうかを判断し、存在する場合はリターンし、テキスト ボックスを繰り返し追加しません。存在しない場合は追加します。
var tdcag=document.getElementById("tdcag");
var tdid=null;
var curtd=window.event.srcElement; =null)//すでに存在します。戻ります。
{
return;
}
// 存在しない場合は、
tdid=window.event.srcElement;
tdtxt=tdid.innerText; を追加します。 Trim( tdtxt);
var str="
";
str ="";
str ="
";
tdid.innerHTML=str;
//テキストボックスにフォーカスを与えます。
document.getElementById("txtId").focus();
var ctr=document.getElementById("txtId").createTextRange();
ctr.collapse(false); select();
}
//文字列の前後のスペースを削除します。
function Trim(str)
{
return str.replace(/(^s*)|(s*$)/g, "");
}
//KeyPress を定義ESC キーの場合、押されたときのイベントは変更をキャンセルし、変更前の値に戻します。
document.onkeypress = function EscKeyPress()
{
if(event.keyCode==27)
{
CancelTdChanged()
}
}
//変更をキャンセルします、
function CancelTdChanged()
{
var tdInitValue=document.getElementById("tdInitValue");
var tdtxt=tdInitValue.value; =document.getElementById("tdcag").parentNode;
tdid.innerText=Trim(tdtxt);
}
// 変更を確認します。
function ChangeTdText()
{
var txtId=document.getElementById("txtId");
if(txtId==null)
{
return;
}
var tdid=document.getElementById("tdcag") .parentNode;
tdid.innerText=Trim(txtId.value);
return;
}


その他のコードは前と同じです。テーブルの Thead と Tfoot への変更をキャンセルするだけです。



コードをコピー

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート