Question

我在旁边有一个HTML表，其中有几个td作为input字段，我的表是动态的，当页面加载时，我将表的第一行和focus附加在一起在第一个输入字段上，以我为例，即Item Name

我的行中有3个输入字段，分别是Item Name，Unit Qty和Disc%

当用户在ItemName输入字段中单击时，我正在从数据中搜索项目名称，该数据是用于填充项目名称的数组中的对象
选择Item NAme后，我将焦点移至下一个输入字段Unit Qty，然后将焦点移至下一个输入字段即Disc%之间，此过程正在进行一些计算。计算Total Amount
然后在此之后，当用户从Disc%中移出焦点时，我要追加一个新行，实际上我有一个函数在其中，我有要附加该行的代码，因此我要在焦点移出{时， {1}}
在焦点从Disc%移出之后，我希望焦点应该移到新行的Disc%上，并且应表现得像是在表现（就像从数据中搜索一样）等等。

我已在代码中注释了各行，以使用户更好地了解发生在哪里的情况

ItemName

function rowappend() // this one is appending row
{
  var markup = '<tr><td><input type="text" class="form-control commantd"name="itemNametd" id="itemNametd">' +
    '</td><td id="itemCodetd" class="commantd"></td>' +
    '<td><input type="text" class="form-control commantd"name="unitQtytd" id="unitQtytd"></td>' +
    '<td id="purRatetd" class="commantd"></td>' +
    '<td><input type="text" class="form-control commantd"name="discPercentagetd" id="discPercentagetd"></td>' +
    '<td id="discAmttd" class="commantd"></td>' +
    '<td id="gstPercentagetd" class="commantd"></td>' +
    '<td id="gstAmttd" class="commantd"></td>' +
    '<td id="totalAmttd" class="commantd"></td></tr>'
  $("table tbody").append(markup);
  $("itemNametd").next().focus();
}
rowappend()


var data = [ //data to populate Item Name search input field
  {
    "ItemName": "Butter"
  },
  {
    "ItemName": "Rice"
  },
  {
    "ItemName": "Milk"
  },
  {
    "ItemName": "Ice Cream"
  },
  {
    "ItemName": "Curd"
  }
]
var data1 = [{ // this data will be dynamic but for now to test i am using this single data
  "ItemName": "Butter",
  "ItemCode": 400564,
  "PurRate": 8,
  "DiscAmt": 6,
  "gstPercentage": 35,
  "gstAmt": 5
}]
var totalAmount = "";
var unitQuantity = "";
$(function() {
  let itemName = data.map(value => { //using autocomplete to for searching input field

    return value.ItemName;
  });
  $("#itemNametd").autocomplete({
    source: itemName
  });
});
$("#itemNametd").focusout(function() { //when user focus out from Item Name doing this

  data1.map(value => {
    $("#itemCodetd").text(value.ItemCode);
    $("#purRatetd").text(value.PurRate);
    $("#discAmttd").text(value.DiscAmt);
    $("#gstPercentahgetd").text(value.gstPercentage);
    $("#gstAmttd").text(value.gstAmt);

  });

});
$("#unitQtytd").focusout(function() { //when user focus out Unit Qty doing some calculation
  unitQuantity = $("#unitQtytd").val();
  purchaseRate = $("#purRatetd").text();
  totalAmount = (parseInt(unitQuantity) * parseInt(purchaseRate));
  $("#totalAmttd").text(totalAmount);

});
$("#discPercentagetd").focusout(function() { //here when user is focus out i am calling the fuinction which is creating new row

  rowappend()



});

我认为我使用错误的方法来完成此任务

注意：-，将来我可能会进行一些计算，所以请以这种方式帮助我

如果信息不够，我会提供所有信息，然后大家都可以在评论中问我

编辑

按照

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="container commonDivInvoice">
  <div class="row tableInvoice" id="commonDvScroll">
    <table class="table table-bordered" id="tableInvoice">
      <thead>
        <tr>
          <th id="itemNameth" class="commanth">Item Name</th>
          <th id="itemCodeth" class="commanth">Item Code</th>
          <th id="unitQtyth" class="commanth">Unit Qty</th>
          <th id="purRateth" class="commanth">Pur.Rate</th>
          <th id="discPercentageth" class="commanth">Disc%</th>
          <th id="discAmtth" class="commanth">Disc Amt</th>
          <th id="gstPercentageth" class="commanth">Gst%</th>
          <th id="gstAmtth" class="commanth">Gst Amt</th>
          <th id="totalAmtth" class="commanth">Total Amount</th>


        </tr>
      </thead>
      <tbody>


      </tbody>

    </table>

  </div>
</div>

的回答，

在焦点从Wils's移出新行之后，焦点也转移到新行的Disc%上，但是问题是新行追加了{{1} }当我在Item Name的输入字段中键入m时，页面加载时，最初在第一行中不起作用，所有包含autocomplete的项目名称都显示为下拉列表，但对于第二行，它不显示< / p>

Item Name

任何人在这里都请帮助我

Answer 1

您的代码有几个问题

两个最重要的是

您使用多个具有相同id的元素。但是id必须是唯一的。如果多个元素具有相同的元素（CSS是不同的），则JavaScript / jQuery将始终使用带有id的第一个元素。我在这里使用name而不是id
您将事件侦听器添加到元素，这些元素在运行时不存在。当您监听focusout事件时，仅创建第一个输入行。我听了整个文档中的focusout事件。如果您专注于输入，事件将冒泡到document，我将根据事件的target属性决定要做什么。

我对您的代码进行了一些重组，并进行了一些改进，但这远非完美。

"use strict";
console.clear()


const data = [ //data to populate Item Name search input field
  {"ItemName": "Butter"},
  {"ItemName": "Rice"},
  {"ItemName": "Milk"},
  {"ItemName": "Ice Cream"},
  {"ItemName": "Curd"}
]

const data1 = {// this data will be dynamic but for now to test i am using this single data
  butter: { 
    "ItemName": "Butter",
    "ItemCode": 400564,
    "PurRate": 8,
    "DiscAmt": 6,
    "gstPercentage": 35,
    "gstAmt": 5
  },
  rice: { 
    "ItemName": "Rice",
    "ItemCode": 400565,
    "PurRate": 3,
    "DiscAmt": 2,
    "gstPercentage": 20,
    "gstAmt": 8
  },
  milk: { 
    "ItemName": "Milk",
    "ItemCode": 200569,
    "PurRate": 1,
    "DiscAmt": 1,
    "gstPercentage": 50,
    "gstAmt": 2
  },
  'ice cream': { 
    "ItemName": "Ice cream",
    "ItemCode": 800002,
    "PurRate": 16,
    "DiscAmt": 2,
    "gstPercentage": 15,
    "gstAmt": 2
  },
  curd: { 
    "ItemName": "Curd",
    "ItemCode": 100289,
    "PurRate": 9,
    "DiscAmt": 1,
    "gstPercentage": 12,
    "gstAmt": 4
  },
}

var totalAmount = "";
var unitQuantity = "";


function rowappend(tbody) {// this one is appending row{
  
  const markup = 
`<tr>
  <td>
    <input type="text" class="form-control commantd" name="itemNametd">
  </td>
  <td name="itemCodetd" class="commantd"></td>
  <td>
    <input type="text" class="form-control commantd" name="unitQtytd">
  </td>
  <td name="purRatetd" class="commantd"></td>
  <td>
    <input type="text" class="form-control commantd" name="discPercentagetd">
  </td>
  <td name="discAmttd" class="commantd"></td> 
  <td name="gstPercentagetd" class="commantd"></td>
  <td name="gstAmttd" class="commantd"></td>
  <td name="totalAmttd" class="commantd"></td>
  
</tr>`
    
  $(tbody).append(markup);
  setTimeout(() => $("[name=itemNametd]", tbody).last().focus(), 100);

  const itemName = data.map(value => { //using autocomplete to for searching input field
    return value.ItemName;
  });
  $("[name=itemNametd]", tbody).last().autocomplete({
    source: itemName
  });
}
rowappend($('tbody', '#tableInvoice'))


function getValues(row) {
  const search = ($('[name=itemNametd]', row).val()).toString()
  const value = data1[search.toLowerCase()];
  if (value) {
    $(row).find("[name=itemCodetd]").text(value.ItemCode);
    $(row).find("[name=purRatetd]").text(value.PurRate);
    $(row).find("[name=discAmttd]").text(value.DiscAmt);
    $(row).find("[name=gstPercentahgetd]").text(value.gstPercentage);
    $(row).find("[name=gstAmttd]").text(value.gstAmt);
  }
}



function calc(row) {
  const unitQuantity = $(row).find("[name=unitQtytd]").val();
  const purchaseRate = $(row).find("[name=purRatetd]").text();
  const totalAmount = (parseInt(unitQuantity) * parseInt(purchaseRate));
  
  $(row).find("[name=totalAmttd]").text(totalAmount);
  
}

$(document).on('focusout', (e) => {
  const row = e.target.parentElement.parentElement
  if (e.target.matches('[name=discPercentagetd]')) {
    if ($(row).parent().find('tr').length - $(row).index() === 1) { // only last row
        rowappend(e.target.parentElement.parentElement.parentElement)
    }
  }
  
  if (e.target.matches('[name=unitQtytd]')) {
    calc(e.target.parentElement.parentElement)
  }

  if (e.target.matches("[name=itemNametd]")) {
    getValues(e.target.parentElement.parentElement)
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<div class="container commonDivInvoice">
  <div class="row tableInvoice" id="commonDvScroll">
    <table class="table table-bordered" id="tableInvoice">
      <thead>
        <tr>
          <th id="itemNameth" class="commanth">Item Name</th>
          <th id="itemCodeth" class="commanth">Item Code</th>
          <th id="unitQtyth" class="commanth">Unit Qty</th>
          <th id="purRateth" class="commanth">Pur.Rate</th>
          <th id="discPercentageth" class="commanth">Disc%</th>
          <th id="discAmtth" class="commanth">Disc Amt</th>
          <th id="gstPercentageth" class="commanth">Gst%</th>
          <th id="gstAmtth" class="commanth">Gst Amt</th>
          <th id="totalAmtth" class="commanth">Total Amount</th>
        </tr>
      </thead>
      <tbody>

      </tbody>

    </table>

  </div>
</div>

Answer 2

在这种情况下，您可以分配元素选择器目标。创建新的DOM元素后，您必须再次添加侦听器。

function rowappend() // this one is appending row
{
  var markup = $('<tr><td><input type="text" class="form-control commantd"name="itemNametd" id="itemNametd">' +
    '</td><td id="itemCodetd" class="commantd"></td>' +
    '<td><input type="text" class="form-control commantd"name="unitQtytd" id="unitQtytd"></td>' +
    '<td id="purRatetd" class="commantd"></td>' +
    '<td><input type="text" class="form-control commantd"name="discPercentagetd" id="discPercentagetd"></td>' +
    '<td id="discAmttd" class="commantd"></td>' +
    '<td id="gstPercentagetd" class="commantd"></td>' +
    '<td id="gstAmttd" class="commantd"></td>' +
    '<td id="totalAmttd" class="commantd"></td></tr>');
    
  $("table tbody").append(markup);
  $("#itemNametd",markup).focus();
}
rowappend()


var data = [ //data to populate Item Name search input field
  {
    "ItemName": "Butter"
  },
  {
    "ItemName": "Rice"
  },
  {
    "ItemName": "Milk"
  },
  {
    "ItemName": "Ice Cream"
  },
  {
    "ItemName": "Curd"
  }
]
var data1 = [{ // this data will be dynamic but for now to test i am using this single data
  "ItemName": "Butter",
  "ItemCode": 400564,
  "PurRate": 8,
  "DiscAmt": 6,
  "gstPercentage": 35,
  "gstAmt": 5
}]
var totalAmount = "";
var unitQuantity = "";
$(function() {
  let itemName = data.map(value => { //using autocomplete to for searching input field

    return value.ItemName;
  });
  $("#itemNametd").autocomplete({
    source: itemName
  });
});
$("#itemNametd").focusout(function() { //when user focus out from Item Name doing this

  data1.map(value => {
    $("#itemCodetd").text(value.ItemCode);
    $("#purRatetd").text(value.PurRate);
    $("#discAmttd").text(value.DiscAmt);
    $("#gstPercentahgetd").text(value.gstPercentage);
    $("#gstAmttd").text(value.gstAmt);

  });

});
$("#unitQtytd").focusout(function() { //when user focus out Unit Qty doing some calculation
  unitQuantity = $("#unitQtytd").val();
  purchaseRate = $("#purRatetd").text();
  totalAmount = (parseInt(unitQuantity) * parseInt(purchaseRate));
  $("#totalAmttd").text(totalAmount);

});

    $('body').on('focusout','#discPercentagetd', function(){
      rowappend()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="container commonDivInvoice">
  <div class="row tableInvoice" id="commonDvScroll">
    <table class="table table-bordered" id="tableInvoice">
      <thead>
        <tr>
          <th id="itemNameth" class="commanth">Item Name</th>
          <th id="itemCodeth" class="commanth">Item Code</th>
          <th id="unitQtyth" class="commanth">Unit Qty</th>
          <th id="purRateth" class="commanth">Pur.Rate</th>
          <th id="discPercentageth" class="commanth">Disc%</th>
          <th id="discAmtth" class="commanth">Disc Amt</th>
          <th id="gstPercentageth" class="commanth">Gst%</th>
          <th id="gstAmtth" class="commanth">Gst Amt</th>
          <th id="totalAmtth" class="commanth">Total Amount</th>


        </tr>
      </thead>
      <tbody>


      </tbody>

    </table>

  </div>
</div>

Answer 3

我认为您应该为表分配一个变量：

文档。 getElementById（'I'd of table body'）;

要创建记录，请将其构建为元素：

document.createElement（'tr'）， document.createElement（'td'）; 附加到tr。视需要重复...

然后将新的记录元素追加到表主体。可以添加每个元素，例如添加类或事件之类的属性。

对于此最终记录事件，添加一个on模糊处理程序。 document.addEventHandler（'blur'，function callback）;

追加的新行的行为不像上一行（行）

3 个答案: