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

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