在Javascript（JQuery Mobile）中创建的表中应用css样式

问题描述：

I have a table that is created dynamically using PHP and Javascript. Now, I'm trying to styling the last one <tr> to add a padding and border, but it doesn't work.

How can I proceed? I need call some element like trigger('create') or others?

Part of my code:

$.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;
        }
    });

我有一个使用PHP和Javascript动态创建的表。现在，我正在尝试设置最后一个＆lt; tr＆gt; code>来添加填充和边框，但它不起作用。 p>

我怎么能继续？我需要调用一些元素，比如trigger（'create'）或其他元素？ p>


我的部分代码： p> 
 
 
  $ .ajax（{  
 beforeSend：function（）{$ .mobile.showPageLoadingMsg（）;}，// Show spinner 
 complete：function（）{$ .mobile.hidePageLoadingMsg（）}，// Hide spinner 
 url：“http：  //www.someweb.com/somePHP.php",nn dataType：“json”，
 success：function（data，textStatus，jqXHR）{
 for（var i = 0; i＆lt; data [1]。 长度; i ++）{
 table + =“＆lt; tr＆gt;＆lt; td＆gt;”+ data [1] [i] .mon_da +“＆lt; / td＆gt;”; 
 table + =“＆lt; td＆gt;”+ 数字（数据[1] [i] .mon_qu）.toFixed（2）+“€＆lt; / td＆gt;”; 
 table + =“＆lt; td＆gt;”+ data [1] [i] .mon_con +“＆lt  ; / td＆gt;＆lt; / tr＆gt;“; 
} 
表格+ =”＆lt; tr style ='border：1px solid; padding-top：20px;'＆gt;＆lt; td colspan ='2'＆gt;  ＆LT b取代; DISP：＆LT; / b＆GT;＆LT; / TD＆GT;＆LT; TD＆GT;＆LT; b＆gt; “中+号（数据[0] .usr_to）.toFixed（2）+” €＆LT; / b＆GT;＆LT;  / td＆gt;＆lt; / tr＆gt;“; 
 document.getElemen  tById（“tableMo”）。innerHTML = table; 
} 
}）; 
  code>  pre> 
  div>

答

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

You can try applying them to the <td>s instead.

I would personally prefer to add a class to the tr and handle the styles externally to JS in a CSS file.

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;
}

答

You can get the table element by id and then add CSS style property with javascript:

for example:

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

Check out some DOM style tutorial, it might help you

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

答

One way of doing this is to add a class to your tr tags like so:

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

now you can style the rows, or if you want to style the table itself, you can use jquery to get the parent of the row like so:

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

and just give it an ID:

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

Now just style it.

Although this is a lengthy method of doing it.

Hope this helps :)

答

You can do that using jquery css selector

在Javascript（JQuery Mobile）中创建的表中应用css样式

相关推荐