Question

我想在页面开始时更改表格的行背景和字体颜色。怎么做？目前，我只在mouseout事件中完成了它。

$("#tableGrid").ready(function(){

});

$("#tableGrid").on("mouseout","tr", function() {
  if($(this).children("td:eq(15)").text() == "CREATED") {
    $(this).children("td").css('background', '#fffff9');
    $(this).children("td").css('color', '#000000');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='bal-main-conatiner bal-table booking-table' id="tableGrid"></div>

Answer 1

您可以尝试$(document).ready(function(){ // styling stuff goes here // This function will be executed when the page is loaded });

@model Guru.SubscriptionDb.Models.CreateMultiProduct
@{
    ViewBag.Title = "Create Product";
}
<head>
    <link rel="stylesheet" href="~/Content/brandonStyles.css" type="text/css" />
    <title>Create Product</title>
    <script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js"></script>
    <script type="text/javascript">
        function addRow() {            
            $("#formTable tbody tr:first").clone().find("input").each(function () {
                $(this).val('');
            }).end().appendTo("#formTable");
        }
    </script>
    <script>
        function calc()
        {
            var amount = $("#Annual").val();
            document.getElementById('Fee1').value = amount;
        }
    </script>
    <script>
        function calc2() {
                var amount = $("#Annual").val();
                document.getElementById('Fee2').value = amount;
            }
    </script>
</head>
<body>
    <form method="post">
        <a style="margin: 10px 0;" href="javascript:addRow();">Add New Record</a>
        <table id="formTable" class="DataTable" border="1">
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Annual Fee</th>
                    <th>Fee 1</th>
                    <th>Fee 2</th>
                    <th>Fee 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" name="Annual" id="Annual" style="width: 100px;" /></td>
                    <td><input type="text" name="Fee1" id="Fee1" style="width: 100px;" /> <div style="font-size:x-small">Same as Annual  <input type="checkbox"  id="SameAsAnnual"  onchange="calc()" ; /></div></td>
                    <td><input type="text" name="Fee2" id="Fee2" style="width: 100px;" /> <div style="font-size:x-small">Same as Annual  <input type="checkbox"  id="SameAsAnnual2" onchange="calc2()" ;> </div></td>
                    <td><input type="text" name="imp" style="width: 100px;" /></td>
                </tr>
            </tbody>
        </table>
        <input type="submit" value="Submit" />
    </form>
</body>

Answer 2

window.onload = function(){
   //what you wanna
}

在加载dom元素时会触发。

如果你渴望尽快做到这一点，并且不想加载所有元素（因为你可能有大量的DOM元素并且需要很长时间才能加载所有元素？）你可以选择以下内容：

function myFunc() {
  if (document.getElementById('myElement')) {
    // do stuff
  } else {
    setTimeout(myFunc, XNumber);
  }
}

这里，每隔XNumber毫秒调用超时中的回调函数，如果元素在DOM中，则触发// do stuff

但主要的问题是，为什么在表加载后加载表时，你想通过JS做什么，并且在此之前没有准备好CSS，所以当表加载时样式已经存在并且适用于它？

我会使用静态CSS覆盖确定它是否是一次性的事情。它的简单，可读，遵循惯例，以通常的方式分离关注点，并且应该在元素出现之前加载CSS，因此它会立即影响您的表。

CSS方法中常见风格的缺点是什么？如果您需要动态附加样式，您仍然可以选择onload，只需在整个表格中添加一个类。

页面启动时加载表格css

2 个答案: