2017-02-10 231 views
-2

我想使用輸入文本,顏色選擇,添加按鈕來創建表單。當我點擊它時,它應該顯示在一個表格中。如何將文本添加到表格

如果我鍵入「出席選擇日」,並選擇「關鍵」,它應該顯示的文本和選擇類似如下所示的:

謝謝!

+3

你能證明你試過了嗎?這將是一個開始的好地方。 – semuzaboi

回答

0

有多種方法可以執行您請求的實施。 jQuery表格,bootstrap,thymeleaf框架等。但是,爲了回答您的具體問題,我們可以添加一個非常簡單的HTML與嵌入式JavaScript來獲得所需的結果。 我們需要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>