Javascriptはtd_javascriptスキルの値の切り替えを実現します

フロントエンドの面接中に質問に遭遇しましたが、その時は何も考えていなかったので、今日はそれを整理して共有しました。

元の質問は次のとおりです。オブジェクト メソッドを使用して 2x2 テーブルを作成し、2 行目と 2 列目のセルにボタンが必要です。このボタンをクリックすると、1 行目と 1 列目の値が になります。 2 番目と同じ行の最初の列の値を交換します。下の図を参照してください

フォームの作成

クリック効果

私は愚かです。もっと良い方法があれば教えてください。私は長い間考えて、最終的にいくつかの結果を得ました。

1. テーブルオブジェクトを作成します

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

<頭>


<スタイル>
テーブル td{text-align: center;}

オブジェクトを使用してテーブルを作成する

<スクリプト>
var table={
値1:"値1",
値2:"値2",
行:2、
セル:2、
create:function(){
//テーブルを作成
var table=document.createElement("table");
table.border=1;
table.width="500"; //作成ボタン
var button=document.createElement("button"); button.innerHTML="スイッチ";
button.name="qiehuan";
button.setAttribute("onclick","qiehuan()");
//行を作成
for(var i=0;i table.insertRow();
}
//列を作成
for(var i=0;i table.rows[i].insertCell();
table.rows[i].insertCell();
}
//ボディにテーブルを追加
Document.body.appendChild(table);
var table=document.getElementsByTagName("table")[0];
var row1=table.rows[0];
var row2=table.rows[1];
table.rows[1].cells[1].appendChild(button);
var a=row1.cells[0].innerHTML=this.value1;
var b=row2.cells[0].innerHTML=this.value2;
}
}
table.create();

テーブル作成方法によって達成される効果は次のとおりです:

クリックしてコードを切り替えます:

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

関数 qiehuan(){
//テーブルを取得
var table=document.getElementsByTagName("table")[0];
//tr
を取得します var row1=table.rows[0];
var row2=table.rows[1];
//コンテンツを交換します
// データを保存する新しい要素を作成します
var a=row1.cells[0].innerHTML;
var b=row2.cells[0].innerHTML;
row1.cells[0].innerHTML=b;
row2.cells[0].innerHTML=a;

}

切り替えボタンをクリックすると次のような効果が得られます:

内線番号:

1. ID/名前/性別をクリックして並べ替えを変更したい:

オリジナル

効果

コード:

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

<頭>




<テーブルボーダー="1" 幅="500">
クリックしてコンテンツを置換

id
名前
                                                                                           

1
a
                                                            

2
b
                                                           

<スクリプト>
//バインディング効果---ie
では無効 Document.getElementById('id').addEventListener('click', f_switch, false);
Document.getElementById('name').addEventListener('click', f_switch, false);
Document.getElementById('sex').addEventListener('click', f_switch, false);
関数 f_switch(){
//テーブルを取得
var table=document.getElementsByTagName("table")[0];
//行要素を取得
var row1=table.rows[2];
var row2=table.rows[3];
//方法 1
// データを保存する新しい要素を作成します
var newrow=document.createElement("tr");
var newhtml=newrow.innerHTML=row2.innerHTML;
var newrow2=document.createElement("tr");
var newhtml2=newrow2.innerHTML=row1.innerHTML;
//
を置き換えます row1.innerHTML=newhtml;
row2.innerHTML=newhtml2;
//方法 2
//わかりません....次の文で実現できます
//table.appendChild(row1);
}