Appending rows into table using JQuery

Alvinrightback

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.

cdhowie

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());
            })
        )
    );
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Appending Rows to Nested HTML Table using Jquery

From Dev

Appending row to table using Jquery

From Dev

When appending tr to table thead using jquery each ,results blank rows

From Dev

appending Image to a table row in mvc using jquery

From Dev

What is causing extra spacing to display when appending table rows with jquery

From Dev

Adding rows to table using jquery

From Dev

Adding rows to table using jquery

From Dev

Appending Row to PHP generated table row using Jquery

From Dev

How to empty the HTML of a table , before appending it in a for loop, using jquery,

From Dev

Copy table rows in multiple table using JQUERY

From Dev

Appending jQuery selector variable into a table

From Dev

Bugs appending rows to table and scrolling to bottom of page

From Dev

Views and appending table rows in backbone.js

From Dev

HTML table rows custom sort using jQuery

From Dev

Rows and Columns of Html Table Resizable using Jquery

From Dev

How to auto calculate table rows using jquery?

From Dev

showing adjacent rows in a table using jquery

From Dev

appending a template using jquery in Grails

From Dev

Appending JSON data using jQuery

From Dev

Appending rows to csv using dict_writer

From Dev

Using jQuery selectable on table rows, links in table not working

From Dev

adding <tr> to table using jquery + keep jquery function on added rows

From Dev

How to stop text from being highlighted after appending a row to a table using jQuery

From Dev

Appending table, tr, td tags to innerHTML does not create table rows

From Dev

Jquery replace table data instead of appending

From Dev

Salesforce- Using jQuery to delete table rows using checkbox

From Dev

Updating table rows using Jquery using select dropdown

From Dev

can not get the dom element after appending rows of table

From Java

Hide table rows with jquery

Related Related

  1. 1

    Appending Rows to Nested HTML Table using Jquery

  2. 2

    Appending row to table using Jquery

  3. 3

    When appending tr to table thead using jquery each ,results blank rows

  4. 4

    appending Image to a table row in mvc using jquery

  5. 5

    What is causing extra spacing to display when appending table rows with jquery

  6. 6

    Adding rows to table using jquery

  7. 7

    Adding rows to table using jquery

  8. 8

    Appending Row to PHP generated table row using Jquery

  9. 9

    How to empty the HTML of a table , before appending it in a for loop, using jquery,

  10. 10

    Copy table rows in multiple table using JQUERY

  11. 11

    Appending jQuery selector variable into a table

  12. 12

    Bugs appending rows to table and scrolling to bottom of page

  13. 13

    Views and appending table rows in backbone.js

  14. 14

    HTML table rows custom sort using jQuery

  15. 15

    Rows and Columns of Html Table Resizable using Jquery

  16. 16

    How to auto calculate table rows using jquery?

  17. 17

    showing adjacent rows in a table using jquery

  18. 18

    appending a template using jquery in Grails

  19. 19

    Appending JSON data using jQuery

  20. 20

    Appending rows to csv using dict_writer

  21. 21

    Using jQuery selectable on table rows, links in table not working

  22. 22

    adding <tr> to table using jquery + keep jquery function on added rows

  23. 23

    How to stop text from being highlighted after appending a row to a table using jQuery

  24. 24

    Appending table, tr, td tags to innerHTML does not create table rows

  25. 25

    Jquery replace table data instead of appending

  26. 26

    Salesforce- Using jQuery to delete table rows using checkbox

  27. 27

    Updating table rows using Jquery using select dropdown

  28. 28

    can not get the dom element after appending rows of table

  29. 29

    Hide table rows with jquery

HotTag

Archive