在 td 单元格中绘制一个条形图答案

【问题标题】：draw a bar in a td cell在 td 单元格中绘制一个条形图
【发布时间】：2016-07-06 18:12:35
【问题描述】：

我有以下简单的代码

  <tr>                           
        <td>20 Apr 1987, 06:00-07:00</td>            
        <td> <input type=text id=rainfall1 value="28.95">mm</input> </td>
    </tr>                          
    <tr>                           
         <td>20 Apr 1987, 07:00-08:00</td>  
          <td> <input type=text id=rainfall2 value="38.87">mm</input> </td> 
    </tr>                          
    <tr>                           
         <td>20 Apr 1987, 08:00-09:00</td>       
          <td> <input type=text id=rainfall3 value="14.89">mm</input> </td>
    </tr>

产生 this table。我想添加第三个

<td> ... here draw a bar ...  </td>

单元格绘制一个与降雨量值相对应的条形，并在输入值更改时自动更新。最简单的方法是什么？代码 sn-ps 受到高度赞赏。输入元素是更大表单的一部分。

【问题讨论】：

究竟什么是“酒吧”？
另外，您不能使用这样的输入来包装“mm”。 textarea你可以。它应该只是<input type="text" id="id" value="some value" />
在这里查看答案：HTML TABLE CELL PARTIAL BACKGROUND FILL

标签： html ajax jquery-easyui

【解决方案1】：

你可以使用 jqueryUI 来解决这个问题。尝试下载这些必需的jqueryUI files 并按照以下代码：

<!doctype html>
    <html lang="us">
    <head>
        <meta charset="utf-8">
        <title>progress bar in table example</title>
        <link href="jquery-ui.css" rel="stylesheet">
        <style>
        body{
            font: 62.5% "Trebuchet MS", sans-serif;
            margin: 50px;
        }
        </style>
    </head>
    <body>
        <h1>progress bar in table example</h1>
        <table>
      <tr>                           
            <td>20 Apr 1987, 06:00-07:00</td>            
            <td> <input type=text id=rainfall1 value="28.95">mm</input> </td>
        <td></td>
        </tr>                          
        <tr>                           
             <td>20 Apr 1987, 07:00-08:00</td>  
              <td> <input type=text id=rainfall2 value="38.87">mm</input> </td> 
    <td></td>
        </tr>                          
        <tr>                           
             <td>20 Apr 1987, 08:00-09:00</td>       
             <td> <input type=text id=rainfall3 value="14.89">mm</input> </td>
<!--here is the progress bar div element-->
             <td><div id="progressbar" style="width:200px"></div></td>
        </tr>  
    </table>
    <button id="plusBtn">+10</button>
    <button id="minusBtn">-10</button>
    <label id="progressLabel">label</label>
    <script src="external/jquery/jquery.js"></script>
    <script src="jquery-ui.js"></script>
    <script>
    var progressVal = 20;
    //these minus and plus functions are just for an interactive progress bar example. 
    //you don't have to use them
    $("#plusBtn").click(function(){
        progressVal += 10;
        $("#progressLabel").html(progressVal.toString());
        console.log(progressVal);
        $( "#progressbar" ).progressbar({
        value: progressVal
    });

    });
        $("#minusBtn").click(function(){
        progressVal -= 10;
        $("#progressLabel").html(progressVal.toString());
            console.log(progressVal);
            $( "#progressbar" ).progressbar({
        value: progressVal
    });

    //the progressbar() function updates the bar's value
    });
    $( "#progressbar" ).progressbar({
        value: progressVal
    });

    </script>
    </body>
    </html>

【讨论】：

【解决方案2】：

您可以使用一些 CSS 样式在您的 td 内简单地创建一个 div。例如，使用这个：

.bar{
    height: 20px;
    position: relative;
    background-color: lightblue;
}

然后把 HTML 变成这样：

<table id=table>
    <tr>                           
        <td>20 Apr 1987, 08:00-09:00</td>       
        <td> <input type=text id=rainfall0 value="14.89">mm</input> </td>
        <td><div class="bar" id="bar0"></div></td>
    </tr>
</table>

现在使用这个 JavaScript 使栏的高度相对于输入值：

var amnt = document.getElementById("table").rows.length;
for(i = 0; i < amnt; i++){
    var element = document.getElementById("rainfall" + i);
    rainfall = element.value;
    var el = document.getElementById("bar" + i);
    el.style.width = rainfall;
}

这应该可以，还没有测试，现在就可以了。

【讨论】：

javascript代码应该放在函数中？然后什么时候调用该函数？一个例子将不胜感激。
您还必须以某种方式定义名为“bar”的css类吗？
您希望何时绘制条形图？它是用户的输入还是只是一个静态值？如果是这种情况，您可以简单地将其放入 window.onload = function(){code here};