使用基于文本的jQuery设计单个单元格的麻烦

时间：2017-04-13 15:15:00

标签： jquery css html-table styles

我需要一些帮助来设置一个由vb.net gridview填充的表。

我正在编写一些jQuery来根据表格中的文字设置单元格样式。

单元格当前正由填充随机数的数据库填充，在完成存储过程后，表格的所有数字将介于90和100之间

我没有从jQuery中获得任何样式。

我不需要设置第一列，因为它不是数字。我很感激帮助。 

<table class="table table-bordered" cellspacing="0" rules="all" border="1" id="ctl00_ContentPlaceHolder1_GridView1" style="border-collapse:collapse;">
        <tr>
            <th scope="col">&nbsp;</th><th scope="col">Monday</th><th scope="col">Tuesday</th><th scope="col">Wednesday</th><th scope="col">Thursday</th><th scope="col">Friday</th><th scope="col">Week To Date</th><th scope="col">Month To Date</th><th scope="col">Month Rework Success Rate</th>
        </tr><tr>
            <td style="font-weight:bold;">Dyeing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Preparation</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Framing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Inspection &amp; Packing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Face Finishing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Quality Control</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Knitting</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Planning</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Warping</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Laminate</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr>
    </table>


<script>
        $(document).ready(function () {
            $("table tr td").find("td").each(function () {
                if ($(this).text() > "97") {
                    $(this).css("background-color", "Green");
                }

                if ($(this).text() <= "94" || (this).text() >= "97") {
                    $(this).css("background-color", "Blue");
                }

                if ($(this).text() < "94") {
                    $(this).css("background-color", "green");
                }
            });
        });
    </script>

3 个答案:

答案 0 :(得分：0)

要将单元格内容作为数字进行比较，首先需要parseInt()。

此代码有效：

$(document).ready(function () {
    $("table tr td").each(function () {
        if (parseInt($(this).text()) > 97) {
            $(this).css("background-color", "Green");
        }

        if (parseInt($(this).text()) <= 94 || (this).html().parseInt() >= 97) {
            $(this).css("background-color", "Blue");
        }

        if (parseInt($(this).text()) < 93) {
            $(this).css("background-color", "green");
        }
    });
});

答案 1 :(得分：0)

＆＃13;
＆＃13; 
$(document).ready(function () {
  var obj = $("table tr td");
 
  obj.each(function () {
    if(parseFloat($(this).text())){
      
    
      if (parseFloat($(this).text()) < 30) {
        $(this).css("background-color", "red");
      }else if (parseFloat($(this).text()) >= 30 && parseFloat($(this).text()) <= 60) {
        $(this).css("background-color", "green");
      }else{
        $(this).css("background-color", "blue");
      }
    }
  });
});
＆＃13; 
<script src="https://code.jquery.com/jquery-git.js"></script>
<table class="table table-bordered" cellspacing="0" rules="all" border="1" id="ctl00_ContentPlaceHolder1_GridView1" style="border-collapse:collapse;">
        <tr>
            <th scope="col">&nbsp;</th><th scope="col">Monday</th><th scope="col">Tuesday</th><th scope="col">Wednesday</th><th scope="col">Thursday</th><th scope="col">Friday</th><th scope="col">Week To Date</th><th scope="col">Month To Date</th><th scope="col">Month Rework Success Rate</th>
        </tr><tr>
            <td style="font-weight:bold;">Dyeing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Preparation</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Framing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Inspection &amp; Packing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Face Finishing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Quality Control</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Knitting</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Planning</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Warping</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Laminate</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

我将测试值更改为具有与给定表对应的值（再次更改以适合您的情况）。

＆＃13;
＆＃13; 
        $(document).ready(function () {
            $("table tr").find("td").each(function () {
                if (Number($(this).text()) > 45) {
                //value is bigger than 45
                    $(this).css("background-color", "Yellow");
                }

                if (Number($(this).text()) >= 20 && Number($(this).text()) <= 45) {
                //value is beetween 20 and 45 include
                    $(this).css("background-color", "Blue");
                }

                if (Number($(this).text()) < 20) {
                  //value is less than 20
                    $(this).css("background-color", "red");
                }
            });
        });
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" cellspacing="0" rules="all" border="1" id="ctl00_ContentPlaceHolder1_GridView1" style="border-collapse:collapse;">
        <tr>
            <th scope="col">&nbsp;</th><th scope="col">Monday</th><th scope="col">Tuesday</th><th scope="col">Wednesday</th><th scope="col">Thursday</th><th scope="col">Friday</th><th scope="col">Week To Date</th><th scope="col">Month To Date</th><th scope="col">Month Rework Success Rate</th>
        </tr><tr>
            <td style="font-weight:bold;">Dyeing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Preparation</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Framing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Inspection &amp; Packing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Face Finishing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Quality Control</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Knitting</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Planning</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Warping</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr><tr>
            <td style="font-weight:bold;">Laminate</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td>
        </tr>
    </table>
＆＃13;
＆＃13;
＆＃13;

在测试时要小心他们会覆盖自己。

相关问题
最新问题