Question

我正在开发一个项目并有一个想法，但不知道如何完成（PHP / JS新手）。

基本上，我在表单中有一个表，其中一行是复选框。我想检查框，并在提交表单时，它会发送所选行中每列的值。

例如： 1 - 域名| MatchedTo |百分比|复选框 2 - 域名| MatchedTo |百分比|复选框

如果选中第1行，我希望提交POST域名，匹配到和百分比值。

这是我到目前为止所做的：

<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提交，则可能需要创建您要提交的字符串。如果我理解你正在尝试做什么，那么下面的内容可能是一个起点。

请注意，这并不能解决实际发送数据的问题，它只是关于如何劫持表单并创建您正在寻找的格式。

＆＃13;

// 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);
})

＆＃13;

<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>

＆＃13;

PHP表单/表格 - 选中时发送行内容

1 个答案: