рисовать бар в клетке тд

У меня есть следующий простой кодрисовать бар в клетке тд

<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

Что такое «бар»? –

Кроме того, вы не можете обернуть «мм», используя такой вход. 'textarea' вы можете. Это должно быть просто '' –

Вы можете просто сделать div внутри вашего td с некоторым стилем CSS. Например, используйте:

.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

Также вы должны каким-то образом определить класс css с именем «bar»? – 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

рисовать бар в клетке тд

ответ

Смежные вопросы