How To Get Correct Column And Row Index?

Question

Given a table like:

Solution 1:

check this out and let me know

Baca Juga

$('#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>

JavaScript Charts

How To Get Correct Column And Row Index?

Solution 1:

Post a Comment for "How To Get Correct Column And Row Index?"