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

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

JavaScript Download

How To Get Correct Column And Row Index?

Solution 1:

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