How can I append div elements on the count of rows without getting duplicate content?-CodePudding

I am trying to read the number of rows in a table and based on the amount of rows (minus the first four). I want to create div elements with some more data picking inside. But every time it creates two wrong divs after the first two right elements and then 3 wrong after the third one and so on. Could someone please tell me what am I doing wrong?

var bestellformular;
$.ajax({
  type: "GET",
  url: "https://rsabaugmbh.de/wp-content/uploads/bestellformular.csv",
  bestellformularType: "text",
  success: function(response) {
    bestellformular = $.csv.toArrays(response);
    generateHtmlTable(bestellformular);
  }

});

// Generates HTML Table out of CSV Table
function generateHtmlTable(bestellformular) {
  var html = '<table id="produkttabelle" >';

  if (typeof(bestellformular[0]) === 'undefined') {
    return null;
  } else {
    $.each(bestellformular, function(index, row) {

      html  = '<tr>';
      $.each(row, function(index, colbestellformular) {
        html  = '<td>';
        html  = colbestellformular;
        html  = '</td>';
      });
      html  = '</tr>';
    });
    html  = '</tbody>';
    html  = '</table>';
    alert(html);
    $('#csv-changes').append(html);
  };



  // Creates Products based on the CSV Table
  var product = '<div >';
  var rowCount = $('#produkttabelle tr').length - 4;
  alert(rowCount);

  if (typeof(bestellformular[0]) === 'undefined') {
    return null;
  } else {

    $.each(bestellformular, function(index, tr) {
      product  = '<div ><img src="img/image_missing_error.png" alt=""/></div>';
      product  = '<div ><p>HLP Asian Saladbowl m.Thai-Fal</p><p >Summe Alt: 20</p><p >Summe Neu: 18</p></div>';
      product  = '<div ><img src="img/add_row.png" alt=""/></div></div>';


      $('#main_info').append(product);


    });
  };

}

$(document).ready(function() {

  $("#lieferdatum").datepicker({
    minDate: 0,
    dateFormat: "dd.mm.yy"


  });
  $("#lieferdatum").datepicker("option", "dateFormat", "dd.mm.yy");
  $("#lieferdatum").datepicker("option", "minDate", 0);



  // Lieferdatum & Maschinen-Anzahl
  $("#create_table").click(function() {

    var lieferdatum = $('#lieferdatum').val();
    var maschinen = $('#maschinen').val() - 1;


    // Lieferdatum
    $('#produkttabelle').find('tr:eq(1)').find('td:eq(2)').html(lieferdatum);





  });
});

html {
  height: 100%;
  min-height: 100% !important;
  font-family: arial;
  background: #f1f1f1;
}

#csv-changes table {
  display: inline-block;
  margin: 0 auto;
}

#csv-changes tr,
td {
  border: 1px solid black;
}

#csv-changes table tr td {
  height: 30px;
}

#csv-changes table tr:nth-child(odd) {
  background: #e8e8e8;
}

.container {
  margin: 0 auto;
  text-align: center;
}

#create_table {
  display: inline-block;
  margin: 30px;
  padding: 20px 15px;
  background: #f7f7f7;
  border-radius: 20px;
  text-align: center;
}

#create_table:hover {
  cursor: pointer;
  opacity: 0.7;
}

.main_info {
  background: white;
  max-width: 1450px;
  margin: 0 auto;
  padding-bottom: 50px;
}

.datum {
  max-width: 250px;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.main_info_inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  max-width: 1360px;
  width: 100%;
  padding: 30px 20px;
  margin: 50px auto;
  border-radius: 30px;
  border: 2px solid #dddddd;
  transition: all 0.4s ease;
}

.main_info_inner:hover {
  background: #dddddd;
}

.main_info_inner.added {
  background: #F3FFEE;
  border-color: #1FC243;
}

.product_element {
  display: inline-block;
  vertical-align: middle;
}

.product_table {
  background: white;
  max-width: 70%;
  overflow: scroll;
}

.product_table table tbody tr {
  text-align: center;
}

.product_table table tbody tr:first-child {
  background: #97d9ff;
}

.product_table table tbody tr:nth-child(even):not(:first-child) {
  background: #ffe097;
}

.product_image,
.product_title {
  margin-right: 30px;
}

.summe_alt {
  margin-bottom: 0;
}

.summe_neu {
  margin-top: 0;
}

.add_product img {
  max-width: 50px;
  margin-left: 20px;
}

.add_product img:hover {
  opacity: 0.7;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<header>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="robots" content="NONE,NOARCHIVE" />
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
  <link rel="stylesheet" href="css/date-picker.css" type="text/css" media="all" />
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

  <title>Bestellungen</title>
</header>

<body>
  <div id="main_info" >
    <form >
      <label for="lieferdatum">Lieferdatum (DD.MM.YYYY):</label><br>
      <input type="text" id="lieferdatum" name="lieferdatum"><br>
      <div id="create_table">Produkte erzeugen</div>
    </form>
  </div>
  <div id="main_info_inner" ></div>
  <div  id="csv-changes">
  </div>

  <script>
    $(function() {
      $("#lieferdatum").datepicker();
    });
  </script>
  <script src="js/script1.0.js"></script>
</body>

</html>

CodePudding user response：

your problem lies here:

$('#produkttabelle').find('tr:eq(1)').find('td:eq(2)').html(lieferdatum);

when you think about it I you see why it's happening, it's saying, do 1 item and skip 2:

item 1
skip 
skip 
item 2 <-end point

then add 1 to end point again and skip 2, so end point has 2 item and thus it repeats

rather than eq, would a nth-of-type() Selector be better?

$('.myclass:nth-child(3n)')

see https://api.jquery.com/nth-of-type-selector/

or use an each method, get the index and do a if ((index 1) % 1 == 0) type check

a bit like

$('myclass').each(function(i) {
     if ((i   1) % 4 == 0){
     //every 4th item do something

I hope this helps

CodePudding user response：

Ah yes sorry i miss understood sorry my bad, I wasn't 100% sure what you were after as your end result but here is an example that will add the date picker to every 4th item (counting 0 as 1)

var bestellformular;
// Generates HTML Table out of CSV Table
function generateHtmlTable(bestellformular) {
  var html = '<table id="produkttabelle" >';
  if (typeof(bestellformular[0]) === 'undefined') {
    return null;
  } else {
    $.each(bestellformular, function(index, row) {
      html  = '<tr>';
      $.each(row, function(index, colbestellformular) {
        html  = '<td>';
        html  = colbestellformular;
        html  = '</td>';
      });
      html  = '</tr>';
    });
    html  = '</tbody>';
    html  = '</table>';
    $('#csv-changes').append(html);
  };
  var rowCount = $('#produkttabelle tr').length - 4;
  if (typeof(bestellformular[0]) === 'undefined') {
    return null;
  } else {
    $.each(bestellformular, function(index, tr) {
      let product = `<div >
      <div >
      <img src="img/image_missing_error.png" alt=""/>`   index   `</div>
      <div >
      <p>HLP Asian Saladbowl m.Thai-Fal</p><p >Summe Alt: 20</p>
      <p >Summe Neu: 18</p></div>`

      //Add somthing diffrent ever 4th item assuming your counting 0 as 1
      if ((index % 3) === 0 && index > 0) {
        product  = '<input type="text" id="lieferdatum"  name="lieferdatum" /><br>'
      }
      product  = '<div ><img src="img/add_row.png" alt=""/></div></div>';
      $('#main_info').append(product);
      $(".lieferdatum").datepicker();
    });
  };
}

$(document).ready(function() {
  //debugger;
  $.ajax({
    type: "GET",
    url: "https://cors-anywhere.herokuapp.com/https://rsabaugmbh.de/wp-content/uploads/bestellformular.csv",
    bestellformularType: "text",
    //secure: true,
    success: function(response) {
      bestellformular = $.csv.toArrays(response);
      generateHtmlTable(bestellformular);
    },
    error: function(xhr, textStatus, errorThrown) {
      console.log(errorThrown);
    },
  }).done(function(data) {
    if (console && console.log) {
      console.log("Sample of data:", data.slice(0, 100));
    }
  }).fail(function(xhr, textStatus, errorThrown) {
    console.log(errorThrown)
  });

  $(".lieferdatum").datepicker({
    minDate: 0,
    dateFormat: "dd.mm.yy"
  });
  $(".lieferdatum").datepicker("option", "dateFormat", "dd.mm.yy");
  $(".lieferdatum").datepicker("option", "minDate", 0);
  // Lieferdatum & Maschinen-Anzahl
  $("#create_table").click(function() {
    var lieferdatum = $('#lieferdatum').val();
    var maschinen = $('#maschinen').val() - 1;
    // Lieferdatum
    $('#produkttabelle').find('tr:eq(1)').find('td:eq(2)').html(lieferdatum);
  });
});

html {
  height: 100%;
  min-height: 100% !important;
  font-family: arial;
  background: #f1f1f1;
}

#csv-changes table {
  display: inline-block;
  margin: 0 auto;
}

#csv-changes tr,
td {
  border: 1px solid black;
}

#csv-changes table tr td {
  height: 30px;
}

#csv-changes table tr:nth-child(odd) {
  background: #e8e8e8;
}

.container {
  margin: 0 auto;
  text-align: center;
}

#create_table {
  display: inline-block;
  margin: 30px;
  padding: 20px 15px;
  background: #f7f7f7;
  border-radius: 20px;
  text-align: center;
}

#create_table:hover {
  cursor: pointer;
  opacity: 0.7;
}

.main_info {
  background: white;
  max-width: 1450px;
  margin: 0 auto;
  padding-bottom: 50px;
}

.datum {
  max-width: 250px;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.main_info_inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  max-width: 1360px;
  width: 100%;
  padding: 30px 20px;
  margin: 50px auto;
  border-radius: 30px;
  border: 2px solid #dddddd;
  transition: all 0.4s ease;
}

.main_info_inner:hover {
  background: #dddddd;
}

.main_info_inner.added {
  background: #F3FFEE;
  border-color: #1FC243;
}

.product_element {
  display: inline-block;
  vertical-align: middle;
}

.product_table {
  background: white;
  max-width: 70%;
  overflow: scroll;
}

.product_table table tbody tr {
  text-align: center;
}

.product_table table tbody tr:first-child {
  background: #97d9ff;
}

.product_table table tbody tr:nth-child(even):not(:first-child) {
  background: #ffe097;
}

.product_image,
.product_title {
  margin-right: 30px;
}

.summe_alt {
  margin-bottom: 0;
}

.summe_neu {
  margin-top: 0;
}

.add_product img {
  max-width: 50px;
  margin-left: 20px;
}

.add_product img:hover {
  opacity: 0.7;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.min.js"></script>

<body>
  <div id="main_info" >
    <form >
      <label for="lieferdatum">Lieferdatum (DD.MM.YYYY):</label><br>
      <input type="text" id="lieferdatum"  name="lieferdatum"><br>
      <div id="create_table">Produkte erzeugen</div>
    </form>
  </div>
  <div id="main_info_inner" ></div>
  <div  id="csv-changes">
  </div>
</body>

I hope this help, if not can you mock up an image or something to show the end result your after