Anfügen von Zeilen in Tabelle mithilfe von JQuery

Question

Ich versuche, Tabellenzeile von Eingaben anzufügen.

<script type="text/javascript"> 
    function addDrug(){ 
     var start = $('<tr>'); 
     var end = $('</tr>'); 

     var add_DrugsCurrentlyUsed = $('#add_DrugsCurrentlyUsed').val(); 
     var add_SourceOfDrugs = $('#add_SourceOfDrugs').val(); 
     var add_FrequencyOfUse = $('#add_FrequencyOfUse').val(); 
     var add_ModeOfDrugUse = $('#add_ModeOfDrugUse').val(); 

     var td_DrugsCurrentlyUsed =$('<td>'+add_DrugsCurrentlyUsed+'</td>'); 
     var td_SourceOfDrugs =$('<td>'+td_SourceOfDrugs+'</td>'); 
     var td_FrequencyOfUse =$('<td>'+td_FrequencyOfUse+'</td>'); 
     var td_ModeOfDrugUse =$('<td>'+td_ModeOfDrugUse+'</td>'); 

     $('#drugTable').append(start+td_DrugsCurrentlyUsed+td_SourceOfDrugs+td_FrequencyOfUse+td_ModeOfDrugUse+end); 
    }; 
</script> 

Aber wenn ich es anhängen, zeigt es so etwas wie

object Object][object Object][object Object][object Object][object Object][object Object] 

in die Tabelle.

Answer 1

Sie haben ein paar Probleme nennen können Zum Beispiel bist du es versuchen, ein End-Tag hinzuzufügen, was nicht der Fall ist, wie das DOM funktioniert. Das DOM hat nicht das Konzept, Tags zu beenden, daher ist es sinnlos, einen einzufügen. Fügen Sie einfach das Element <tr> ein und fügen Sie ihm untergeordnete Elemente hinzu.

Sie verwenden auch den Operator +, um zu versuchen, Objekte zu verketten, was die Zeichenfolge [object Object] ergibt, wenn ein Objekt in eine Zeichenfolge für die Verkettung konvertiert wird. Sie sollten nicht versuchen, sie zusammenzufügen; Ersetzen Sie einfach die + Operatoren durch Kommas (,) und Ihr Code wird etwas arbeiten.

Besser noch, Sie können den Code restrukturieren, um ein wenig narrensicherer gegen Werte zu sein, die HTML-Sonderzeichen enthalten, während Sie gleichzeitig deutlicher ausdrücken, was Sie zu tun versuchen (und das spätere Hinzufügen weiterer Spalten erleichtern). .

function addDrug() { 
    $('#drugTable').append(
     $('<tr>').append(
      [ 
       '#add_DrugsCurrentlyUsed', 
       '#add_SourceOfDrugs', 
       '#add_FrequencyOfUse', 
       '#add_ModeOfDrugUse', 
      ].map(function (id) { 
       return $('<td>').text($(id).val()); 
      }) 
     ) 
    ); 
} 

Answer 2

Verstanden Sie spielen mit jQuery-Objekt nicht mit String. erstellen Sie zuerst ein tr-Objekt. dann komponieren Sie Ihre TDs und fügen Sie in tr. Dann hänge den tr in die Tabelle ein. etwas wie das.

Answer 3

In JS {} + {} = "[Objekt Objekt] [Objekt Objekt]" (Cast in String);

Also das

start+td_DrugsCurrentlyUsed+td_SourceOfDrugs+td_FrequencyOfUse+td_ModeOfDrugUse+end

gleich mit

object Object][object Object][object Object][object Object][object Object][object Object]

dieses Problem zu beheben Sie mehrmals die Methode append

$('#drugTable').append(start).append(td_DrugsCurrentlyUsed).append(td_SourceOfDrugs).append(td_FrequencyOfUse).append(td_ModeOfDrugUse); 

Answer 4

Sie versuchen, in einem falschen jQuery Elementen und nicht die html dieser Elemente hinzuzufügen.

Sie können dies einfach tun:

< script type = "text/javascript" > 
 
    function addDrug() { 
 
    // Set variables 
 
    var add_DrugsCurrentlyUsed = $('#add_DrugsCurrentlyUsed').val(), 
 
     add_SourceOfDrugs = $('#add_SourceOfDrugs').val(), 
 
     add_FrequencyOfUse = $('#add_FrequencyOfUse').val(), 
 
     add_ModeOfDrugUse = $('#add_ModeOfDrugUse').val(); 
 
    // Append table data using variables 
 
    $('#drugTable').append("<td>" + 
 
     "<td>" + add_DrugsCurrentlyUsed + "</td>" + 
 
     "<td>" + add_SourceOfDrugs + "</td>" + 
 
     "<td>" + add_FrequencyOfUse + "</td>" + 
 
     "<td>" + add_ModeOfDrugUse + "</td>" + 
 
     "</td>" 
 
    ); 
 
    }; < /script>

Wenn Sie möchten, können Sie auch eine Schleife verwenden, um die td mit den Variablen hinzufügen, aber das kann zu viel des Guten.

Answer 5

Sie können versuchen, die Objekte in 1 String mit HTML-Code zu ändern. Dann können Sie diese HTML-Zeichenfolge an die Objekttabelle anhängen.

Auf diese Weise ist der Code flexibler und einfacher zu steuern.

Changed td _SourceOfDrugs -> zum hinzufügen _SourceOfDrugs 12 (falschen Variablennamen) Zeile und für zwei weitere Variablen in Zeile 13, 14 td _FrequencyOfUse, td _ModeOfDrugUse sollte auch Add geändert werden _FrequencyOfUse, fügen _ModeOfDrugUse

<script type="text/javascript"> 
     function addDrug() { 
      var start = '<tr>'; // you can remove $() to make as a string 
      var end = '</tr>'; 

      var add_DrugsCurrentlyUsed = $('#add_DrugsCurrentlyUsed').val(); 
      var add_SourceOfDrugs = $('#add_SourceOfDrugs').val(); 
      var add_FrequencyOfUse = $('#add_FrequencyOfUse').val(); 
      var add_ModeOfDrugUse = $('#add_ModeOfDrugUse').val(); 

      var td_DrugsCurrentlyUsed = '<td>' + add_DrugsCurrentlyUsed + '</td>'; 
      var td_SourceOfDrugs = '<td>' + add_SourceOfDrugs + '</td>'; // change to the name of the var above --> add_SourceOfDrugs & remove the $ to make as string 
      var td_FrequencyOfUse = '<td>' + add_FrequencyOfUse + '</td>'; // correct the var name --> add_FrequencyOfUse 
      var td_ModeOfDrugUse = '<td>' + add_ModeOfDrugUse + '</td>'; // correct the var name --> add_ModeOfDrugUse 

      $('#drugTable').append(start + td_DrugsCurrentlyUsed + td_SourceOfDrugs + td_FrequencyOfUse + td_ModeOfDrugUse + end); 
     }; 
<script>