使用JQuery將行附加到表中

我試圖從輸入中追加錶行。使用JQuery將行附加到表中

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

到表中。

來源

2016-12-29 Alvinrightback

'.append（）'涉及DOM元素，而不是HTML片段。您不需要單獨添加「」。另外，你不能使用'+'連接jQuery對象。 – Barmar

你有幾個問題，例如你是試圖添加一個結束標籤，而不是DOM如何工作。 DOM沒有結束標籤的概念，所以沒有必要插入標籤。只需插入<tr>元素並添加孩子。

您還在使用+運算符嘗試連接對象，當對象轉換爲串聯字符串時，會導致字符串[object Object]。你不應該試圖把它們加在一起;只需用逗號（,）代替+運營商，您的代碼將有點的工作。更好的是，您可以將代碼重構爲對包含HTML特殊字符的值更加傻瓜式，同時也更清晰地表達您正在嘗試執行的操作（並且可以更輕鬆地在稍後添加更多列）。

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

來源

2016-12-29 16:11:13 cdhowie

瞭解你正在玩jQuery對象而不是String。所以先創建一個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); 
    };

來源

2016-12-29 16:05:37 subash

在JS {} + {} =「[object Object] [object Object]」（cast to string）;

所以這

start+td_DrugsCurrentlyUsed+td_SourceOfDrugs+td_FrequencyOfUse+td_ModeOfDrugUse+end

是

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

等於解決這個問題，你可以多次調用append方法

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

來源

2016-12-29 16:06:54

但是我們爲什麼要添加'end'呢？那麼表格單元呢？ – cdhowie

您試圖添加不正確的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，但可能是矯枉過正。

來源

2016-12-29 16:16:12

您可以嘗試將對象更改爲帶有html代碼的1個字符串。然後，您可以將該HTML字符串附加到對象表。

這種方式更加靈活且易於控制代碼。

更改TD _SourceOfDrugs - >到添加 _SourceOfDrugs線12（錯誤變量名）和兩個變量在第13行，14 TD _FrequencyOfUse，TD _ModeOfDrugUse應當改變以及附加 _FrequencyOfUse，添加 _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>

來源

2016-12-29 16:21:05

一個好的答案將解釋你改變了什麼，爲什麼。 –

使用JQuery將行附加到表中

回答

相關問題