Appending rows into table using JQuery

Question

I'm trying to append table row from inputs.

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

But when I append it, it shows something like

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

into the table.

Answer 1

Understood you are playing with jQuery object not with String. so first create a tr object. then compose your td's and append into tr. then append the tr into the table. something like this.

 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 2

You have a few issues, for example you are trying to add an end tag, which isn't how the DOM works. The DOM doesn't have the concept of ending tags, so there's no point to insert one. Just insert the <tr> element and add children to it.

You are also using the + operator to try to concatenate objects, which results in the string [object Object] when an object is converted to a string for concatenation. You shouldn't be trying to add them together; just replace the + operators with commas ( , ) and your code will somewhat work.

Better yet, you can restructure the code to be a bit more fool-proof against values that contain HTML special characters, while also more clearly expressing what you are trying to do (and making it easier to add more columns later).

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

Answer 3

In JS {} + {} = "[object Object][object Object]" (cast to string);

So this

start+td_DrugsCurrentlyUsed+td_SourceOfDrugs+td_FrequencyOfUse+td_ModeOfDrugUse+end

is equal with

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

to fix this you can call multiple times the append method

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

Answer 4

You're trying to add in incorrect jQuery elements and not the html of those elements.

You can simply do this:

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

If you wanted to, you could also use a loop to add the td using the variables, but that may be overkill.

Answer 5

You may try to change the objects to 1 string with html code. Then you can append that html string to the object table.

This way is more flexible and easy to control the code.

Changed td _SourceOfDrugs --> to add _SourceOfDrugs line 12 ( wrong variable name ) and for two more variables at line 13, 14 td _FrequencyOfUse, td _ModeOfDrugUse should be changed as well add _FrequencyOfUse, add _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>