今のところテーブルのCSS制御については話しません。まず、以下の表で一般的に使用されるDOMを共有します。
テーブル操作を追加するための一般的に使用される方法は、Insertrow（）およびInsertCell（）メソッドです。
行はゼロから計算されます。たとえば、：
次のようにコードをコピーします：var otr = document.getElementById（ "メンバー"）。insertrow（2）
2行目に新しい行を追加することを意味します。
コードコピーは次のとおりです。
var atext = new Array（）;
atext [0] = document.createTextNode（ "Fresheggs"）;
atext [1] = document.createTextNode（ "w610"）;
atext [2] = document.createTextNode（ "11月5日"）;
atext [3] = document.createTextNode（ "scorpio"）;
atext [4] = document.createTextNode（ "1038818"）;
for（var i = 0; i <atext.length; i ++）{
var otd = otr.insertcell（i）;
otd.appendChild（atext [i]）;
}
変数OTRはテーブルの新しい行を挿入し、InsertCellを使用してこの行の新しいデータを挿入し、CreateTextNodeを使用して新しいテキストノードを作成し、AppendChildでOTDにそれを与え、OTDは新しいセルです。
1。行を挿入します（動的追加テーブル）
コードコピーは次のとおりです。
<script type = "text/javascript">
window.onload = function（）{
var otr = document.getElementById（ "メンバー"）。insertrow（2）; //行を挿入します
var atext = new Array（）;
atext [0] = document.createTextNode（ "Fresheggs"）;
atext [1] = document.createTextNode（ "w610"）;
atext [2] = document.createTextNode（ "11月5日"）;
atext [3] = document.createTextNode（ "scorpio"）;
atext [4] = document.createTextNode（ "1038818"）;
for（var i = 0; i <atext.length; i ++）{
var otd = otr.insertcell（i）;
otd.appendChild（atext [i]）;
}
}
</script>
<表の概要= "EE日曜日のメンバーのリスト" id = "メンバー">
<キャプション>メンバーリスト</caption>
<tr>
<th scope = "col"> name </th>
<th scope = "col"> class </th>
<th scope = "col">誕生日</th>
<th scope = "col">星座</th>
<th scope = "col">モバイル</th>
</tr>
<tr>
<td> isaac </td>
<td> w13 </td>
<td> 6月24日</td>
<td>がん</td>
<td> 1118159 </td>
</tr>
<tr>
<td> girlwing </td>
<td> w210 </td>
<td> 9月16日</td>
<td>乙女座</td>
<td> 1307994 </td>
</tr>
<tr>
<td> stastestory </td>
<td> w15 </td>
<td> 11月29日</td>
<td>射手座</td>
<td> 1095245 </td>
</tr>
</table>
2。テーブルのコンテンツを変更します
テーブルが作成された後、htmldomを使用してテーブルを操作することができます。これはdocument.getelementbyid（）およびdocument.getelementsbytagname（）よりも便利です。
otable.rows [i] .cell [j]
上記は、2つの属性の行とセル（両方とも0からカウント）を介して、テーブルのi番目の列とj番目の列に簡単にアクセスできます。セルオブジェクトを取得した後、innerhtml属性を使用してxiangyuのコンテンツを変更できます。
たとえば、4列と5列のコンテンツを良いように変更する
次に、次のコードを使用できます
コードコピーは次のとおりです。
var otable = document.getElementById（ "table1"）;
otable.rows [4] .cells [5] .innerhtml = "good";
3.テーブルの内容を削除します
テーブルには追加、変更、削除の機能があるためです。
テーブル内の行の削除は、leterow（i）メソッドを使用します。ここで、私は行番号です。
テーブル内の列の削除は、trのdeletecell（j）メソッドを使用します。
次のコードは、削除されたテーブルの2番目の行と元のテーブルの3行目の2番目の列を示します
コードコピーは次のとおりです。varotable = document.getElementById（ "table1"）; otable.deleterow [2]; otable.rows [2] .deletecell [3];
次のコードは、テーブルの2番目の行が削除され、元のテーブルの3番目の行の2番目の列が動的削除があり、全体的なHTMLフレームワークに影響しないと見なされる場合、またはテーブルコンテンツが大きい場合、動的削除と追加を採用できることを示しています。
コードコピーは次のとおりです。
<script type = "text/javascript">
window.onload = function（）{
var otr = document.getElementById（ "メンバー"）。insertrow（2）; //行を挿入します
var atext = new Array（）;
atext [0] = document.createTextNode（ "Fresheggs"）;
atext [1] = document.createTextNode（ "w610"）;
atext [2] = document.createTextNode（ "11月5日"）;
atext [3] = document.createTextNode（ "scorpio"）;
atext [4] = document.createTextNode（ "1038818"）;
for（var i = 0; i <atext.length; i ++）{
var otd = otr.insertcell（i）;
otd.appendChild（atext [i]）;
}
}
</script>
<表の概要= "EE日曜日のメンバーのリスト" id = "メンバー">
<キャプション>メンバーリスト</caption>
<tr>
<th scope = "col"> name </th>
<th scope = "col"> class </th>
<th scope = "col">誕生日</th>
<th scope = "col">星座</th>
<th scope = "col">モバイル</th>
</tr>
<tr>
<td> isaac </td>
<td> w13 </td>
<td> 6月24日</td>
<td>がん</td>
<td> 1118159 </td>
</tr>
<tr>
<td> girlwing </td>
<td> w210 </td>
<td> 9月16日</td>
<td>乙女座</td>
<td> 1307994 </td>
</tr>
<tr>
<td> stastestory </td>
<td> w15 </td>
<td> 11月29日</td>
<td>射手座</td>
<td> 1095245 </td>
</tr>
</table>
列を削除します
コードコピーは次のとおりです。
関数deletecolumn（otable、inum）{
//列の削除関数をカスタマイズします。つまり、各行の対応するセルを削除します
for（var i = 0; i <otable.rows.length; i ++）
otable.rows [i] .deletecell（inum）;
}
window.onload = function（）{
var otable = document.getElementById（ "table1"）;
deletecolumn（otable、2）;
}
テーブル列を削除するには、DOMに直接呼ばれる方法はありません。 deletecolumn（）メソッドを自分で記述する必要があります。このメソッドは2つのパラメーターを受け入れます。1つのパラメーターはテーブルオブジェクト、もう1つのパラメーターは削除する列番号です。ライティング方法は非常に簡単です。 deleteCell（）メソッドを使用して、各行はセルを削除する対応する方法を実行します。