会社のインターンさんからテーブルの追加と削除について質問されましたが、jQueryを使って実装するのはとても簡単でした。また、jQuery を使用せずに js のみを使用して実装する方法についても尋ねました。
このような状況に直面したとき、私の通常のアプローチは「理解できないが、サポートする」です。
私は jQuery をよく使ってきましたが、人々はあまりにも怠け者ですが、この操作を実装するのに依然として js を使用していましたが、問題は IE との互換性にあると思います。 。 。
コードを見つけるだけの場合は、分析プロセスをスキップできます。完全なコードは記事の最後に添付されています。
以下はコーディングプロセスです:
HTML構造コード
いくつかの簡単なスタイルが追加された基本的なテーブル構造、作成、クリア、および1つの予約に対応する3つのボタン。
<!DOCTYPE HTML>
<html>
<head>
<title>table</title>
<meta charset='utf-8' />
<style type="text/css">
table.base{
border-collapse:collapse;
text-align: center;
border: 1px solid black;
}
table, tr, td, th{
border: 1px solid black;
}
</style>
</head>
<body>
<div id="main-content">
<table id="main-table" class="base">
<thead>
<tr>
<th colspan="3">This is a table for operations by javascript</th>
</tr>
<tr>
<th>
<input type="button" value="CREATE" id="cp_btn" onclick="createTr()" />
</th>
<th>
<input type="button" value="CLEAR" id="cl_btn" onclick="clearTrs()" />
</th>
<th>
<input type="button" value="GUESS" id="cl_btn"/>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>Constructor(擬似コンストラクター)
検討すると、隠しtrを作成し、このtrを元に作成操作を行います。 HTML の全体的な構造を壊さないようにするために、js を通じて tr オブジェクトを生成し、ページに追加することにしました。
ページが読み込まれた後に DOM 操作を実行するには、コードの下部の