php表单/表格 - 检查时发送行内容

Question

我正在从事一个项目并有一个想法，但不确定如何完成（新的php/js）。

基本上，我的表格中有一个表，一行是一个复选框。我想选中该框（ES），当提交表单时，它会在选定行中发送每列的值。

例如：1-域|匹配|百分比|复选框2-域|匹配|百分比|复选框

如果检查了第1行，我希望提交以发布域，匹配和百分比值。

这是我到目前为止所拥有的：

<script type="text/javascript">
  $('#test-form').submit(function(event) {
    event.preventDefault();
    var buttonAction = event.originalEvent.explicitOriginalTarget.value;
    var formData = $(this).serialize();
    var varData = formData + "&action=" + buttonAction;
    $.ajax({
      type: 'POST',
      url: 'test_submit.php',
      data: varData,
      success: function() {
        window.location.reload(true);
        console.log("Form posted successfully.", varData);
      }
    })
  });
</script>

<form method="POST" id="test-form">
  <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
    <thead>
      <tr>
        <th>Ratio</th>
        <th>Domain</th>
        <th>Matched</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr id="6" role="row" class="odd">
        <td>50</td>
        <td class="sorting_1">www.test.com</td>
        <td class="sorting_1">anothertest2.com</td>
        <td><button type="button" class="btn btn-danger del_domain" domain="www.test.com">Remove</button>
          <button type="button" class="btn btn-primary update_domain" domain="www.test.com" matchedto="anothertest2.com">Keep</button>
          <input name="domain[]" value="www.test.com" type="checkbox"></td>
      </tr>
      <tr id="6" role="row" class="odd">
        <td>50</td>
        <td class="sorting_1">www.test2.com</td>
        <td class="sorting_1">anothertest2.com</td>
        <td><button type="button" class="btn btn-danger del_domain" domain="www.test2.com">Remove</button>
          <button type="button" class="btn btn-primary update_domain" domain="www.test.com" matchedto="anothertest2.com">Keep</button>
          <input name="domain[]" value="www.test2.com" type="checkbox"></td>
      </tr>
    </tbody>
  </table>
  <button class="btn btn-success" type="submit" value="save"><span class="fa fa-arrow-right">Save Selected</span></button>
  <button class="btn btn-danger" type="submit" value="delete"><span class="fa fa-times">Delete Selected</span></button>
  <button class="btn btn-warning" type="reset" value="reset"><span class="fa fa-times">Clear Selected</span></button>
</form>

我假设我需要为每列创建一个输入字段吗？检查盒子时如何发布所有这些字段？

感谢您的任何帮助。

Answer 1

如果您要通过Ajax提交，则可能需要创建要提交的字符串。如果我明白您想做什么，那么以下内容可能是一个起点。

请注意，这并不能解决实际发送数据，而是关于如何劫持表单并创建您要寻找的格式的信息。

// First, I'm stopping the default behaviors
$("button").on("click", function(event){
  event.stopPropagation();
  event.preventDefault();
})
// Now, when we click save, I want to format
//  a string.
$("button[value='save']").on("click", function(){
  var returnString = "";
  
  // The following selector gets all the rows
  //   that have a CHECKED checkbox. Note I
  //   don't get the checkbox, simply the row.
  var rowEls = $("#test-form").find("tr:has(input[type='checkbox']:checked) ");
  
  // For every row, we'll add to our string...
  rowEls.each(function(){
    var rowEl = $(this);
    
    // First, a row id
    returnString += rowEl.attr("id")+" - ";
    var cells = rowEl.children("td");
    
    // Next the contents of each cell THAT
    //  HAS A data-content ATTRIBUTE. This
    //  way, we don't get the remove/keep.
    cells.each(function(){
      if($(this).data("content")){
        returnString += $(this).data("content")+"="+$(this).text();
        if($(this).not(":last")) 
          returnString += " | ";
      }
    })
    
    returnString += "    ";
  })
  
  console.log(returnString);
})

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" id="test-form">
  <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
    <thead>
      <tr>
        <th>Ratio</th>
        <th>Domain</th>
        <th>Matched</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr id="6" role="row" class="odd">
        <td data-content="ratio">50</td>
        <td class="sorting_1" data-content="domain">www.test.com</td>
        <td class="sorting_1" data-content="matched">anothertest2.com</td>
        <td><button type="button" class="btn btn-danger del_domain" domain="www.test.com">Remove</button>
          <button type="button" class="btn btn-primary update_domain" domain="www.test.com" matchedto="anothertest2.com">Keep</button>
          <input name="domain[]" value="www.test.com" type="checkbox"></td>
      </tr>
      <tr id="6" role="row" class="odd">
        <td data-content="ratio">50</td>
        <td class="sorting_1" data-content="domain">www.test2.com</td>
        <td class="sorting_1" data-content="matched">anothertest2.com</td>
        <td><button type="button" class="btn btn-danger del_domain" domain="www.test2.com">Remove</button>
          <button type="button" class="btn btn-primary update_domain" domain="www.test.com" matchedto="anothertest2.com">Keep</button>
          <input name="domain[]" value="www.test2.com" type="checkbox"></td>
      </tr>
    </tbody>
  </table>
  <button class="btn btn-success" type="submit" value="save"><span class="fa fa-arrow-right">Save Selected</span></button>
  <button class="btn btn-danger" type="submit" value="delete" disabled><span class="fa fa-times">Delete Selected</span></button>
  <button class="btn btn-warning" type="reset" value="reset" disabled><span class="fa fa-times">Clear Selected</span></button>
</form>