时间戳

首页 > 解决方案 > 带有php的html动态名称

javascript - 带有php的html动态名称

问题描述

我尝试使用 jquery 制作动态添加/删除表。我如何将值从表传递给 PHP 的问题，因为 HTML 名称是由 jquery 动态生成的。我知道它可以通过制作 php 循环来解决，但我不知道是什么样的循环。抱歉我的代码混乱，因为我还是这种类型的新手。

html页面

<div class="row setup-content" id="step-2">
<div class="container">
  <div class="row clearfix">
     <div class="col-md-10 table-responsive">
        <table class="table table-bordered table-hover table-sortable" id="tab_logic">
           <thead>
              <tr >
                 <th class="text-center">
                    Ticket Type
                 </th>
                 <th class="text-center">
                    Price(RM)
                 </th>
                 <th class="text-center">
                    Quantity
                 </th>
                 <th class="text-center">
                    Setting
                 </th>
                 <!-- <th class="text-center" style="border-top: 1px solid #ffffff; border-right: 1px solid #ffffff;"> -->
                 <!-- </th> -->
              </tr>
           </thead>
           <tbody>
              <tr id="paid0" data-id="0" class="hidden">
                 <div class="form-group">
                    <td data-name="paid_ticket_name">
                       <input type="text" name="paid_ticket_name0"  placeholder="e.g General Admission, VIP, etc" class="form-control"/>
                    </td>
                    <div class="col-md-6">
                       <td data-name="paid_ticket_price">
                          <input type="number" name="paid_ticket_price0" class="form-control"/>
                       </td>
                       <td data-name="paid_ticket_quantity">
                          <input name="paid_ticket_quantity0" placeholder="100" class="form-control"/>
                       </td>
                    </div>
                    <td data-name="paid_del">
                       <button name="paid-del0" class="btn btn-danger glyphicon glyphicon-remove row-remove"></button>
                    </td>
                 </div>
              </tr>
           </tbody>
        </table>
        <table class="table table-bordered table-hover table-sortable" id="tab_logic1">
           <tbody>
              <tr id="free0" data-id="0" class="hidden">
                 <div class="form-group">
                    <td data-name="free_ticket_name">
                       <input type="text" name="free_ticket_name0"  placeholder="e.g General Admission, VIP, etc" class="form-control"/>
                    </td>
                    <div class="col-md-6">
                       <td data-name="free_ticket_price">
                          <input type="text" value="FREE" placeholder="FREE" name="free_ticket_price0" disabled="" class="form-control"/>
                       </td>
                       <td data-name="free_ticket_quantity">
                          <input name="free_ticket_quantity0" placeholder="100" class="form-control"/>
                       </td>
                    </div>
                    <td data-name="paid_del">
                       <button name="paid-del0" class="btn btn-danger glyphicon glyphicon-remove row-remove"></button>
                    </td>
                 </div>
              </tr>
           </tbody>
        </table>
        <div class="col-md-12 btn-toolbar">
           <a id="add_row_paid" class="btn btn-primary pull-right">Paid Ticket</a>
           <a id="add_row_free" class="btn btn-primary pull-right">Free Ticket</a>
        </div>
     </div>
  </div>

javascript代码

$(document).ready(function() {
$("#add_row_paid").on("click", function() {
    // Dynamic Rows Code

    // Get max row id and set new id
    var newid = 0;
    $.each($("#tab_logic tr"), function() {
        if (parseInt($(this).data("id")) > newid) {
            newid = parseInt($(this).data("id"));
        }
    });
    newid++;

    var tr = $("<tr></tr>", {
        id: "paid"+newid,
        "data-id": newid
    });

    // loop through each td and create new elements with name of newid
        $.each($("#tab_logic tbody tr:nth(0) td"), function() {
        var cur_td = $(this);

        var children = cur_td.children();

        // add new td and element if it has a nane
        if ($(this).data("name") != undefined) {
            var td = $("<td></td>", {
                "data-name": $(cur_td).data("name")
            });

            var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
            c.attr("name", $(cur_td).data("name") + newid);
            c.appendTo($(td));
            td.appendTo($(tr));
        } else {
            var td = $("<td></td>", {
                'text': $('#tab_logic tr').length
            }).appendTo($(tr));
        }
    });

    // add delete button and td
    /*
    $("<td></td>").append(
        $("<button class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>")
            .click(function() {
                $(this).closest("tr").remove();
            })
    ).appendTo($(tr));
    */

    // add the new row
    $(tr).appendTo($('#tab_logic'));

    $(tr).find("td button.row-remove").on("click", function() {
       $(this).closest("tr").remove();
   });
});

标签： javascriptphp

解决方案

您可以向页面添加隐藏的表单元素，例如

<input type="hidden" name="row_count" value="0">

并且每次单击按钮 add_row_paid 时（在上面的 Javascript 代码中），您可以更新此隐藏输入字段的值：

$("input[name='row_count']").val(newid);

所以在提交表单时，除了表中的每一行之外，你还会有一个字段包含表中最新行的ID。然后可以使用它来遍历表中的每个 ID（行），例如：

foreach (range(0, $_POST['row_count']) as $id) {
    // code to run for each row here, accessing cells using format such as $_POST["paid_ticket_quantity$id"]
}

或者，您可以将表单元素重组为数组形式，例如在POST an array from an HTML form without javascript的答案中- 这样您就可以循环遍历表格的每一行而无需额外的计数器字段来存储行数。

推荐阅读