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

您遇到了一些问题，例如您正在尝试添加结束标记，这不是 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());
            })
        )
    );
}