無法應用CSS創建表使用js

Question

下面是json響應的JavaScript表生成。在這裏我的問題是表的行和數據不工作，但CSS表工作的CSS。 注：下面給出的CSS非常適用於其他普通表

var table = $('#mydemo1'); 
 
    \t   
 
      for (var i = 0; i <= result.length; i++) 
 
      { 
 
      \t 
 
      \t var doc1 = result[i]; 
 
      \t 
 
      \t var tr = $("<tr><td>").html(doc1.Name).data(doc1); 
 
      \t tr.append($("</td></tr>")); 
 
       
 
       
 
       table.append(tr); 
 

 
      
 

 
      }

.mytdemo1 td 
 
{ 
 
    font-family:Arial, sans-serif; 
 
    font-size:14px; 
 
    padding:10px 7px; 
 
    border-style:solid; 
 
    border-width:0px; 
 
    overflow:hidden; 
 
    word-break:normal; 
 
    border-color:red; 
 
    color:#444; 
 
    background-color:#F7FDFA; 
 
} 
 
.mytdemo1 th 
 
{ 
 
    font-family:Arial, sans-serif; 
 
    font-size:14px; 
 
    font-weight:normal; 
 
    padding:10px 7px; 
 
    border-style:solid; 
 
    border-width:0px; 
 
    overflow:hidden; 
 
    word-break:normal; 
 
    border-color:red; 
 
    color:#fff; 
 
    background-color:#26ADE4; 
 
} 
 
.mytdemo1 .mytdemo1-yw4l{vertical-align:top}

<table class="mytdemo1" id="mydemo1" style="display:none;border-collapse: collapse; border-color:red;" border="1" > 
 
\t <tr><th>Employee Name</th></tr> 
 
\t </table>

Answer 1

我猜你的問題就出在這裏$("<tr><td>")。
您不能以這種方式創建節點。該字符串應包含有效的HTML標記。查看jQuery有關這個Here的文檔。

如果您檢查您的頁面源代碼，您將看到HTML將不會按照您希望的方式生成，因此您的CSS屬性不能正確應用。

我修改了一下你的代碼，它正在工作。注：這可以通過各種其他的方式來實現，其中一個是以下幾點：

JSBin

var doc1 = result[i]; 
var td = $("<td>").html(doc1.Name).data(doc1); 
var tr = $("<tr>").html(td); 

而不是$("<tr><td>")我創建的各個節點，即第一<td>附加在它的HTML，然後附加此<td>到新創建的tr。

Answer 2

你已經使用jQuery的append()功能是錯誤的方式。 append()函數將html添加到選擇器中（在結束位置），但似乎您已經使用它來創建td/tr結束標記tr.append($("</td></tr>"));。

我想你需要檢查text()函數。 jQuery Text Function Link

我希望這可以幫助你。

Answer 3

基本上，你的JS是不正確的。您還需要將<tr><td>附加到表格中。我已經修改了JS這樣您更好地理解：

var table = $('#mydemo1'); \t   
 
for (var i = 0; i <= 3; i++) 
 
{ 
 
    var doc1 = 'Content'; 
 
    table.append("<tr><td>" + doc1 + "</td></tr>");    
 
}

.mytdemo1 td 
 
{ 
 
    font-family:Arial, sans-serif; 
 
    font-size:14px; 
 
    padding:10px 7px; 
 
    border-style:solid; 
 
    border-width:0px; 
 
    overflow:hidden; 
 
    word-break:normal; 
 
    border-color:red; 
 
    color:#444; 
 
    background-color:#F7FDFA; 
 
} 
 
.mytdemo1 th 
 
{ 
 
    font-family:Arial, sans-serif; 
 
    font-size:14px; 
 
    font-weight:normal; 
 
    padding:10px 7px; 
 
    border-style:solid; 
 
    border-width:0px; 
 
    overflow:hidden; 
 
    word-break:normal; 
 
    border-color:red; 
 
    color:#fff; 
 
    background-color:#26ADE4; 
 
} 
 
.mytdemo1 .mytdemo1-yw4l{vertical-align:top}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="mytdemo1" id="mydemo1" style="border-collapse: collapse; border-color:red;" border="1" > 
 
\t <tr><th>Employee Name</th></tr> 
 
\t </table>