我试图在绿色条和红色条上插入类pl1和pl2 300和-600的值。值必须使用jquery/javascript直接链接到td类pl1和pl2通过将代码添加到当前jquery。此外，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>
jQuery(".kk").after('<th class="kkv2"></th>');
jQuery(".kk").text(jQuery(".pl1").text());
jQuery(".kkv2").text(jQuery(".pl2").text());