程序员经验分享-hwhale

附加的新行的行为与前一行（行）不同

2024-04-29

我有一个 HTML 表格，里面有几个td as input字段，我的表格是动态的，当页面加载时，我将附加表格的第一行并且focus在第一个输入字段中，就我而言，即Item Name

我的行中有 3 个输入字段，它们是Item Name,Unit Qty and Disc%

  • 当用户点击内部时ItemName输入字段我正在从数据中搜索项目名称，该数据是数组内的对象以填充项目名称
  • 选择后Item NAme我正在将焦点转移到下一个输入字段，即Unit Qty然后将焦点集中到下一个输入字段，即Disc%在这之间正在进行一些计算Total Amount
  • 然后当用户的注意力从Disc%我正在附加一个新行，实际上我有一个函数，其中有代码来附加该行，所以我在焦点之外调用该函数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>

从我的角度来看，我认为我使用错误的方法来完成这项任务

NOTE :-将来，在每个焦点上，我可能会做一些计算，所以请以这种方式帮助我

我已经提供了所有信息，如果还不够的话大家可以在评论里问我

EDIT

as per Wils's焦点离开后回答Disc%正在追加新行，焦点也转移到新行Item Name但问题是当新行附加时autocomplete当我在输入字段中输入 m 时，页面加载时最初在第一行不起作用Item Name所有项目名称包含m显示为下拉菜单，但第二行未显示

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>

这里有人请帮助我


您的代码有几个问题

最重要的两个是

  • 您使用多个具有相同元素的元素id. But ids 必须是唯一的。如果多个元素具有相同的 id（CSS 不同），JavaScript/jQuery 将始终使用第一个具有 id 的元素。我用了name代替id here
  • 您可以将事件侦听器添加到运行时不存在的元素中。当您收听时，仅创建第一个输入行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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

htmltable

附加的新行的行为与前一行（行）不同 的相关文章

随机推荐

  • GCM 条款和条件

    有谁知道在哪里可以找到有关哪些内容可以通过 GCM 通知发送以及哪些内容不可以发送的条款和条件 我似乎在任何地方都找不到任何文档 当您注册开设 Google API 帐户时 您会得到这些条款和条件 https developers goog

  • 包java.time不存在，jdk1.8

    嗯 我刚刚开始从事代号工作 我对 Java 有相当不错的经验 我的代码一切都很好 没有任何问题 但在编译时我得到了这个 error package java time does not exit import java time Local

  • 如何在同一个项目中连接两个数据库MySQL和MongoDB？是否可以？

    目前我正在使用 Hibernate MySQL 和 Spring 配置对我来说运行良好 但是一旦我配置了另一个配置 mongo config xml 文件并尝试使用 mongodb 运行测试用例 它就显示创建名为 的 bean 时出错从第一

  • EPERM：不允许操作，mkdir 'C:\Program Files\nodejs\node_modules\.staging

    我正在尝试在我的项目上运行 npm install 但它显示 EPERM 不允许操作 mkdir C Program Files nodejs node modules staging 我没有 root 管理访问权限 我在我的系统中以本地用

  • ？ LIKE（列 || '%'）

    我可以有这样的条件吗 SELECT FROM table WHERE LIKE column 哪里的 是一个字符串参数值 例如 这些参数值 当列等于时应返回 true admin products admin products 1 admi

  • Boto3 - 打印 AWS 实例平均 CPU 利用率

    我正在尝试仅打印 AWS 实例的平均 CPU 利用率 此代码将打印出 响应 但最后的 for 循环不会打印平均利用率 有人可以帮忙吗 先感谢您 import boto3 import sys from datetime import dat

  • 如何设置报表服务器实例？

    我正在尝试设置 Microsoft SQL Server Reporting Services 我打开 Reporting Services 配置管理器 它要求输入服务器名称 问题是 我不知道服务器名称 因为据我所知还没有设置报表服务器 那

  • 以编程方式创建进度绘制

    我有一个场景 我需要有大量的进度条可绘制对象 我无法为所有这些创建 xml 资源 因为我希望用户选择一种颜色 然后用于动态创建可绘制对象 下面是 xml 中的一个这样的可绘制对象 我如何以编程方式创建这个精确的可绘制对象

  • Mongoose 更新或插入许多文档

    我正在尝试使用最新版本的 mongoose 插入对象数组 或者更新相应的产品 ID 是否已存在 我一生都无法找出正确的使用方法 bulkWrite updateMany 等 而且我似乎无法在不出现错误的情况下找出语法 例如 我正在尝试 Pr

  • 在等式约束的情况下求解线性规划

    我问了一个问题 可以在这里找到 计算最优组合 https stackoverflow com questions 17232596 computing the optimal combination 并有人建议线性规划 我查阅了线性规划和单

  • 从以元组为键的字典中获取 pandas 数据框

    我是Python新手 并且已经在这个问题上挣扎了一段时间 我有一个这样的字典 dict1 a a 5 a b 10 a c 11 b a 4 b b 8 b c 3 我想做的是将其转换为 pandas 数据框 如下所示 a b c a 5

  • 无法在 Eclipselink 上合并日期

    我的会话 bean 不会对托管实体执行更新 我已经包含了相关类的代码 当我使用 prime faces 计划组件修改事件的日期字段并将修改后的实体传递给会话 bean 并调用 em merge event 时 实体管理器不会尝试更新实体 并

  • 使用文本框搜索 datagridview 中的列 (vb.net)

    如何使用文本框搜索 datagridview 中的列 我正在使用 vb net 2010 我有一个带有数据源的 Datagridview 下面是我用于填充 datagridview 的代码 网格视图将有 4 列 Private Sub Lo

  • 将 ddply + mutate 与自定义函数一起使用？

    I use ddply相当频繁 但历史上有summarize 偶尔mutate 并且只有基本功能 例如mean var1 var2等等 我有一个数据集 我试图在其中应用一个自定义的 更复杂的函数 并开始尝试深入研究如何做到这一点ddply

  • 对自定义类进行排序而不使用“key”参数？

    您可以对数组进行排序myclass通过使用key论证sorted功能 sortedlist sorted myclasses key lambda obj obj myproperty 有没有办法为我们的班级定义自然顺序 也许有一些神奇的方

  • 我应该在我的网站的什么位置添加他人作品的版权声明？ [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我的网站包含 1 FancyBox 用于图像叠加 2 GalleryView 滑块 并且都使用 JQuery 它们都可以免费使用 但它们坚

  • 创建 Android 智能应用横幅

    Android 设备有类似 iOS 6 智能应用横幅的解决方案吗 这是智能应用横幅的代码 从 Chrome 44 Beta 开始 您可以在 Android 版 Chrome 中推送您的应用程序 您网站上的本机应用程序安装横幅 请看下面的答案

  • 像程序一样执行快捷方式

    示例 你有一条捷径s to SomeProgram在当前目录中 In cmd exe 您可以输入s它将启动该程序 在 PowerShell 中 输入s gives The term s is not recognized as a cmdl

  • 为什么 DropDownList.SelectedIndexChanged 事件不触发？

    我有一个绑定到 ObjectDataSource 的 DropDown 在其数据绑定事件中 我在 0 索引上添加 select 值 我在页面上有一个 LinkBut ton 在其客户端单击时 我在下拉列表中选择不同的项目 使用 JavaSc

  • 附加的新行的行为与前一行（行）不同

    我有一个 HTML 表格 里面有几个td as input字段 我的表格是动态的 当页面加载时 我将附加表格的第一行并且focus在第一个输入字段中 就我而言 即Item Name 我的行中有 3 个输入字段 它们是Item Name Un

热门标签