JQueryを使用してテーブルに行を追加する

Question

入力からテーブル行を追加しようとしています。

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

しかし、私はそれを追加したときに、それが表に

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

のようなものを示しています。

Answer 1

を複数回呼び出すことができ、これを修正する

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

と同じですたとえば、あなたは終了タグを追加しようとしましたが、これはDOMの仕組みではありません。 DOMには終了タグの概念がないため、挿入する必要はありません。 <tr>要素を挿入して子要素を追加するだけです。

+演算子を使用してオブジェクトを連結しようとすると、オブジェクトが連結用の文字列に変換されるときに文字列が返されます。それらを一緒に追加しようとするべきではありません。 +演算子をカンマ（,）に置き換えて、コードはとなり、ややになります。

さらに、HTMLの特殊文字が含まれている値に対して少しでもばかばかしくないように、コードを再構成したり、何をしようとしているのかを明確に表現することができます（後で列を追加しやすくする） 。

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

Answer 2

文字列ではなくjQueryオブジェクトで再生しています。 まず、trオブジェクトを作成します。 tdを作成してtrに追加します。 trをテーブルに追加します。このようなもの。

function addDrug(){ 
     var tr = $('<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(); 

     tr.append($('<td>'+add_DrugsCurrentlyUsed+'</td>')); 
     tr.append($('<td>'+td_SourceOfDrugs+'</td>')); 
     tr.append($('<td>'+td_FrequencyOfUse+'</td>')); 
     tr.append($('<td>'+td_ModeOfDrugUse+'</td>')); 

     $('#drugTable').append(tr); 
    }; 

Answer 3

JS {} + {} = "[オブジェクトオブジェクト] [オブジェクトオブジェクト]"（文字列にキャスト）;

だから、この

start+td_DrugsCurrentlyUsed+td_SourceOfDrugs+td_FrequencyOfUse+td_ModeOfDrugUse+end

あなたはいくつかの問題を持っているappendメソッド

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

Answer 4

誤ったjQuery要素を追加しようとしていますが、これらの要素のHTMLは追加しません。

あなたは、単にこれを行うことができます：あなたがしたい場合

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

は、あなたはまた、変数を使用してTDを追加するためにループを使用することができますが、それはやり過ぎかもしれません。

Answer 5

HTMLコードでオブジェクトを1文字列に変更しようとする場合があります。次に、そのHTML文字列をオブジェクトテーブルに追加することができます。

この方法は、柔軟性が高く、コードを簡単に制御できます。TD _SourceOfDrugsを変更

- >にTD _FrequencyOfUseに _SourceOfDrugs線12（間違った変数名）を追加し、ライン13における2つの以上の変数のため、14、TD _ModeOfDrugUseも同様に変更する必要があり追加 _FrequencyOfUseは、はDOM要素ではなく、HTMLの断片で _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>