在用 Javascript (JQuery Mobile) 创建的表中应用 css 样式答案

【问题标题】：Apply css styles in table created in Javascript (JQuery Mobile)在用 Javascript (JQuery Mobile) 创建的表中应用 css 样式
【发布时间】：2018-07-07 18:09:24
【问题描述】：

我有一个使用 PHP 和 Javascript 动态创建的表。现在，我正在尝试为最后一个 <tr> 设置样式以添加填充和边框，但它不起作用。

我该如何继续？我需要调用一些元素，如 trigger('create') 或其他元素？

我的部分代码：

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

【问题讨论】：

什么不起作用？

标签： javascript php css html-table

【解决方案1】：

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

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

我个人更喜欢在 tr 中添加一个类，并在 CSS 文件中处理外部 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;
}

【讨论】：

谢谢，这是解决我问题的最佳方案。有用！ ;D

【解决方案2】：

你可以通过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

【讨论】：

【解决方案3】：

这样做的一种方法是向您的tr 标签添加一个类，如下所示：

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

现在您可以设置行的样式，或者如果你想设置表格本身的样式，你可以使用 jquery 来获取行的父级，如下所示：

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

只需给它一个 ID：

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

现在只需设置样式。

虽然这是一个冗长的方法。

希望这会有所帮助:)

【讨论】：

【解决方案4】：

您可以使用 jquery css 选择器来做到这一点

【讨论】：

$('tr:last-child').css('border','1px solid #000');