Question

我想用输入文字，颜色选择，添加按钮制作表格。当我点击它时，它应该显示在表格中。

如果我输入＆＃34;参加选择日＆＃34;并选择＆＃34; critical＆＃34;，它应该显示文本和选择，如下所示：

谢谢！

Answer 1

有多种方法可以执行您请求的实施。 jQuery表，bootstrap，百万美元框架等。但是，为了回答您的具体问题，我们可以添加一个非常简单的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>

如何将文本添加到表

1 个答案: