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

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

WBOY

リリース： 2016-05-16 17:44:10

オリジナル

1691 人が閲覧しました

顧客のニーズが第一です。
今回は変更されたコードで、「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 への変更をキャンセルするだけです。

コードをコピー

コードは次のとおりです: < td>thead,thead

tr>

32

>tfoot,tfoot,tfoot
11 /td>	13 21
33 🎜>