尝试使用 jquery 或 javascript 将 td 值插入进度条

Question

我试图在绿色条和红色条上插入类 pl1 和 pl2 300 和 -600 的值。 通过将代码添加到当前 jquery，值必须使用 jquery/javascript 直接链接到 td 类 pl1 和 pl2。 html 标签也被限制修改，因为它只是长期项目的一部分，因此除非非常重要，否则不能修改。

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <style>
         .pct > div >.bar2 {
         margin-right: 2px;
         text-align: right;
         background: red;
         border: 1px;
         }
         .pct{
         width:auto;
         border: solid purple 1px;
         }
         table, td {
         border: solid black 1px;
         }
         .pl1,.pl2 {
         width: auto;
         display: none;
         }
      </style>
   </head>
   <body>
      <table>
         <tr>
            <th>Name</th>
            <th class="kk">OI%</th>
         </tr>
         <tr>
            <td class="nm">Nitin</td>
            <td class="pl1">300</td>
            <td class="pct">
               <div class="progressbar">
                  <div class="bar"></div>
               </div>
            </td>
            <td class="pl2">-600</td>
            <td class="pct">
               <div class="progressbar">
                  <div class="bar"></div>
               </div>
            </td>
         </tr>
      </table>
      <script>
         $( function() {
               let sal = $(".pl1 ,.pl2 ");
               
               let progressbarSize = 100; //100%
               
               
               $(".progressbar").css("width", "auto" + "px")
                             
               $(".bar").css({width : ("auto") + "px", height : "20px", display : "inline"});
               
               $(".bar").css("float", "left" )
              
               
               
                     
               $(sal).each(function(index, element){
                 let currentValue = parseInt($(element).text());
                 
                 //console.log(currentValue);
                 
                 if (currentValue >= 0 && currentValue <= progressbarSize){
                  
         
                   //console.log(currentValue);
                   $(element).next().children().children(".bar").css("backgroundColor", "#00ff00")
                   .css("width", (currentValue) + "px")
                    
                   
         
                 }
                 else if (currentValue >= 0 && currentValue >= progressbarSize){
         
                   //console.log(currentValue);
                   progressbarSize = currentValue;
                   
                   $(element).next().children().children(".bar").css("backgroundColor", "#00ff00")
                   .css("width", (currentValue) + "px")
                   
         
                 }
                 
                 else if(currentValue >= (progressbarSize * -1) && currentValue < 0){
                 
          
                   //console.log(currentValue);
                   currentValue *= -1;
                   
                  
                   $(element).next().children().children(".bar").css("backgroundColor", "red")
                   .css("width", (currentValue) + "px")
                   
                   
                 }
                 
                 else if(currentValue <= (progressbarSize * -1) && currentValue < 0){
                   
                   //console.log(currentValue);
                   
                   currentValue *= -1;
                   
                   $(element).next().children().children(".bar").css("backgroundColor", "red")
                   .css("width", (currentValue) + "px")
                   
                   
                 }
                 
                 else{
                   
                   $(element).next().children().children().hide(); //Hide the both, possitive and negative.
                   
                 }
                 
               });
               });
              
               
      </script>
   </body>
</html>

Answer 1

jQuery(".kk").after('<th class="kkv2"></th>');
jQuery(".kk").text(jQuery(".pl1").text());
jQuery(".kkv2").text(jQuery(".pl2").text());

尝试使用 jquery 或 javascript 将 td 值插入进度条

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-06-19 20:37:22

尝试使用 jquery 或 javascript 将 td 值插入进度条

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-06-19 20:37:22

解决方案1
1 已采纳 2021-06-19 20:37:22