So fügen Sie Text zur Tabelle hinzu

-2

Ich möchte Formular mit Eingabetext, Auswahl von Farben, Schaltfläche hinzufügen. Wenn ich darauf klicke, sollte es in einer Tabelle angezeigt werden.So fügen Sie Text zur Tabelle hinzu

wenn ich "Nehmen Sie an Selection Day" und wählen Sie "kritischen" geben, sollte es den Text und die Auswahl zeigen, wie es hier gezeigt wird:

Dank !!

Quelle

2017-02-10 Waseem Ha

Können Sie zeigen, was Sie versucht haben? Es wäre ein guter Anfang. – semuzaboi

Es gibt mehrere Möglichkeiten, die gewünschte Implementierung durchzuführen. jQuery-Tabellen, bootstrap, thymeleaf-Frameworks usw. Um Ihre spezifische Frage zu beantworten, können wir jedoch einen sehr einfachen HTML-Code mit eingebettetem Javascript hinzufügen, um das gewünschte Ergebnis zu erzielen. Wir benötigen Javascript, um die ausgewählte Priorität (das Dropdown) dynamisch mit Text zu aktualisieren und es mit der gewünschten Farbe zu versehen.

Ich habe unten einen Beispielcode zur Verfügung gestellt, der so einfach ist, wie es ist, zu tun, was Sie benötigten. Die JavaScript-Funktion show() überprüft den ausgewählten Wert aus Ihrer Dropdown-Liste und aktualisiert dann dynamisch Ihre Ergebnistabelle basierend auf dem ausgewählten Dropdown-Wert mit dem in das Textfeld eingegebenen Text.

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

Quelle

2017-02-10 20:10:02 Vishal

So fügen Sie Text zur Tabelle hinzu

Antwort

Verwandte Themen