前にフロントエンドにインタビューしていたとき、インタビューの質問に遭遇しました。当時は考えがなかったので、答えませんでした。今日、私はそれを整理してあなたと共有しました:
元の質問は次のとおりです。オブジェクトメソッドを使用して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>