javascript - 如何获得正确的列索引和行索引？

Question

给定一个像这样的表:

<table id="table-data">
  <thead>
    <tr>
      <th></th>
      <th>
        <input class="form-control column_data" type="text" autofocus placeholder="Title" name="Name"  value="">
      </th>
      <th>
        <input class="form-control column_data" type="text" autofocus placeholder="Title" name="Name"  value="">
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="tr_clone">
      <td><input class="form-control row_data" type="text" autofocus placeholder="data" name="who" value=""></td>
    </tr>
    <tr class="tr_clone">
      <td><input class="form-control row_data" type="text" autofocus placeholder="data" name="who" value=""></td>
    </tr>
  </tbody>
</table>

如何保存第列输入值及其相对行输入数据？

我尝试证明一个类，但它没有让我有任何进展:

$('#saveTable').on("click", function() {
  var myTableArray = $("table th input").val();
  var $this = $(this);
  var myIndex = 0;
    $("table th input").each(function() {
    $(this).attr("data-index", "_" + myIndex);
    var thisLabelData = $(this).attr("data-index");
    $("table tbody input").each(function() {
        console.log(thisLabelData);
      if(!$(this).hasClass(thisLabelData)) {
        $(this).addClass(thisLabelData);
      }
    });
    //$this.push(myTableArray);
    myIndex++;
  });
  //console.log(myTableArray);
});

jsFiddle playground

Answer 1

看看这个并告诉我

$('#saveTable').on("click", function() {
 
   var results={};
   $('thead input').each(function(){
    results[$(this).val()] = [];
   });
   
   var resultsKeys = Object.keys(results);
   
   $('tbody input').each(function(){
    var colIndex = $(this).parent().index();
   
    var rowIndex = $(this).closest('tr').index();
    
    results[resultsKeys[colIndex-1]]
    .push("(" + (colIndex-1) + " " + rowIndex + ") -> " + 
    ($(this).val() !== '' ? $(this).val() : "0"));
   });
   
   console.log(results);
   
 
});


    $('#table-data input').on("change", function() {
      $(this).attr("value", $(this).attr("value"));
    });

    $(".table-striped tbody tr th input").each(function(){
      $(this).addClass("column_data");
    });

    $("#addTr").on('click', function() {
      var $tr    = $('tbody tr.tr_clone');
      var $clone = $tr.clone();
      $clone.find(':text').val('');
      $tr.after($clone);
      $(".table-striped tbody tr td input").each(function(){
        $(this).addClass("row_data");
      });
    });

    $("#addTd").on("click", function(){
      $(".table-striped thead tr").append('<th><button type="button" class="btn btn-primary removeColumn btn-block">Delete column</button><br><input class="form-control" type="text" autofocus placeholder="Title" name="Name"></th>');
      $(".table-striped tbody tr").append('</td> <td><input type="text" placeholder="data" name="datepicker_end" class="form-control"></td>');
      $(document).find("thead th input").each(function(){
        $(this).addClass("column_data");
      });
      $(".table-striped tbody tr td input").each(function(){
        $(this).addClass("row_data");
      });
    });
    
        $(document).on("click", ".removeRow", function(){
     $(this).parent().parent()
      $(this).parent().parent().remove();
    });

    $(document).on("click", ".removeColumn", function(){
      var index = $(this).parent().index() + 1;
      $(this).closest("table").find("td:nth-child(" + index + ")").remove();
      $(this).parent().remove();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col">
      <hr>
      <h3>Insert your data</h3>
      <button id="addTd" type="button" class="btn btn-primary">
        Add Column
      </button>
      <button id="addTr" type="button" class="btn btn-primary">
        Add Row
      </button>
      <button type="button" class="btn btn-danger" id="saveTable">Save table</button>
      <hr>
     <div class="table-responsive">
      <table id="table-data" class="table table-bordered table-striped table-hover">
        <thead>
          <tr>
            <th></th>
            <th>
              <button type="button" class="btn btn-primary removeColumn btn-block">Delete column</button>
              <br>
              <input class="form-control column_data" type="text" autofocus placeholder="Title" name="Name"  value="">
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="tr_clone">
            <td><button type="button" class="btn btn-primary removeRow">Delete row</button></td>
            <td><input class="form-control row_data" type="text" autofocus placeholder="data" name="who" value=""></td>
          </tr>
        </tbody>
      </table>
     </div>
    </div>
  </div>
 </div>