How To Add Text To Table

Question

I want to make form with input text, selection of colors, add button. When I click on it, it should be shown in a table.

if I type "Attend Selection Day" and select "critical", it should show the text and selection like it is shown here:

Thanks !!

Can you show what you have tried? it would be a good place to start. — semuzaboi, Feb 10 '17 at 15:55

score 0 · Answer 1 · answered Feb 10 '17 at 20:10

There are multiple ways to do your requested implementation. jQuery tables, bootstrap, thymeleaf frameworks etc. However, to answer your specific question, we can add a very simple HTML with embedded javascript to have the desired outcome. we need javascript to dynamically update selected priority (the dropdown) with text and apply it with required color.

I have provided below a sample code that is as basic as it is to do what you required. The javascript function show() will check selected value from your dropdown and then it dynamically update your result table based on selected dropdown value with the text entered in the text box.

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

How To Add Text To Table

1 Answers1