在用Javascript創建的表格中應用css樣式（jQuery Mobile）

我有一個使用PHP和Javascript動態創建的表格。現在，我試圖給最後一個樣式添加填充和邊框，但它不起作用。我該怎麼辦？我需要調用一些像觸發器（'創建'）或其他元素？我的代碼在用Javascript創建的表格中應用css樣式（jQuery Mobile）

部分：

$.ajax ({ 
     beforeSend: function() { $.mobile.showPageLoadingMsg(); }, //Show spinner 
     complete: function() { $.mobile.hidePageLoadingMsg() }, //Hide spinner 
     url: "http://www.someweb.com/somePHP.php", 
     dataType: "json", 
     success: function (data, textStatus, jqXHR) { 
      for(var i = 0; i< data[1].length;i++){ 
       table += "<tr><td>"+data[1][i].mon_da+"</td>"; 
       table += "<td>"+Number(data[1][i].mon_qu).toFixed(2)+"€</td>"; 
       table += "<td>"+data[1][i].mon_con+"</td></tr>"; 
      } 
      table += "<tr style='border:1px solid;padding-top:20px;'><td colspan='2'><b>Disp:</b></td><td><b>"+Number(data[0].usr_to).toFixed(2)+"€</b></td></tr>"; 
      document.getElementById("tableMo").innerHTML = table; 
     } 
    });

來源

2013-04-10 Angel

什麼*不起作用*呢？ – Ohgodwhy 2013-04-10 07:29:44

You can't apply styles to <tr>s like that。

您可以try applying them to the <td>s instead.

我個人比較喜歡的一類在CSS文件添加到tr和處理方式對外部JS。

jsFiddle

HTML

<tr class="stylish"> 
    <td colspan='2'><b>Disp:</b></td> 
    <td><b>"+Number(data[0].usr_to).toFixed(2)+"€</b></td> 
</tr>

CSS

.stylish td { 
    border:1px solid #000; 
    padding-top:20px; 
} 
.stylish td:first-child { 
    border-right:0; 
} 
.stylish td:last-child { 
    border-left:0; 
}

來源

2013-04-10 07:31:39

謝謝，這是我的問題的最佳解決方案。有用！ ; D – Angel 2013-04-10 07:47:18

您可以通過ID拿到表元素，然後用JavaScript加上CSS樣式屬性：

例如：

document.getElementById("tableMo").style.border = "1px solid black"; 
document.getElementById("tableMo").style.padding = "10px";

檢查出一些DOM風格的教程，它可以幫助你

http://www.w3schools.com/jsref/dom_obj_style.asp

來源

2013-04-10 07:32:20 Fabiotocchi

這樣做的一種方法是將一個類添加到您的tr標籤，像這樣：

table += "<tr class='rowStyle'><td>"+data[1][i].mon_da+"</td>";

現在您可以設置行的樣式，或者如果您想對錶本身進行樣式設置，你可以使用jQuery來獲取該行的母公司，像這樣：

var obj = $('.rowStyle').closest('table');

，只是給它一個ID：

$(obj).attr('id','tableID');

現在只是樣式。

雖然這是一個很長的做法。

希望這有助於:)

來源

2013-04-10 07:32:27

你可以做到這一點使用jQuery CSS選擇器

來源

2013-04-10 07:54:22

$（'tr：last-child'）.css（'border'，'1px solid＃000'）; – 2013-04-10 07:55:02

在用Javascript創建的表格中應用css樣式（jQuery Mobile）

回答

相關問題