【问题标题】:I want that when I click on the add button, the value of the form will be shown in the table below [closed]我希望当我单击添加按钮时,表单的值将显示在下表中[关闭]
【发布时间】:2018-12-30 23:58:25
【问题描述】:

我在下面给出了两个截图供你理解。

第一个屏幕截图显示在点击广告按钮之前的表单值

第二屏显示点击添加按钮后表格中的值

【问题讨论】:

  • 欢迎来到 SO。请阅读有关How to Ask 的帮助页面,以确保您提供正确的信息以获得正确的答案。
  • 请花时间阅读tour

标签: javascript jquery html css forms


【解决方案1】:

您的问题缺少很多信息。您必须至少提供您的 HTML 代码,最好是您已经尝试过的代码。

为了让您大致了解该怎么做,我会给您一个提示 - 如果您提供更多信息,我会编辑我的答案,但这应该足够了:

$('#id-of-button').click(function() {
    // get data from input fields
    var val_product_service = $('#id-of-productservice-dropdown').val();
    var val_description     = $('#id-of-description-input').value();
    var val_uom             = $('#id-of-uom-dropdown').val();
    var val_qty             = $('#id-of-qty-input').value();
    var val_purchase_rate   = $('#id-of-purchaserate-input').value();
    var val_discount        = $('#id-of-discount-input').value();
    var val_tax             = $('#id-of-tax-dropdown').val();

    // create new empty row string
    var new_row = ''

    // append values to new row string
    new_row += '<tr>';
    new_row += '    <td>';
    new_row +=          val_product_service;
    new_row += '    </td>';
    new_row += '    <td>';
    new_row +=          val_description;
    new_row += '    </td>';
    new_row += '    <td>';
    new_row +=          val_uom;
    new_row += '    </td>';
    new_row += '    <td>';
    new_row +=          val_qty;
    new_row += '    </td>';
    new_row += '    <td>';
    new_row +=          val_purchase_rate;
    new_row += '    </td>';
    new_row += '    <td>';
    new_row +=          val_discount;
    new_row += '    </td>';
    new_row += '    <td>';
    new_row +=          val_tax;
    new_row += '    </td>';
    new_row += '</tr>';

    // append new row string to table
    $('#id-of-table').append(new_row);
});

由于这只是基本的 HTML,因此不会添加您要求的编辑/删除功能。我建议为此查找教程,因为在我看来,该解决方案对于stackoverflow来说太多了。自己编写一些代码,遇到问题再回来。

【讨论】:

  • 谢谢,N. M. 稍作编辑后,此代码对我有用。
猜你喜欢
  • 1970-01-01
  • 2019-06-13
  • 1970-01-01
  • 1970-01-01
  • 2017-04-28
  • 1970-01-01
  • 1970-01-01
  • 2020-11-14
  • 1970-01-01
相关资源
最近更新 更多