Question

我有以下简单代码

  <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>

单元格绘制一个与降雨量值对应的条形图，当输入中的值发生变化时会自动更新。最简单的方法是什么？代码片段受到高度赞赏。输入元素是更大形式的一部分。

Answer 1

您可以使用一些CSS样式在div内部制作td。例如，使用此：

.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;
}

这应该可行，尚未测试，现在就会这样做。

Answer 2

你可以使用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>

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

2 个答案: