Question

任何人都可以想到在表格内的特定单元格内部使用水平条形图/进度条的方法（IE Row 0，colum 2）。

因此，实际上文本8,088,874会以背景颜色显示百分比。

我的设置是atm ASP.NET 表由datatables.net提供支持

Answer 1

创建一个div你想要的高度。将背景颜色设置为您想要的颜色，例如红色。将宽度设置为100％的宽度，例如：

<div style="background-color:red;height:20px;width:100px"></div> 100%
<div style="background-color:red;height:20px;width:75px"></div> 75%
<div style="background-color:red;height:20px;width:50px"></div> 50%
<div style="background-color:red;height:20px;width:25px"></div> 25%
<div style="background-color:red;height:20px;width:1px"></div> 1%

显然，任何常见的CSS都可以移到样式表中。你可以调整它以使其适合你的布局。

Answer 2

我对JQuery不太熟悉，但我相信有一个进度条功能可以很容易地为你执行。这不能在datatables.net表中使用吗？

如果允许在这些表中包含简单的html，你可以在你的单元格中尝试这样的东西（从我自己的代码中复制并修改）：

 <div id="processingProgBar" style="width:200px; height:14px; position:relative;">
    <img src="imgs/dot_blue.png" id="processingDotBlue" style="position:absolute; height:14px; width:25px; top:0px; left:0px; border:0px; z-index:1;">
    <img src="imgs/dot_black.png" id="processingDotBlack" style="position:absolute; height:14px; width:175px; top:0px; left:25px; border:0px; z-index:2;">
    <div style="color:##ffffff; position:absolute; height:14px; width:200px; top:0px; left:0px; z-index:4; text-align:center;">
        <span id="processingProgBarT" class="normal" style="color:##ffffff;">5</span> / 40 Images Processed
    </div>
 </div>

这将设置一个可由JS修改的静态进度条。每次进行时，您将更新“processingProgBarT”元素的innerHTML，然后更新“processingDotBlue”元素的宽度，然后更新“processingDotBlack”元素的宽度和左侧。你可以用这样的脚本来做到这一点：

 parent.document.getElementById('processingProgBarT').innerHTML = '6';
 parent.document.getElementById('processingDotBlue').style.width = '30px';
 parent.document.getElementById('processingDotBlack').style.width = '170px';
 parent.document.getElementById('processingDotBlack').style.left = '30px';

该特定代码将更新我的示例中正在处理的第六个图像的进度条。

您可以轻松地将其写入函数，但我没有必要。您的应用程序似乎在页面上需要多个这样的应用程序，但为此您可以在每个ID的末尾添加一个唯一标识符（即：“Row1”，“Row2”等），然后在您的函数中考虑该标识符。 / p>

我希望这会有所帮助。