如果值为 0,如何隐藏 HTML 表格行

2023-12-30

我有一个 HTML 表格,有 4 列,Item Code Item Name Category Name and Quantity其中数量为输入字段

我正在做的是用 JSON 数据填充表,最初输入字段设置为 0

当用户由于大量数据而在输入字段中输入内容时,用户想要查看他输入的内容,我提供了view按钮,当用户单击该按钮时,我将显示所有内容non-zero同一个表中的行,然后单击后view我躲起来了view并显示edit供用户再次编辑,但单击输入字段的所有数据将重置为 0

  • 我希望当用户单击编辑数据时,输入字段中应该显示用户之前输入的内容

snippet

var tableData = [{
    "Item Code": "1978",
    "Item Name": "Alu Chat-S",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1979",
    "Item Name": "Dahi Alu Chat-S",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1980",
    "Item Name": "Samosa-S",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1981",
    "Item Name": "SamosaChat-S",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1982",
    "Item Name": "Dahi Samosa Chats-S",
    "Category Name": "regular"
  },
  {
    "Item Code": "1983",
    "Item Name": "Garam Samosa Chats-S",
    "Category Name": "regular"
  },
  {
    "Item Code": "1984",
    "Item Name": "Kachori Chats-S",
    "Category Name": "regular"
  },
  {
    "Item Code": "1985",
    "Item Name": "Garam Kachori Chat-S",
    "Category Name": "regular"
  },
  {
    "Item Code": "1986",
    "Item Name": "Dahi Kachori Chat-S",
    "Category Name": "fastfood"
  },
  {
    "Item Code": "1987",
    "Item Name": "Dai Raj Kachori-S",
    "Category Name": "fastfood"
  },
  {
    "Item Code": "1988",
    "Item Name": "Baby Kachori Chat-S",
    "Category Name": "fastfood"
  },
  {
    "Item Code": "1989",
    "Item Name": "Dahi Baby Kachori-S",
    "Category Name": "fastfood"
  },
  {
    "Item Code": "1990",
    "Item Name": "Anar Bhalla-S",
    "Category Name": "fastfood"
  },
  {
    "Item Code": "1991",
    "Item Name": "Dahi Bhalla-S",
    "Category Name": "fastfood"
  },
  {
    "Item Code": "1992",
    "Item Name": "Jhal Muri-S",
    "Category Name": "fastfood"
  },
  {
    "Item Code": "1993",
    "Item Name": "Chat Platter-S",
    "Category Name": "fastfood"
  },
  {
    "Item Code": "1994",
    "Item Name": "Dahi Papdi Chat-S",
    "Category Name": "GIFT PACK"
  },
  {
    "Item Code": "2402",
    "Item Name": "ALMOND CHBAR",
    "Category Name": "GIFT PACK"
  },
  {
    "Item Code": "333",
    "Item Name": "A BR SB EX",
    "Category Name": "EXEMPTED"
  },
  {
    "Item Code": "603",
    "Item Name": "AMUL FRESH CREAM",
    "Category Name": "EXEMPTED"
  }
]

function addTable(tableData) {
  var col = Object.keys(tableData[0]);
  var countNum = col.filter(i => !isNaN(i)).length;
  var num = col.splice(0, countNum);
  col = col.concat(num);
  var table = document.createElement("table");
  var tr = table.insertRow(-1); // TABLE ROW.
  var colNum = col.length; //to improve the speed

  for (var i = 0; i < colNum + 1; i++) {
    var th = document.createElement("th"); // TABLE HEADER.
    if (i >= colNum) {
      th.innerHTML = "Quantity";
      tr.appendChild(th);
      tr.classList.add("text-center");
      tr.classList.add("head");
    } else {
      th.innerHTML = col[i];
      tr.appendChild(th);
      tr.classList.add("text-center");
      tr.classList.add("head");
    }
  }
  for (var i = 0; i < tableData.length; i++) {
    tr = table.insertRow(-1);
    tr.classList.add("item-row");
    for (var j = 0; j < col.length + 1; j++) {
      //here i am adding a class with the name of the category to each items row.
      var categoryName = tableData[i]["Category Name"];
      tr.dataset.category = categoryName;

      let tabCell = tr.insertCell(-1);
      var hiddenField = document.createElement("input");
      hiddenField.style.display = "none";
      var quantityField = document.createElement("input");
      var tabledata = tableData[i][col[j]];
      if (i > -1 && j >= colNum) {

        quantityField.style.border = "none";
        quantityField.style["text-align"] = "right";
        quantityField.setAttribute("name", "Quantity");
        quantityField.setAttribute("autocomplete", "on");
        quantityField.setAttribute("value", "0");
        quantityField.setAttribute("type", "number");
        quantityField.setAttribute("required", "required");
        quantityField.classList.add("dataReset");
        quantityField.toLocaleString('en-IN');
        tabCell.appendChild(quantityField);
      } else {
        if (tableData[i]["Item Code"] === tableData[i][col[j]]) {
          tabCell.innerHTML = tabledata;
          hiddenField.setAttribute("name", "Item_Code");
          hiddenField.setAttribute("value", tabledata);
          tabCell.appendChild(hiddenField);
        }
        if (tableData[i]["Item Name"] === tableData[i][col[j]]) {
          tabCell.innerHTML = tabledata;
          hiddenField.setAttribute("name", "Item_Name");
          hiddenField.setAttribute("value", tabledata);
          tabCell.appendChild(hiddenField);
        }

        if (tableData[i]["Category Name"] === tableData[i][col[j]]) {
          tabCell.innerHTML = tabledata;
          hiddenField.setAttribute("name", "Category_Name");
          hiddenField.setAttribute("value", tabledata);
          tabCell.appendChild(hiddenField);
        }
        if (j > 1) tabCell.classList.add("text-right");
      }
    }

  }
  var divContainer = document.getElementById("HourlysalesSummary");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
  $("#view").on("click", function() {
    var itemRows = document.getElementsByClassName("item-row");
    if (quantityField === 0) {
      tabCell.innerHTML = tabledata.hide();;

    }
    /* 	$("#HourlysalesSummary tr td").filter(function(){
    		  return $(this).text() == 0;   
    		}).hide(); */

  });
}

addTable(tableData);
var selectedOption = "";
$("#CategoryName").on("change", function() {
  selectedOption = this.value;
  //getting all item rows so i can target them.
  var itemRows = document.getElementsByClassName("item-row");

  if (selectedOption === "All") {
    //If "All" then style all rows with visibility: visible.
    for (var i = 0; i < itemRows.length; i++) {
      itemRows[i].style.visibility = "visible";
    }
  } else {
    //If the selectedOption is anything other than "All",
    // firstly i am style all rows with visibility: collapse
    for (var i = 0; i < itemRows.length; i++) {
      itemRows[i].style.visibility = "collapse";

    }
    /* alert(itemRows); */
    // then getting all rows which have the selectedOption as a class and style those rows with visibility: visible.
    var selectedItemRows = document.querySelectorAll("[data-category='" + selectedOption + "']");

    for (var i = 0; i < selectedItemRows.length; i++) {
      selectedItemRows[i].style.visibility = "visible";
    }
  }

});

function view() {
  //get all quantity input fields
  var quantityFields = document.getElementsByClassName("dataReset");
  //iterate through all quantity input fields
  for (var i = 0; i < quantityFields.length; i++) {
    if (quantityFields[i].value != 0) {
      //if the input value of this quantity field is not equal to zero then find the closest "item-row"
      //so that we can set this table row to visible
      quantityFields[i].closest(".item-row").style.visibility = "visible";
    } else {
      //if the input value of this quantity field is equal to zero then find the closest "item-row"
      //so that we can set this table row to collapse
      quantityFields[i].closest(".item-row").style.display = "none";
    }
  }
  //change the value of the select menu to "All"
  $('#CategoryName').val('All');
  $('#see').hide();
  $('#edit').show();


}

function edit1() {
  addTable(tableData);


}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container" id="divHide">
  <form id="indentForm" autocomplete="on">
    <div class="row position-relative">

      <div class="col-lg-4">
        <h5 id="commonHeader">Category</h5>
        <select class="test" id="CategoryName" name="categoryCode">
          <option>All</option>
          <option>Chats</option>
          <option>regular</option>
          <option>fastfood</option>
          <option>GIFT PACK</option>
          <option>EXEMPTED</option>
        </select>
      </div>
    </div>
    <hr style="border: 1px solid black">
    <div class="table-responsive">
      <table class="w-100" id=HourlysalesSummary></table>
    </div>
    <div>
      <button type="submit" id="save">
					 Save
				</button>
      <button id="see" type="button" onclick="view()">view</button>
      <button id="edit" type="button" onclick="edit1()" style="display:none">edit</button>

    </div>
  </form>
</div>

我希望当用户单击“编辑”时,用户之前输入的数据应该在视图出现之前


按照其余代码的结构,我将使用 CSS 可见性属性来隐藏和显示行。

您可以通过类名获取所有数量输入字段,并检查值是否为零。

如果它不为零,则将项目行的 CSS 设置为可见。
如果它为零,则将项目行的 CSS 设置为折叠。

function view(){
  //get all quantity input fields
  var quantityFields = document.getElementsByClassName("dataReset");
  //iterate through all quantity input fields
  for(var i = 0; i < quantityFields.length; i++){
    if(quantityFields[i].value != 0){
      //if the input value of this quantity field is not equal to zero then find the closest "item-row"
      //so that we can set this table row to visible
      quantityFields[i].closest(".item-row").style.visibility = "visible";
    }else{
      //if the input value of this quantity field is equal to zero then find the closest "item-row"
      //so that we can set this table row to collapse
      quantityFields[i].closest(".item-row").style.visibility = "collapse";
    }
  }
  //change the value of the select menu to "All"
  $('#CategoryName').val('All');
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如果值为 0,如何隐藏 HTML 表格行 的相关文章

  • JavaScript 语法是什么:{Ci, CC}? [复制]

    这个问题在这里已经有答案了 我正在做一些 FF 附加开发 我看到这样的语法 var Cc Ci require chrome 只是好奇这个语法是什么 以及它是否对 FF 开发或其他东西有特殊意义 这称为解构赋值 它的一个特点是JavaScr
  • 使用 JSONP 时出现“无效标签”?

    我的 JSONP 请求有问题 数据不会显示 Firebug 显示 无效标签 错误 我的 JavaScript ajax url link dataType jsonp beforeSend function xhr var base64 b
  • 如何根据本地存储中的另一个数据响应推迟 XMLHttpRequest [重复]

    这个问题在这里已经有答案了 function to download pps compress txt from cloud server for global parameter set PPs function get pps para
  • 对 UPDATE 行的 POST 请求

    我是 javascript 的新手 所以我正在寻找一些帮助来创建一种拖放地理编码标记的方法 以允许交互式更改地址 我相信通过更新 LOCATION 列行可以实现这一点 第一步是 发送 POST 请求 对吧 好吧 所以我想问是否有人可以给我看
  • Safari 和 Edge 中的 audioContext.copyToChannel() 替代方案

    Safari 和 Edge 都不支持audioContext copyToChannel 函数用自定义内容填充audioBuffer 还有其他方法吗 就我而言 我想创建一个脉冲响应 用该响应填充缓冲区 并将一些声音与该缓冲区进行卷积 对于
  • HTML CSS 循环协助

    希望你能帮忙 我想知道您是否可以在循环中创建以下类型 你知道这是否可能吗 body background 000 DEMO SPECIFIC STYLES typewriter h1 color fff font family Bebas
  • IE 中的 jQuery 鼠标闪烁

    当我在 IE 中执行 fadeIn fadeOut slideUp slideDown toggle 等 jQuery 函数时 鼠标总是闪烁 沙漏在光标旁边的视图中快速闪烁 我尝试了不同的方法来在动画进行时完全隐藏鼠标 但没有效果 而且在大
  • 禁用 HTML 验证。如何为全局每个表单设置“novalidate”?

    我想知道是否可以做一些事情来禁用应用程序中每个表单的 HTML 验证 有什么办法可以做到这一点或者我应该添加novalidate每个表单标签的属性 看来唯一的方法是添加novalidate使用 JavaScript jQuery 为每个表单
  • 如何实现Contenteditable属性的Ctrl+A功能?

    我正在尝试为用户显示带有一些示例代码的 div 我希望他们能够在 div 内部进行选择并使用 Ctrl A 选择所有示例代码 但我不希望他们能够编辑实际文本 以免意外删除一点 然后它不会工作 我现在通过 div 上的 contentedit
  • 谷歌colab录音,如何实现更精确的方式告诉用户开始对着麦克风说话

    我正在尝试创建一个为机器学习项目录制音频的程序 我想使用 google colab 这样人们就不必在他们的系统上安装或运行任何东西 我在网上找到了这个录制和播放音频的示例 单元格 1 包含用于录制音频的 js 代码和用于将其转换为字节对象的
  • 使用添加“title”属性换行符 到 JSX 元素

    我知道我可以在 HTML 中添加换行符title属性使用 10 但 React 避免了这一点 例如 这是一个 React 组件 其中包含一个标准的 未由 React 处理的组件title包含换行符的属性 并且可以在浏览器中看到效果 但是如果
  • Web 文本编辑器中的 RTF 格式

    网络上是否有支持 RTF 格式文档输入的文本编辑器 我知道这对 webdev 来说有点奇怪 但我需要从数据库中读取 RTF 文档 并在基于 Web 的文本编辑器中对其进行编辑 然后将其存储回 RTF 中 在我在转换工具上投入太多资金之前 我
  • 标题后的三角形与标题背景渐变相匹配

    我必须制作这样的标题 我用这个渐变制作标题没有问题 我也知道如何定位三角形 after 但是 如何使三角形颜色与标题背景相匹配 问题是梯度不是静态的 例如 如果我在智能手机中打开页面 由于屏幕较短 渐变将比在显示器中打开更 紧凑 所以箭头颜
  • 将 async 和await 与export const 一起使用

    我无法完成这项工作 它说 await 是一个保留字 是的 当然是 而且我想使用它 怎么了 export const loginWithToken async gt return dispatch gt dispatch type SESSI
  • jquery ajax仅从另一页获取一个div块

    我有一个成功的ajax请求 可以下载整个html内容 现在我只需要获取一个包含id data today 的div标签 如何编写这样的脚本 看看这个 SOq 在 jQuery 中提取 Ajax 返回数据 https stackoverflo
  • Web API 2.0 使用 pascalcase 模型接收驼峰式命名的 JSON 数据

    我正在尝试对我的 Web API 进行 PUT 调用 我在 WebApiConfig cs 中设置了以下内容 以处理以驼峰形式将数据发送回我的 Web 项目 config Formatters JsonFormatter Serialize
  • iPhone Mobile Safari:强制键盘打开

    这是一个 HTML CSS JS jQuery iPad 应用程序 我有一个按钮 可以向下滑动输入表单 我想让用户将注意力集中在输入上 然后启动键盘 这是我正在处理的 但不起作用 myFormField focus 这确实集中了输入 但无法
  • 阻止 Chrome 扩展程序的 popup.html 自动打开

    我正在创建一个 Chrome 扩展程序 其中包含background html每分钟从 API 请求一次信息的文件 收到信息后 它会发送消息popup html弹出窗口使用 JSON 信息将新的 HTML 元素附加到弹出窗口的主体上 问题是
  • jQuery.ajax 发送 OPTIONS 和 POST,如何使用 Express.js (Node.js) 处理

    每当我的应用程序向服务器发送 ajax 请求时 ajax url config api url 1 register type POST contentType application json data some JSON data he
  • html 表:thead 与 th

    它看起来像 根据示例这一页 http www w3 org TR html4 struct tables html无论如何 如果您使用THEAD 则不需要使用TH 真的吗 如果是这样 THEAD 与 TH 相比有何优点 缺点 The the

随机推荐

  • NativeAdvanced - 原生广告响应不正确。未正确指定单击操作

    我正在尝试在我的应用程序中实现 NativeAd 直到昨天一切都工作正常 现在正在打印这些错误日志 I Ads WebView loading for native ads I Ads Javascript has loaded for n
  • 在 Go 中通过名称调用结构体及其方法?

    我发现了一个函数调用MethodByName here http golang org pkg reflect Value MethodByName http golang org pkg reflect Value MethodByNam
  • Spring ApplicationContext.getBean(Class c) 不适用于代理类

    我需要通过豆类的类类型查找豆类 当bean被代理包装时 某些方法是 Transactional ApplicatoinContext无法找到它们 我发现如果我通过接口查找它们 它是有效的 但在这种情况下我正在使用具体的类类型 我知道该 be
  • AJAX - Spring 控制器 - JSP

    我想生成对 Spring MVC 控制器的 AJAX 基于 jQuery 请求 并将带有对象的 Collection 返回到 jsp 我有两个烦恼 1 AJAX成功块不起作用 数据类型的东西 2 不知道如何将这个对象显示到jsp上
  • C 中的 Salted sha512,无法与 Symfony2 的 FOSUserBundle 同步

    我的开发分为两个部分 该网站是一个使用 FOSUserBundle 的 Symfony 应用程序 它使用 SHA512 和盐对密码进行加密 一个用 C 语言编程的身份验证模块 一旦给出盐和明文密码 它应该能够重现 SHA512 加盐哈希 有
  • 如何用数据库数据填充TableView

    我一直在尝试加载TableView从数据库查询数据 但似乎无法让它工作 这是我第一次尝试填充TableView与数据库查询项目 以防我的代码看起来杂乱且远非良好 FXML 是通过 JavaFX SceneBuilder 完成的 这是数据库查
  • protobuf-net AddField 忽略 IgnoreListHandling

    我有这个数据结构声明 ProtoContract public class NotACollectionHolder public NotACollection some objects ProtoContract IgnoreListHa
  • ctypes.pointer、ctypes.POINTER 和 ctypes.byref 之间有什么区别?

    在ctypes中 指针和byref有什么区别 它们似乎都是将指针传递给函数的一种方式 例如作为输出参数 从功能上来说 它们是等效的 但是 那蟒蛇文档 http docs python org release 2 5 2 lib ctypes
  • 为什么我的 WinForm 控件在绘制事件之前闪烁?

    我有一个表单 其中加载了一个用户控件 其中包含 3 个其他用户控件 每次我移动到另一个选项卡并返回到该用户控件时 其中的 3 个控件甚至在事件触发之前就会闪烁 我尝试了一切 包括 this DoubleBuffered true this
  • 水平平滑动量滚动

    问题 我需要平滑一些鼠标滚轮水平的滚动到此布局 https jsfiddle net 38qLnzkh https jsfiddle net 38qLnzkh 选择 我发现这个脚本完全符合我的要求 但它似乎只能垂直工作 黄油 js http
  • VS2017 设置项目 - 在哪里?

    我正在尝试为 C 项目创建安装项目 安装程序 但在 VS2017 中找不到 安装项目 模板 在 VS2015 中它位于 其他项目类型 gt gt 设置和部署 gt gt Visual Studio 安装程序 我用过几次没有任何问题 我的 V
  • 带有半圆边缘的 android 按钮

    我正在尝试创建一个用于 Android 项目中的图像按钮的形状 该形状基本上在左侧和右侧都有半圆 我想我可以只使用带有半径的形状 XML 但这只是圆角 我需要整个左侧和右侧是半圆 如下图所示 我当前的形状 XML 如下所示
  • Java Apache FileUtils readFileToString 和 writeStringToFile 问题

    我需要将 java 文件 实际上是 pdf 解析为字符串并返回到文件 在这些过程之间 我将对给定的字符串应用一些补丁 但这在本例中并不重要 我开发了以下 JUnit 测试用例 String f1String FileUtils readFi
  • .Net - 什么时候 List.ForEach 优于标准 foreach 循环?

    通用列表类有一个 ForEach Action
  • `null` 被视为字符串?

    String s null s s hai System out println s Output nullhai 我以为这会让我陷入 NPE 状态 背后的根本逻辑是什么 使用时不抛出NPE 级联 使用时抛出NPE For s s hai
  • 为什么 Jackson 要使用以类命名的额外层来包裹我的对象?

    当我序列化时 public class FOO int field1 String field2 我得到以下内容 FOO field1 0 field2 value 你能指出我怎样才能使输出看起来像这样 field1 0 field2 va
  • 什么会使单个任务执行器停止处理任务?

    我正在使用一个java util concurrent ExecutorService我通过调用获得的Executors newSingleThreadExecutor This ExecutorService有时会停止处理任务 即使它尚未
  • 如何将 Owl Carousel 中的图像居中

    我的猫头鹰旋转木马包含不同宽度和高度的图片 如何将它们水平和垂直居中对齐 owl example owlCarousel navigation true div class owl carousel div img div div
  • 按名称对 'ls' 输出进行排序

    你能排序一个ls https en wikipedia org wiki Ls按名称列出 我的 ls 默认按名称排序 你看到什么了 man ls states 列出有关文件的信息 默认为当前目录 如果没有 则按字母顺序对条目进行排序 cft
  • 如果值为 0,如何隐藏 HTML 表格行

    我有一个 HTML 表格 有 4 列 Item Code Item Name Category Name and Quantity其中数量为输入字段 我正在做的是用 JSON 数据填充表 最初输入字段设置为 0 当用户由于大量数据而在输入字