【问题标题】:How to pass a html table to controller in rails?如何将html表传递给rails中的控制器?
【发布时间】:2018-10-03 14:31:55
【问题描述】:

我第一次在 Rails 中做一个百货商店自动化项目,所以我在生成账单时遇到了一些问题。我想将表格的所有详细信息发送到我的控制器,在那里我可以计算购物车价格和总价。即使有其他方法可以克服这种情况,也请帮助我。

    <html>
    <head>
    <style>
    * {box-sizing: border-box}
    label {
        cursor: default;
        color:black;
        font-size: 15px;
    }

    .form-row {
        padding: 5px 10px;
        margin: 5px 0;
    }

    p {
        color:black;
    }

    h1  {
        color:black;
    }

    /* Set height of body and the document to 100% */
    body, html {
        height: 100%;
        margin: 0;
        font-family: Arial;
        background-color: white;
    }
    .container {
        padding: 16px;
        background-color: white;
        text-align: left;
        font-size: 15px;
        margin-top: 100px;
    }
    table {
        width: 500px;
        font-size: 30px;
        border: 5px solid blue;
    }

    th, td {
        text-align: left;
        padding: 8px;
    }

    td {
        color: black;
    }

    tr:nth-child(odd){background-color: #ffffb3}

    th {
        background-color: #4000ff;
        color: white;
    }
    input:invalid + span:after {
        content: '✖';
        color: #f00;
        padding-left: 5px;
    }

    input:valid + span:after {
        content: '✓';
        color: #26b72b;
        padding-left: 5px;
    }

    </style>
    </head>
    <body bgcolor="white">
    <div id="POItablediv" class="container">
    <form name="genbill" method="get" action="genCartAction">
        <table border="1">
            <tbody id="POITable">
            <tr>            
                <td>CATEGORY ID</td>
                <td>NUMBER OF PRODUCTS</td>
                <td>DELETE PRODUCT</td>
                <td>ADD PRODUCT</td>
                <td>ACTIONS</td>
            </tr>
            <tr>
            <form name="genbill" method="get" action="genCartAction">
                <td> <SELECT NAME="cid" >
                    <% for x in @cid %>
                    <OPTION VALUE="<%= x %>" ><%= x %></OPTION>
                    <% end %></SELECT><br>
                </td>
                <td><input type="text" name="nop"></td>
                <td><input type="button" value="DELETE PRODUCT" data-cmd="delRow"></td>
                <td><input type="button" value="ADD PRODUCT" data-cmd="insRow"></td>
            </tr>
            </tbody>
        </table></form>

        <form name="genbill" method="get" action="genBillAction">
        <input type="text" name="bid" readonly hidden="true">
        <input type="submit" value="CLICK HERE TO GENERATE BILL" disabled="TRUE">
        </form>
    </div>
    <script>
    function tableClicks (e) {
        let cmd = e.target.getAttribute('data-cmd');
        if (cmd && (cmd in buttonEvents)) {
            buttonEvents[cmd](e);
        }
        return;
    }
    let table = document.getElementById('POITable');
    let buttonEvents = {
        insRow: function () {       
            var newRow = table.rows[1].cloneNode(true);
            table.appendChild(newRow);
            newRow.firstElementChild.textContent = newRow.rowIndex;
            return;
        },
        delRow: function (e) {
            var rowIdx = e.target.closest('tr').rowIndex,
                rows = null;
            if (rowIdx === 1) return; // Don't delete the first row
            table.deleteRow(rowIdx);
            // Update row numbers
            rows = table.rows;
            for (const row of rows) {
                let idx = row.rowIndex;
                if (idx < 1) continue; // Skip the header row
                row.firstElementChild.textContent = idx;
            }
            return;
        }
    };
    table.addEventListener('click', tableClicks);
    </script>
    </body>
    </html>

【问题讨论】:

    标签: javascript html ruby-on-rails


    【解决方案1】:

    如果只是计算总价,你应该在javascript代码中做,不需要为此做一个端点......

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-03-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-11-24
      • 2013-03-24
      • 1970-01-01
      相关资源
      最近更新 更多