18910140161

Html

首页 >> 前端开发 >> Html

html-使用JavaScript-Stack Overflow根据单元格文本更改表的行颜色

顺晟科技

2022-10-19 11:53:36

199

这是我迄今为止创建的表

我需要根据单元格上的值更改行的类。

例如，如果某一行在奖金列中包含文本级别1，则整行应属于“bg-info”类。

并且如果一行在奖金列中包含文本级别2，则整行应属于“BG-Warning”类。

我尝试更改行的颜色，但无法将背景颜色类应用到。

到目前为止，这是我的代码..

<html>
<head>
    <title>Dkin Pizza Shops</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
        crossorigin="anonymous"
    >

    <script type="text/javascript" src="storeData.js"></script>

    <script>
        function buildTable() 
        {
            let outputText = '';    

            for (var i = 0; i < storeData.length; i++) 
            {
                let store = storeData[i];

                outputText += "<tr>";
                outputText += "<td>" + store.city + "</td>";
                outputText += "<td>" + store.postcode + "</td>";
                outputText += "<td>" + findState(store.postcode) + "</td>";
                outputText += "<td>" + store.manager + "</td>";
                outputText += "<td>" + store.sales + "</td>";
                outputText += "<td>" + findBonus(store.sales) + "</td>";
                outputText += "<tr>"
            }

     
            document.getElementById("tableBody").innerHTML = outputText;
            return;
        }
        function findState(postcode)
        {
            var postcode = parseInt(postcode,10);

            if((postcode>=2000 && postcode<=2599)|| (postcode>=2619 && postcode<=2898) || (postcode>=2921 && postcode<=2999))
            {return "NSW";}
            else if((postcode>=2600 && postcode<=2618)|| (postcode>=2900 && postcode<=2920))
            {return "ACT";}
            else if((postcode>=3000 && postcode<=3999))
            {return "VIC";}
            else if((postcode>=4000 && postcode<=4999))
            {return "QLD";}
            else if((postcode>=5000 && postcode<=5799))
            {return "SA";}
            else if((postcode>=6000 && postcode<=6797))
            {return "WA";}
            else if((postcode>=7000 && postcode<=7799))
            {return "TAS";}
            else if((postcode>=0800 && postcode<=0899))
            {return "NT";}

            return '';

        }

        function findBonus(sales)
        {
            var sales = parseInt(sales,10);

            if(sales>=2500 && sales<=5499)
            {return "Level 1"}
            else if(sales>=5500)
            {return "Level 2"}

            return '';
        }
    </script>

</head>
<body>
    <div class="container">
        <h1>Shop Sales</h1>
        <h3>Total sales by shop for June 2015</h3>
        
        <table class="table table-sm" id="shops">
            <thead>
               <tr>
                  <th>City</th>
                  <th>Postcode</th>
                  <th>State</th>
                  <th>Manager</th>
                  <th>Sold</th>
                  <th>Bonus</th>
               </tr>
            </thead>
            <tbody id="tableBody">
               <tr>
                  <td></td>
               </tr>
            </tbody>
        </table>

        
        <script>buildTable()</script>
        
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
     integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
     crossorigin="anonymous">
    </script>
    <script
     src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
     crossorigin="anonymous">
    </script>

</body>

顺晟科技：

您可以在邮政编码和售后之后再添加两个类似的列。 不要忘记在这些新列的thead部分中添加th

<html>
<head>
    <title>Dkin Pizza Shops</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
        crossorigin="anonymous"
    >

    <script type="text/javascript" src="storeData.js"></script>

    <script>
        function buildTable() 
        {
            let outputText = '';    

            for (var i = 0; i < storeData.length; i++) 
            {
                let store = storeData[i];

                outputText += "<tr>";
                outputText += "<td>" + store.city + "</td>";
                outputText += "<td>" + store.postcode + "</td>";
                outputText += "<td>" + findState(store.postcode) + "</td>";
                outputText += "<td>" + store.manager + "</td>";
                outputText += "<td>" + store.sales + "</td>";
                outputText += "<td>" + findBonus(store.sales) + "</td>";
                outputText += "<tr>"
            }

     
            document.getElementById("tableBody").innerHTML = outputText;
            return;
        }
        function findState(postcode)
        {
            var postcode = parseInt(postcode,10);

            if((postcode>=2000 && postcode<=2599)|| (postcode>=2619 && postcode<=2898) || (postcode>=2921 && postcode<=2999))
            {return "NSW";}
            else if((postcode>=2600 && postcode<=2618)|| (postcode>=2900 && postcode<=2920))
            {return "ACT";}
            else if((postcode>=3000 && postcode<=3999))
            {return "VIC";}
            else if((postcode>=4000 && postcode<=4999))
            {return "QLD";}
            else if((postcode>=5000 && postcode<=5799))
            {return "SA";}
            else if((postcode>=6000 && postcode<=6797))
            {return "WA";}
            else if((postcode>=7000 && postcode<=7799))
            {return "TAS";}
            else if((postcode>=0800 && postcode<=0899))
            {return "NT";}

            return '';

        }

        function findBonus(sales)
        {
            var sales = parseInt(sales,10);

            if(sales>=2500 && sales<=5499)
            {return "Level 1"}
            else if(sales>=5500)
            {return "Level 2"}

            return '';
        }
    </script>

</head>
<body>
    <div class="container">
        <h1>Shop Sales</h1>
        <h3>Total sales by shop for June 2015</h3>
        
        <table class="table table-sm" id="shops">
            <thead>
               <tr>
                  <th>City</th>
                  <th>Postcode</th>
                  <th>State</th>
                  <th>Manager</th>
                  <th>Sold</th>
                  <th>Bonus</th>
               </tr>
            </thead>
            <tbody id="tableBody">
               <tr>
                  <td></td>
               </tr>
            </tbody>
        </table>

        
        <script>buildTable()</script>
        
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
     integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
     crossorigin="anonymous">
    </script>
    <script
     src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
     crossorigin="anonymous">
    </script>

</body>

要在行中添加颜色，请尝试以下操作

<html>
<head>
    <title>Dkin Pizza Shops</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
        crossorigin="anonymous"
    >

    <script type="text/javascript" src="storeData.js"></script>

    <script>
        function buildTable() 
        {
            let outputText = '';    

            for (var i = 0; i < storeData.length; i++) 
            {
                let store = storeData[i];

                outputText += "<tr>";
                outputText += "<td>" + store.city + "</td>";
                outputText += "<td>" + store.postcode + "</td>";
                outputText += "<td>" + findState(store.postcode) + "</td>";
                outputText += "<td>" + store.manager + "</td>";
                outputText += "<td>" + store.sales + "</td>";
                outputText += "<td>" + findBonus(store.sales) + "</td>";
                outputText += "<tr>"
            }

     
            document.getElementById("tableBody").innerHTML = outputText;
            return;
        }
        function findState(postcode)
        {
            var postcode = parseInt(postcode,10);

            if((postcode>=2000 && postcode<=2599)|| (postcode>=2619 && postcode<=2898) || (postcode>=2921 && postcode<=2999))
            {return "NSW";}
            else if((postcode>=2600 && postcode<=2618)|| (postcode>=2900 && postcode<=2920))
            {return "ACT";}
            else if((postcode>=3000 && postcode<=3999))
            {return "VIC";}
            else if((postcode>=4000 && postcode<=4999))
            {return "QLD";}
            else if((postcode>=5000 && postcode<=5799))
            {return "SA";}
            else if((postcode>=6000 && postcode<=6797))
            {return "WA";}
            else if((postcode>=7000 && postcode<=7799))
            {return "TAS";}
            else if((postcode>=0800 && postcode<=0899))
            {return "NT";}

            return '';

        }

        function findBonus(sales)
        {
            var sales = parseInt(sales,10);

            if(sales>=2500 && sales<=5499)
            {return "Level 1"}
            else if(sales>=5500)
            {return "Level 2"}

            return '';
        }
    </script>

</head>
<body>
    <div class="container">
        <h1>Shop Sales</h1>
        <h3>Total sales by shop for June 2015</h3>
        
        <table class="table table-sm" id="shops">
            <thead>
               <tr>
                  <th>City</th>
                  <th>Postcode</th>
                  <th>State</th>
                  <th>Manager</th>
                  <th>Sold</th>
                  <th>Bonus</th>
               </tr>
            </thead>
            <tbody id="tableBody">
               <tr>
                  <td></td>
               </tr>
            </tbody>
        </table>

        
        <script>buildTable()</script>
        
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
     integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
     crossorigin="anonymous">
    </script>
    <script
     src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
     crossorigin="anonymous">
    </script>

</body>
  • TAG：
上一篇：JavaScript-如果选中复选框 下一篇：JavaScript-放置div后，
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！