テーブルにテキストを追加するには

-2

入力テキスト、色の選択、ボタンの追加でフォームを作成したいと思います。私がそれをクリックすると、テーブルに表示されるはずです。テーブルにテキストを追加するには

私は「選択の日参加」と「クリティカル」を選択入力すると、それがここで示されているように、それはテキストと選択を表示する必要があります：

感謝を！

2017-02-10 Waseem Ha

あなたは試したことを示すことができますか？それは始めるのに良い場所になるでしょう。 – semuzaboi

リクエストされた実装を行う方法は複数あります。 jQueryテーブル、ブートストラップ、タイムリーフフレームワークなどです。しかし、具体的な質問に答えるために、JavaScriptを組み込んだ非常に簡単なHTMLを追加して、望ましい結果を得ることができます。選択した優先度（ドロップダウン）をテキストで動的に更新し、必要な色で適用するにはjavascriptが必要です。

以下のサンプルコードは、必要なものを実行するための基本的なものです。 javascript関数show（）はドロップダウンから選択された値をチェックし、テキストボックスに入力されたテキストで選択されたドロップダウン値に基づいて結果テーブルを動的に更新します。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Title</title> 
<script language="JavaScript"> 
    function show(){ 
     var textEntry = document.getElementById('myText').value; 
     if(textEntry == ''){ 
      alert("Please enter a task"); 
      return; 
     } 
     var selection = document.getElementById('mySelection'); 
     var selectionText = selection.options[selection.selectedIndex].text; 
     var fontColor=''; 
     if(selection.value=='normal'){ 
      fontColor='#259523'; 
     } 
     if(selection.value=='undecided'){ 
      fontColor='#3339FF'; 
     } 
     if(selection.value=='critical'){ 
      fontColor='#FF9F33'; 
     } 
     document.getElementById('textEntry').innerHTML='<font color="'+fontColor+'">'+textEntry+'</font>'; 
     document.getElementById('priority').innerHTML='<font color="'+fontColor+'">'+selectionText+'</font>'; 
    } 

</script> 
</head> 
<body> 
<table> 
    <tr> 
     <td> 
     <input type="text" id="myText"> 
     </td> 
     <td> 
     <select id="mySelection"> 
      <option value="normal" selected>Normal</option> 
      <option value="undecided">If You Can</option> 
      <option value="critical">Critical</option> 
     </select> 
     </td> 

     <td> 
     <input type="button" onclick="show()" value="Add"> 

     </td> 
    </tr> 

    <tr> 
     <td id="textEntry"></td> 
     <td id="priority"></td> 
    </tr> 
</table> 
</body> 
</html>

出典

2017-02-10 20:10:02 Vishal

テーブルにテキストを追加するには

答えて

関連する問題