嘗試使用 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