使用JQuery将行附加到表中

时间:2016-12-29 15:59:14

标签: javascript php jquery html html-table

我试图从输入中追加表格行。

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

进入表格。

5 个答案:

答案 0 :(得分:1)

理解你正在玩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);
    };

答案 1 :(得分: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());
            })
        )
    );
}

答案 2 :(得分:0)

在JS {} + {} =&#34; [object Object] [object Object]&#34; (强制转换为字符串);

所以这个

@Override public void onMessageReceived(RemoteMessage remoteMessage) { if(SettingsFragment.getReceiceNotification()){ //if user wants to receive notification NotificationManager notificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE); RemoteViews remoteViews = new RemoteViews(getPackageName(),R.layout.push_notification_layout); remoteViews.setImageViewResource(R.id.push_notif_icon,R.mipmap.ic_bird_black); Intent intent = new Intent(this,MainActivity.class); intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); PendingIntent pendingIntent = PendingIntent.getActivity(this,0,intent,PendingIntent.FLAG_ONE_SHOT); NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this); notificationBuilder.setContent(remoteViews); notificationBuilder.setContentTitle("Radyo Türkkuşu"); notificationBuilder.setContentText(remoteMessage.getNotification().getBody()); notificationBuilder.setAutoCancel(true); notificationBuilder.setSmallIcon(R.mipmap.ic_launcher); notificationBuilder.setContentIntent(pendingIntent); remoteViews.setTextViewText(R.id.push_title, "Radyo Türkkuşu"); remoteViews.setTextViewText(R.id.push_context, remoteMessage.getNotification().getBody()); //notificationBuilder.setLights (ContextCompat.getColor(MainActivity.context, R.color.pushColor), 5000, 5000); notificationManager.notify(0,notificationBuilder.build()); } }

等于

start+td_DrugsCurrentlyUsed+td_SourceOfDrugs+td_FrequencyOfUse+td_ModeOfDrugUse+end

要解决此问题,您可以多次调用追加方法

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

答案 3 :(得分:0)

您正在尝试添加不正确的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,但这可能有点过头了。

答案 4 :(得分:0)

您可以尝试使用html代码将对象更改为1个字符串。然后,您可以将该html字符串附加到对象表。

这种方式更灵活,更容易控制代码。

更改 td _SourceOfDrugs - &gt; 添加 _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>