仅将复选框选定的行值插入 MySQL 表

Question

JSFiddle 链接下方是一个工作表单，其中从动态行提交的表单值使用 ajax 保存到 mysql 表中，无需任何页面刷新。表单提交的结果（即成功或错误）将显示在一个 div 中，该 div 使用 javascript 具有一个 id 'results'。

JSFiddle Demo

表单标记

    <form name="names" id="names" method="post" action="">
  <div class="container">
    <div class="table-responsive">
      <button type="button" class="btn btn-success addmore">Add</button>
      <button type="button" class="btn btn-danger delete">Remove</button>
      <br />
      <table id="demo" class="table table-bordered table-condensed table-striped table-hover">
        <thead>
          <tr>
            <th>
              <input class="check_all" type="checkbox" onclick="select_all()" />
            </th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>

          <tr>
            <td>
              <input type="checkbox" class="case" />
            </td>
            <td>
              <input class="form-control" type="text" name="fname[]" id="fname_1" required>
            </td>
            <td>
              <input class="form-control" type="text" name="lname[]" id="lname_1" required>
            </td>
          </tr>
        </tbody>
      </table>
      <button type="submit" class="btn btn-primary">Submit</button>
</form>

<div id="results"></div>
<div id="results2"></div>
</div>
<!-- ./table-responsive -->

</div>

用于添加/删除表格行、复选框行选择的 Javascript

    $(".delete").on('click', function() {
  $('.case:checkbox:checked').parents("tr").remove();
  $('.check_all').prop("checked", false);
  check();
});


var i = $('table tr').length;


$(".addmore").on('click', function() {
  count = $('table tr').length;
  var data = "<tr><td><input type='checkbox' class='case'/></td>";
  data += "<td><input class='form-control' id='fname_" + i + "' name='fname[]' required/></td>";
  data += "<td><input class='form-control' id='lname_" + i + "' name='lname[]' required/></td></tr>";
  //alert(data);
  $('table').append(data);
  row = i;
  i++;
});



function select_all() {
  $('input[class=case]:checkbox').each(function() {
    if ($('input[class=check_all]:checkbox:checked').length == 0) {
      $(this).prop("checked", false);
    } else {
      $(this).prop("checked", true);

    }
  });
}

function check() {
  obj = $('table tr').find('span');
  $.each(obj, function(key, value) {
    id = value.id;
    var selected = $('#' + id).html(key + 1);

  });
}

使用 Ajax 提交表单的 Javascript

    // form submission through ajax
$(document).ready(function() {
  $(function() {
    $("#names").on("submit", function(e) {
      e.preventDefault();
      $.ajax({
        type: "post",
        url: "savename.php",
        data: $(this).serialize(),
        success: function(response) {
          if (response == "Name creation successfull.") {
            $("#results").html('<div class="alert alert-success"><button type="button" class="close">×</button>' + response + '</div><br>');

          } else {
            $("#results2").html('<div class="alert alert-success"><button type="button" class="close">×</button>' + response + '</div><br>');

          }

          //timing the alert box to close after 5 seconds
          window.setTimeout(function() {
            $(".alert").fadeTo(500, 0).slideUp(500, function() {
              $(this).remove();
            });
          }, 2000);

          //Adding a click event to the 'x' button to close immediately
          $('.alert .close').on("click", function(e) {
            $(this).parent().fadeTo(500, 0).slideUp(500);
          });
          $('#names')[0].reset();


        },
        error: function(response) {
          alert(response);
        }
      });
    });
  });

});

我喜欢实现的是这个，

1. 用户首先通过选中每行开头的复选框来选择他/她想要插入到 mysql 表中的行。

2. 选择行后，单击提交按钮后，只有那些选定的行值应插入到 mysql 表中。

   尝试通过尝试本网站上与此类似的各种帖子中的解决方案来实现这一点，但没有成功。

Answer 1

在此stackoverflow 帖子中使用了用户 skobaljic（非常感谢）提供的解决方案。使用此代码现在只能将那些来自所选行的表单值发布到 mysql 表中。

Updated JSFiddle Working Demo

以下行仅用于调试目的，完成后注释掉。

$('.submit_data').text(toPost);

虽然代码可以正常工作并完成工作，但对于 javascript，我只是一个新手，因此需要专家意见将这篇文章标记为已解决。