前にフロントエンドにインタビューしていたとき、インタビューの質問に遭遇しました。当時は考えがなかったので、答えませんでした。今日、私はそれを整理してあなたと共有しました：
元の質問は次のとおりです。オブジェクトメソッドを使用して2x2テーブルを作成し、2列目と2番目の列セルのボタンが必要です。このボタンをクリックすると、最初の行の値と2行目の最初の列の値、および2行目の最初の列の値が次の図を参照してください。
テーブルを作成します
[効果]をクリックします
私は愚かです。より良い方法があるなら、教えてください。私はそれについて長い間考えてきましたが、ついにいくつかの結果が得られました：
1.テーブルオブジェクトを作成します
コードコピーは次のとおりです。
<！doctype html>
<html lang = "en">
<head>
<メタcharset = "utf-8">
<title> document </title>
<style>
テーブルTD {Text-Align：Center;}
</style>
</head>
<body>
<h2>オブジェクトを使用してテーブルを作成します</h2>
<スクリプト>
var table = {
value1： "value1"、
value2： "value2"、
行：2、
セル：2、
create：function（）{
//テーブルを作成します
var table = document.createelement（ "table"）;
table.border = 1;
table.width = "500";
//ボタンを作成します
var button = document.createelement（ "button"）;
button.innerhtml = "switch";
button.name = "qiehuan";
button.setattribute（ "onclick"、 "qiehuan（）"）;
//行を作成します
for（var i = 0; i <this.row; i ++）{
table.insertrow（）;
}
//列を作成します
for（var i = 0; i <this.cell; i ++）{
table.rows [i] .insertcell（）;
table.rows [i] .insertcell（）;
}
//ボディにテーブルを追加します
document.body.AppendChild（表）;
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（）;
</script>
</body>
</html>
テーブルメソッドを作成する効果は次のとおりです。
クリックしてコードを切り替えます：
コードコピーは次のとおりです。
関数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。アイデア/名前/性別をクリックしてソートを変更したい：
オリジナル
効果
コード：
コードコピーは次のとおりです。
<！doctype html>
<html lang = "en">
<head>
<メタcharset = "utf-8">
<title> document </title>
</head>
<body>
<表>
<th colspan = "3">クリックしてコンテンツを置き換える</th>
<tr>
<td id = "id"> id </td>
<td id = "name"> name </td>
<td> <span id = "sex"> sex </span> </td>
</tr>
<tr>
<td> 1 </td>
<td> a </td>
<td>男性</td>
</tr>
<tr>
<td> 2 </td>
<td> b </td>
<td>女性</td>
</tr>
</table>
<スクリプト>
//バインディング効果---私は無効です
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）;
}
</script>
<br>
</body>
</html>