この記事の例では、js を使用してテーブルを動的に追加、削除、更新する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。 コードをコピー コードは次のとおりです: 表格操作 <br> ボディ { <br> フォントサイズ: 13px; <br> 行の高さ: 25px; <br> } <br> テーブル { <br> ボーダートップ: 1px ソリッド #333; <br> ボーダーボトム: 1px ソリッド #333; <br> 幅: 300ピクセル; <br> } <br> td { <br> ボーダー右: 1px ソリッド #333; <br> ボーダーボトム: 1px ソリッド #333; <br> } <br> .title { <br> テキスト整列: 中央; <br> フォントの太さ: 太字; <br> 背景: #ccc; <br> } <br> .center { <br> テキスト整列: 中央; <br> } <br> #displayInfo { <br> 色: 赤; <br> } <br> </スタイル> <br> <スクリプトタイプ="text/javascript"> <br> function addRow() { //增加一行 <br> var tableObj = document.getElementById('myTable'); <br> var rowNums = tableObj.rows.length; <br> var newRow = tableObj.insertRow(rowNums); <br> varcol1 = newRow.insertCell(0); <br> Col1.innerHTML = "幸福从天而降"; <br> varcol2 = newRow.insertCell(1); <br> Col2.innerHTML = "$18.5"; <br> Col2.align = "中心"; <br> var divInfo = document.getElementById('displayInfo'); <br> divInfo.innerHTML = "添加商品成功"; <br> } <br> function delRow() { //删除第二行 <br> document.getElementById('myTable').deleteRow(1); <br> var divInfo = document.getElementById('displayInfo'); <br> divInfo.innerHTML = "删除商品成功"; <br> } <br> function updateRow() { //行の情報を更新します <br> var uRow = document.getElementById('myTable').rows[0]; <br> uRow.className = "タイトル"; <br> } <br> </スクリプト> <br> </head> <br> <br> <table border="0" cellpadding="0" cellpacing="0" id="mytable"> <br> <tr id="row1"> <br> <td>书名</td> <br> <td>价格</td> <br> </tr> <br> <tr id="row2"> <br> <td>見ることができる景色の房の間</td> <br> <td class="center">$30.00</td> <br> </tr> <br> <tr id="row3"> <br> <td>60瞬间</td> <br> <td class="center">$32.00</td> <br> </tr> <br> </テーブル> <br> <input name="b1" type="button" value="增加一行" onclick="javascript:addRow();"/><br /> <br> <input name="b2" type="button" value="删除第二行" onclick="javascript:delRow();"/><br /> <br> <input name="b3" type="button" value="修改标题" onclick="javascript:updateRow();"/><br /> <br> <div id="表示情報"></div> <br> </ボディ> <br> </html> <br> </div> <p> ここで説明されている大家向けの JavaScript プログラムの設計が役立つことを望みます。</p>
