js動的作成、テーブルの例示コードの削除

2000*5の表を作成します.各セルの内容は行番号+カンマ+列番号です.
方法1:createElementを使って表を作成し、insertRowとinsertCellを使って列を生成し、セルの内容はinnersHTML属性を使って塗りつぶします.
方法の2:createElementを使って表を生成し、CreateElementを使って列を生成し、セルの内容はcreateText Nodeを使って埋めます.
方法3:フォームinnerHTML属性の文字列をつづり合わせて、文字列+=操作文字列を使用します.
方法4:フォームinnerHTML属性の文字列をつなぎ合わせて、各文字列に配列の中を追加して、最後に配列のjoinメソッドを呼び出してターゲット文字列を生成します.
運転時間の比較:
方法運転時間(ms)
方法一93037
方法二3341
方法三2795
方法四500
具体的な手順は以下の通りです.

 
  
 
  
 
  
 
  
 
  <br><!-- 
  <br>function createTable() { 
  <br>var t = document.createElement('table'); 
  <br>for (var i = 0; i < 2000; i++) { 
  <br>var r = t.insertRow(); 
  <br>for (var j = 0; j < 5; j++) { 
  <br>var c = r.insertCell(); 
  <br>c.innerHTML = i + ',' + j; 
  <br>} 
  <br>} 
  <br>document.getElementById('table1').appendChild(t); 
  <br>t.setAttribute('border', '1'); 
  <br>} 
  <br>function createTable2() { 
  <br>var t = document.createElement('table'); 
  <br>var b = document.createElement('tbody'); 
  <br>for (var i = 0; i < 2000; i++) { 
  <br>var r = document.createElement('tr'); 
  <br>for (var j = 0; j < 5; j++) { 
  <br>var c = document.createElement('td'); 
  <br>var m = document.createTextNode(i + ',' + j); 
  <br>c.appendChild(m); 
  <br>r.appendChild(c); 
  <br>} 
  <br>b.appendChild(r); 
  <br>} 
  <br>t.appendChild(b); 
  <br>document.getElementById('table1').appendChild(t); 
  <br>t.setAttribute('border', '1'); 
  <br>} 
  <br>function createTable3() { 
  <br>var data = ''; 
  <br>data += '<table border=1><tbody>'; 
  <br>for (var i = 0; i < 2000; i++) { 
  <br>data += '<tr>'; 
  <br>for (var j = 0; j < 5; j++) { 
  <br>data += '<td>' + i + ',' + j + '</td>'; 
  <br>} 
  <br>data += '</tr>'; 
  <br>} 
  <br>data += '</tbody><table>'; 
  <br>document.getElementById('table1').innerHTML = data; 
  <br>} 
  <br>function createTable4() { 
  <br>var data = new Array(); 
  <br>data.push('<table border=1><tbody>'); 
  <br>for (var i = 0; i < 2000; i++) { 
  <br>data.push('<tr>'); 
  <br>for (var j = 0; j < 5; j++) { 
  <br>data.push('<td>' + i + ',' + j + '</td>'); 
  <br>} 
  <br>data.push('</tr>'); 
  <br>} 
  <br>data.push('</tbody><table>'); 
  <br>document.getElementById('table1').innerHTML = data.join(''); 
  <br>} 
  <br>function showFunctionRunTime(f) { 
  <br>var t1 = new Date(); 
  <br>f(); 
  <br>var t2 = new Date(); 
  <br>alert(t2 - t1); 
  <br>} 
  <br>//--> 
  <br> 
  
 
  
 
  
 
  
 
  
 
  <br>showFunctionRunTime(createTable); 
  <br>showFunctionRunTime(createTable2); 
  <br>showFunctionRunTime(createTable3); 
  <br>showFunctionRunTime(createTable4); 
  <br> 
  
 
  
 
  
 
 

1、inserRow()とinsertCell()関数
insertRow()関数はパラメータを持つことができます.形式は以下の通りです.
insertRow(index)
この関数は新しい行をindexの行の前に追加します.例えばinsertRow(0)は、新しい行を最初の行に追加する前です.デフォルトのinsertRow()関数はinsertRow(-1)に相当し、新しい行を表の最後に追加します.
insertCell()とinsertRowの用法は同じです.
2、動的設定属性とイベント
上のinnerHTMLとinnerTextはいずれも列の属性です.
innerTextは間に追加されたテキストで、innerHTMLは間に追加されたHTMLコードです.
他の属性を設定するのも同じです.例えば、行の背景色を設定します.
tr.bgColor='red'
Colspanのプロパティを設定します
td.co lSpan=3;
　　
イベントの設定も同じです.簡単な説明が必要です.
例えば、私は新しい行をクリックする時に自分で定義した関数newClickを実行させたいです.newClick関数は以下の通りです.
function newClick(){
alert(これは新しく追加された行です.)
どちら
Oclickイベントにこの関数を設定するコードは以下の通りです.
tr.onclick=newClick;
ここで主義が必要なのは、＝後の部分は関数名でなければならず、引用符をつけてはいけません.
newTr.onclick=newClick()
newTr.onclick='newClick'
newTr.onclick=「newClick」
上の書き方は全部間違っています.
下の書き方も正しいです.
newTr.onclick=function newClick()
alert(これは新しく追加された行です.)
)
テーブルを動的に削除
方法1:

 
  







 
  
 
  
 1 
    
 
  
 
  
 
  
 2 
    
 
  
 
  
 
  
 
  <br>function deleteRow (tableID, rowIndex) { 
  <br>var table =document.all[tableID] 
  <br>table.deleteRow(rowIndex); 
  <br>} 
  <br>function getRowNum(tableID){ 
  <br>var tab = document.all[tableID] 
  <br>//     
  <br>var rows = tab.rows.length ; 
  <br>//     
  <br>var cells = tab.rows.item(0).cells.length ; 
  <br>} 
  <br> 
  
 
 

方法2:

 
  







 
  
 
  
 1 
    
 
  
 
  
 
  
 2 
    
 
  
 
  
 
  
 
  <br>function deleteRow (obj) { 
  <br>obj.parentElement.removeChild(obj); 
  <br>} 
  <br>