無法在javascript中正確添加行到表格

Question

行將添加到表格中，但樣式和其他設置不起作用。我不得不求助於使用適用於某些項目的innerXml ...但由於某種原因，這對於隱藏列和行樣式都有效。

通知表最初使用Razor創建。一個按鈕啓動AddRow。

我明白任何幫助？

function AddRow() { 
    var ctl = document.getElementById("Table101"); 

    if (ctl != null) { 
     var rowCount = ctl.rows.length; 
     var i = 0; 
     var row = document.createElement("tr"); 

     row.id = "Row".concat((rowCount).toString()); 
     row.style = 'border: 1px solid #C0C0C0;'; 
     row.innerHTML = '<tr row="Row'.concat((rowCount).toString()).concat('" style="border: 1px solid #C0C0C0;">'); 

     // Id hide me...Id for new items is always 0000 
     var e0 = document.createElement("input"); 
     e0.id = "Id".concat((rowCount).toString()); 
     e0.type = "text"; 
     e0.value = "0000"; 
     e0.style = "display: none;"; 
     e0.innerHTML = '<td id="Id'.concat((rowCount).toString()).concat('" sytle="display: none;" value="0000"><input type="text">0000</td>'); 
     var c0 = row.insertCell(i++); 
     c0.style = "display: none;"; 
     c0.value = "0000"; 
     c0.appendChild(e0); 

     // checkbox 
     var e1 = document.createElement("input"); 
     e1.id = "Checkbox".concat((rowCount).toString()); 
     e1.type = "checkbox"; 
     e1.class = "chkBox"; 
     e1.style = "float:left; border: 1px solid #C0C0C0;"; 
     e1.innerHTML = '<td style="border: 1px solid #C0C0C0; width: 15px; height: 15px; max-width: 15px;"><input type="checkbox" style="float: left;" id="Checkbox'.concat((rowCount).toString()).concat('" class="chkBox"></td>'); 
     var c1 = row.insertCell(i++);    
     c1.style = "border: 1px solid #C0C0C0; width: 25px; height: 15px; max-width: 15px;"; 
     c1.appendChild(e1); 

     // region 
     var e2 = document.createElement("input"); 
     e2.type = "select-one"; 
     e2.style = "border: 1px solid #C0C0C0; width: 100px; height: 15px; max-width: 15px; "; 
     e2.innerHTML = '<td style="border: 1px solid #C0C0C0; width: 100px; height: 15px; max-width: 15px;"><input type="select-one"></td>'; 
     var c2 = row.insertCell(i++);    
     c2.style = "border: 1px solid #C0C0C0; width: 100px; height: 15px; max-width: 15px;"; 
     c2.appendChild(e2); 

     ctl.appendChild(row); 
    } 
} 

更新基於邁克爾的建議......但是格式化不同時使用列的樣式屬性和的innerHTML運行良好（如下圖所示）。其中一個，其他都不起作用。

function AddRow() { 
    var ctl = document.getElementById("Table1"); 

    if (ctl != null) { 
     var rowCount = ctl.rows.length;   
     var row = document.all("Table1").insertRow(); 

     row.id = "Row" + rowCount.toString(); 
     row.style = 'border: 1px double #C0C0C0;'; 

     // Id -- hidden 
     c0 = row.insertCell(); 
     c0.style = "display: none;"; 
     c0.value = "0000"; 
     c0.innerHTML = '<input type="text" style="display: none;" value=0000>'; 

     // checkbox 
     c1 = row.insertCell(); 
     c1.style = "border: 1px double #C0C0C0; width: 25px; height: 15px; max-width: 15px;"; 
     c1.innerHTML = '<input type="checkbox" style="position: relative; left: 0px;" id="Checkbox' + rowCount.toString() + '" class="chkBox">'; 

     c2 = row.insertCell(); 
     c2.style = "border: 1px double #C0C0C0; width: 100%; height: 15px; max-width: 15px;"; 
     c2.innerHTML = '<input type="text" style="border: 1px double #C0C0C0; width: 100%; height: 15px; max-width: 15px;">'; 

     c3 = row.insertCell(); 
     c3.style = "border: 1px double #C0C0C0; width: 100%; height: 15px; max-width: 15px; background-color: #FFFFFF;"; 
     c3.innerHTML = '<input type="text" style="border: 1px double #C0C0C0; width: 100px; height: 15px; max-width: 15px;">'; 

     c4 = row.insertCell(); 
     c4.style = "border: 1px double #C0C0C0; width: 100%; height: 15px; max-width: 15px;"; 
     c4.innerHTML = '<input type="text" style="border: 1px double #C0C0C0; width: 100%; height: 15px; max-width: 15px;">'; 

    } 
} 

Answer 1

表有自己的方法 - 您使用InsertRow創建一個新行並在行上插入細胞以創建一個新細胞。一個例子可以發現here。

此外，您不通過style設置樣式。相反，你要麼設置單獨的屬性，如：

c1.style.border = '1px solid #C0C0C0'; 

或通過cssText屬性，如：

row.style.cssText = 'border: 1px solid #C0C0C0;'; 

Answer 2

• 既然你操縱與DOM對象，你不必使用innerHTML！ innerHTML將的HTML內容設置在的標籤內，而不是標籤本身。這樣，你就可以嵌套你的標籤兩次！

• 什麼是concat字符串之間？使用加：

  row.id =「Row」.concat（（rowCount）.toString（））; //不！

  row.id =「Row」+ rowCount;