绘制在TD细胞

酒吧我有以下简单的代码绘制在TD细胞

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

细胞当输入变化值。最简单的方法是什么？代码片段受到高度赞赏。输入元素是更大形式的一部分。

来源

2016-07-06 Sorin

究竟是什么“酒吧”？ –

另外，你不能用这样的输入来包装“mm”。 'textarea'你可以。它应该是'''''''' –

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

.bar{ 
    width: 20px; 
    position: relative; 
    background-colour: 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来使巴相对TOT输入的值的高度：

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

这应该工作，还没有测试过，现在会这样做。

来源

2016-07-06 18:34:13

javascript代码应该放在一个函数中？那么什么时候会调用这个函数呢？一个例子，将不胜感激。 – Sorin

你也必须定义一个名为“bar”的CSS类吗？ – Sorin

什么时候你想要绘制酒吧？它是用户的输入还是仅仅是一个静态值？如果是这种情况，你可以简单地把它放在window.onload = function（）{code here}; –

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

来源

2016-07-06 18:35:40 Prianca

回答

相关问题