Question

我正在为用户创建一个表行，用于添加好友详细信息，包含名称，移动等列数和三个复选框，当用户单击复选框时，与该复选框相关的输入字段将打开以进入有关该字段的一些信息，它可以选择任意数量的复选框，并且必须显示与该复选框相关的大量输入字段，并且用户可以填充该输入字段。现在这可以很容易地完成，当用户只有一个朋友的条件，但我想为用户，它可以通过点击“添加朋友按钮”添加多个朋友的详细信息，但我陷入如何给id，名称， ...输入字段和复选框，以便当用户点击复选框时，必须打开相关输入字段，并使用laravel将所有数据保存在数据库中。

我只是为一位朋友创建，如下所示......

<table class="table table-bordered width100" id="table1">
  <thead>
    <tr class="filters">
      <th>Friend Name</th>
      <th>Friend mobile</th>
      <th>Hobbies </th>
      <th>about</th>

    </tr>
  </thead>


  <tbody>


    <tr role="row">
      <td><input class="form-control" id="name" name="name"></td>
      <td><input class="form-control" id="mobile" name="mobile"></td>

      <td>

        <div class="col-md-4">
          <div class="form-group">
            <div class="checkbox">
              <label data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                                <input type="checkbox"/> Singing
                                            </label>
            </div>
          </div>
          <div id="collapseOne" aria-expanded="false" class="collapse">
            <div class="form-group">
              <input type="text" name="about_singing" placeholder="About singing" class="form-control" />
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="form-group">
            <div class="checkbox">
              <label data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                                                <input type="checkbox"/>Dancing
                                            </label>
            </div>
          </div>
          <div id="collapseTwo" aria-expanded="true" class="collapse">
            <div class="form-group ">
              <input type="text" name="about_dancing" placeholder="About Dancing" class="form-control">
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="form-group">
            <div class="checkbox">
              <label data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                                                <input type="checkbox"/>Other
                                            </label>
            </div>
          </div>
          <div id="collapseThree" aria-expanded="true" class="collapse">
            <div class="form-group ">
              <input type="text" name="other_hobby" placeholder="Friends Other Hobby" class="form-control">
            </div>
          </div>
        </div>

      </td>
      <td><input class="form-control" id="about_friend" name="about_friend"></td>


    </tr>
  </tbody>
</table>

<input type="button" value="add friend">

那么我怎样才能为多个朋友的详细信息做到这一点并保存到Laravel中的数据库？

Answer 1

这是通过单击按钮添加新行。你需要包含jquery

<table class="friends-list table table-bordered width100" id="table1">

    <thead>
        <tr class="filters">
          <th>Friend Name</th>
          <th>Friend mobile</th>
          <th>Hobbies </th>
          <th>about</th>
        </tr>
    </thead>



    <tbody>
        <tr role="row">
            <td><input class="form-control" id="name" name="name"></td>
            <td><input class="form-control" id="mobile" name="mobile"></td>

            <td>

                    <div class="col-md-4">
                      <div class="form-group">
                        <div class="checkbox">
                          <label data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                <input type="checkbox"/> Singing
                            </label>
                        </div>
                      </div>
                      <div id="collapseOne" aria-expanded="false" class="collapse">
                        <div class="form-group">
                          <input type="text" name="about_singing" placeholder="About singing" class="form-control" />
                        </div>
                      </div>
                    </div>

                    <div class="col-md-4">
                      <div class="form-group">
                        <div class="checkbox">
                          <label data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                                <input type="checkbox"/>Dancing
                            </label>
                        </div>
                      </div>
                      <div id="collapseTwo" aria-expanded="true" class="collapse">
                        <div class="form-group ">
                          <input type="text" name="about_dancing" placeholder="About Dancing" class="form-control">
                        </div>
                      </div>
                    </div>

                    <div class="col-md-4">
                      <div class="form-group">
                        <div class="checkbox">
                          <label data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                                <input type="checkbox"/>Other
                            </label>
                        </div>
                      </div>
                      <div id="collapseThree" aria-expanded="true" class="collapse">
                        <div class="form-group ">
                          <input type="text" name="other_hobby" placeholder="Friends Other Hobby" class="form-control">
                        </div>
                      </div>
                    </div>

                  </td>
                  <td><input class="form-control" id="about_friend" name="about_friend"></td>

        </tr>
    </tbody>


</table>
<a href="#" title="" class="add-friend">Add Friend</a>

<script>
    var counter = 1;
    jQuery('a.add-friend').click(function(event){
        event.preventDefault();
        counter++;
        var newRow = jQuery('<tr><td><input type="text" name="name' +
            counter + '"/></td><td><input type="text" name="mobile' +
            counter + '"/></td><td><div class="form-group"><div class="checkbox"><input type="checkbox" name="about_singing' +
            counter + '"/>Singing</div><input type="text" name="about_singing'+
            counter + '"/></div><div class="form-group"><div class="checkbox"><input type="checkbox" name="about_dancing' +
            counter + '"/>Dancing</div><input type="text" name="about_dancing'+
            counter + '"/></div><div class="form-group"><div class="checkbox"><input type="checkbox" name="other_hobby' +
            counter + '"/>Other</div><input type="text" name="other_hobby'+
            counter + '"/></div></td><td><input type="text" name="about_friend' +
            counter + '"/></td></tr>');
        jQuery('table.friends-list').append(newRow);
    });
</script>

使用JavaScript在OnClick按钮上添加表行并保存在Laravel中的数据库中

1 个答案: