我如何在不获得重复内容的情况下附加对行计数上的分配元素？

Question

我试图根据表格中的行和行量（减去前四个）。我想创建内部更多数据选择的DIV元素。但是，每当它在前两个正确的元素之后创建两个错误的div，然后在第三个错误之后进行3个错误，依此类推。有人可以告诉我我在做什么错吗？

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" class="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 class="main_info_inner">';
  var rowCount = $('#produkttabelle tr').length - 4;
  alert(rowCount);

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

    $.each(bestellformular, function(index, tr) {
      product += '<div class="product_image product_element"><img src="img/image_missing_error.png" alt=""/></div>';
      product += '<div class="product_title product_element"><p>HLP Asian Saladbowl m.Thai-Fal</p><p class="summe_alt">Summe Alt: 20</p><p class="summe_neu">Summe Neu: 18</p></div>';
      product += '<div class="add_product"><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" class="main_info">
    <form class="datum">
      <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" class="main_info_inner"></div>
  <div class="container" id="csv-changes">
  </div>

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

</html>

更新：26.06.22

1. 列表项目
2. 读取CSV表并创建一个HTML表
3. 用户在顶部输入“交货日期” - 此交付日期将附加到
4. 基于CSV的创建html表创建元素的创建 日期内容之类的内容：产品图像，产品名称，位置编号
5. 可以选择以下元素，例如：选择“+”的产品，
6. 所选的产品将作为产品作为产品进入HTML表
7. 之后，用户选择了所有需要的产品，他可以导出将HTML表作为CSV文件导出，并且将保存一个文件。 CSV文件名将是“交货之日起”+输入的“ bestelformular”+

Answer 1

您的问题在于这里：

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

当您考虑它时，我知道为什么会发生这种情况，这是在说1个项目，然后跳过2：

item 1
skip 
skip 
item 2 <-end point

然后再次添加1个端点并跳过2，因此端点有2个项目，因此它重复

而不是eq，nth-type（）选择器会更好吗？

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

请参阅 https://api.jquery.com/nth-of-type-type-selector/

或使用每种方法，获取索引并执行A if（（（索引 + 1）％1 == 0）键入检查

有点像

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

我希望这会有所帮助

Answer 2

啊，对不起，我想念我很糟糕，我的不好，我不确定您是您的最终结果，但是这里有一个示例，将日期选择器添加到每个第4个项目中（计数0为1）

var bestellformular;
// Generates HTML Table out of CSV Table
function generateHtmlTable(bestellformular) {
  var html = '<table id="produkttabelle" class="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 class="main_info_inner">
      <div class="product_image product_element">
      <img src="img/image_missing_error.png" alt=""/>` + index + `</div>
      <div class="product_title product_element">
      <p>HLP Asian Saladbowl m.Thai-Fal</p><p class="summe_alt">Summe Alt: 20</p>
      <p class="summe_neu">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" class="lieferdatum" name="lieferdatum" /><br>'
      }
      product += '<div class="add_product"><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" class="main_info">
    <form class="datum">
      <label for="lieferdatum">Lieferdatum (DD.MM.YYYY):</label><br>
      <input type="text" id="lieferdatum" class="lieferdatum" name="lieferdatum"><br>
      <div id="create_table">Produkte erzeugen</div>
    </form>
  </div>
  <div id="main_info_inner" class="main_info_inner"></div>
  <div class="container" id="csv-changes">
  </div>
</body>

我希望这有所帮助，如果没有