无法在javascript中正确添加行到表格

行将添加到表格中，但样式和其他设置不起作用。我不得不求助于使用适用于某些项目的innerXml ...但由于某种原因，这对于隐藏列和行样式都有效。无法在javascript中正确添加行到表格

通知表最初使用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;">'; 

    } 
}

来源

2012-07-08 mad moe

你应该真的不使用内联样式，而是使用CSS。 – Bergi 2012-07-08 19:43:23

表有自己的方法 - 您使用InsertRow创建一个新行并在行上插入细胞以创建一个新细胞。一个例子可以发现here。

此外，您不通过style设置样式。相反，你要么设置单独的属性，如：

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

或通过cssText属性，如：

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

来源

2012-07-08 05:54:34 Michael

感谢您的反馈，但它似乎没有更好的工作。格式不会采取。 – 2012-07-08 17:28:48

既然你操纵与DOM对象，你不必使用innerHTML！ innerHTML将的HTML内容设置在的标签内，而不是标签本身。这样，你就可以嵌套你的标签两次！
什么是concat字符串之间？使用加：

row.id =“Row”.concat（（rowCount）.toString（））; //不！

row.id =“Row”+ rowCount;

来源

2012-07-08 06:09:38 acondolu

无法在javascript中正确添加行到表格

回答

相关问题