ホームページ >ウェブフロントエンド >jsチュートリアル >jsでテーブル内のTdの値を変更する(tdのクリックイベントを定義)_javascriptスキル
jsでテーブル内のTdの値を変更する(tdのクリックイベントを定義)_javascriptスキル
- WBOYオリジナル
- 2016-05-16 17:44:081424ブラウズ
プロジェクトの完了後、テストと承認中に、ユーザーが突然、印刷を容易にするためにクエリ結果を変更できると提案しました。エンジニアリングエラーを隠す。しかし、この時点でリクエストするのは面倒だったので、後で考えて、次の関数をプロジェクトの JS ファイルに追加する限り、問題は発生しません。解決しました。
コードをコピーします コードは次のとおりです:
/*
ページがロードされると、td ごとにクリック イベントが追加されるため、各ページに変更を加える必要はありません。
*/
function ReWritable()
{
var tbmian=document.getElementById("tbmain");
for(var i=0;i
for(var j=0;j
/*
クリック イベント属性を追加します。ここでは setAttribute メソッドは使用できません。
*/
tbmain.rows[i].cells[j].onclick=AddObjOfText;
}
}
}
/*
クリックイベント、Td を追加コンテンツは Div に更新され、ユーザーが新しい Td 値を入力するためのテキスト、
OK ボタン、およびユーザーの入力を保存またはキャンセルするためのキャンセル ボタンがロードされます。
ユーザーがキャンセルしたときに復元できるように、ユーザーが新しい値を入力する前に Td の値を保存する Hidden。
*/
関数 AddObjOfText()
{
var tdcag=document.getElementById("tdcag");
if(tdcag!=null)
{
return;
}
var tdid=window.event.srcElement;
var tdtxt=tdid.innerText;
var str="
";
str ="";
str ="";
str ="";
str ="
"; str ="";
str ="";
str ="";
str ="
tdid.innerHTML=str;
}
/*
に非表示の値を割り当てますTd
*/
関数 CancelTdChanged()
{
var tdInitValue=document.getElementById("tdInitValue");
var tdtxt=tdInitValue.value; getElementById ("tdcag").parentNode;
tdid.innerText=tdtxt;
}
/*
ユーザーの変更を保存し、Td にテキスト値を割り当てます
*/
関数 ChangeTdText ( )
{
var txtId=document.getElementById("txtId");
var tdid=document.getElementById("tdcag").parentNode; 🎜 >}
このようにして、ページの に onload イベントを追加し、次のようにその値を ReWritable() に割り当てます。
コードをコピーします
コードは次のとおりです。 >
| 11 | >12 |
| 22 | 23
| 33 > |