筛选后的数据求和

huangapple go评论83阅读模式
英文:

Sum data after filters

问题

以下是您提供的代码的翻译部分:

  1. function searchTable() {
  2. var filter, found, table, tr, td, i, j;
  3. //input = document.getElementById("search");
  4. //input2 = document.getElementById("search2");
  5. filter = input.value.toUpperCase();
  6. table = document.getElementById("displaytable");
  7. tr = table.getElementsByTagName("tr");
  8. for (i = 0; i < tr.length; i++) {
  9. td = tr[i].getElementsByTagName("td");
  10. for (j = 0; j < td.length; j++) {
  11. if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
  12. found = true;
  13. }
  14. }
  15. if (found) {
  16. tr[i].style.display = "";
  17. found = false;
  18. } else {
  19. tr[i].style.display = "none";
  20. }
  21. }
  22. var cls = document.getElementById("displaytable").getElementsByTagName("td");
  23. var sum = 0;
  24. for (var i = 0; i < cls.length; i++) {
  25. if (cls[i].className == "countable" && cls[i].closest("tr").style.display != "none") {
  26. sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
  27. }
  28. }
  29. document.getElementById('total').innerHTML = sum;
  30. }
  31. var cls = document.getElementById("displaytable").getElementsByTagName("td");
  32. var sum = 0;
  33. for (var i = 0; i < cls.length; i++) {
  34. if (cls[i].className == "countable") {
  35. sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
  36. }
  37. }
  38. document.getElementById('total').innerHTML += sum;

希望这能对您有所帮助。如果您需要更多翻译或其他帮助,请随时提问。

英文:

I have this html table which will later be replaced by a for loop. I want to sum the data I get in Number table, after applying lookup filters.

Currently the sum remains fixed for all values ​​and does not consider the filter.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. function searchTable() {
  2. var filter, found, table, tr, td, i, j;
  3. //input = document.getElementById(&quot;search&quot;);
  4. //input2 = document.getElementById(&quot;search2&quot;);
  5. filter = input.value.toUpperCase();
  6. table = document.getElementById(&quot;displaytable&quot;);
  7. tr = table.getElementsByTagName(&quot;tr&quot;);
  8. for (i = 0; i &lt; tr.length; i++) {
  9. td = tr[i].getElementsByTagName(&quot;td&quot;);
  10. for (j = 0; j &lt; td.length; j++) {
  11. if (td[j].innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
  12. found = true;
  13. }
  14. }
  15. if (found) {
  16. tr[i].style.display = &quot;&quot;;
  17. found = false;
  18. } else {
  19. tr[i].style.display = &quot;none&quot;;
  20. }
  21. }
  22. var cls = document.getElementById(&quot;displaytable&quot;).getElementsByTagName(&quot;td&quot;);
  23. var sum = 0;
  24. for (var i = 0; i &lt; cls.length; i++) {
  25. if (cls[i].className == &quot;countable&quot; &amp;&amp; cls[i].closest(&quot;tr&quot;).style.display != &quot;none&quot;) {
  26. sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
  27. }
  28. }
  29. document.getElementById(&#39;total&#39;).innerHTML = sum;
  30. }
  31. var cls = document.getElementById(&quot;displaytable&quot;).getElementsByTagName(&quot;td&quot;);
  32. var sum = 0;
  33. for (var i = 0; i &lt; cls.length; i++) {
  34. if (cls[i].className == &quot;countable&quot;) {
  35. sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
  36. }
  37. }
  38. document.getElementById(&#39;total&#39;).innerHTML += sum;

<!-- language: lang-html -->

  1. &lt;head&gt;
  2. &lt;!-- &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;//cdn.datatables.net/1.11.1/css/jquery.dataTables.min.css&quot;&gt; --&gt;
  3. &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  4. &lt;script src=&quot;//cdn.datatables.net/1.11.1/js/jquery.dataTables.min.js&quot;&gt;&lt;/script&gt;
  5. &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD&quot; crossorigin=&quot;anonymous&quot;&gt;
  6. &lt;link href=&quot;https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css&quot; rel=&quot;stylesheet&quot;&gt;
  7. &lt;script src=&quot;https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js&quot;&gt;&lt;/script&gt;
  8. &lt;script src=&quot;https://unpkg.com/bootstrap-table@1.21.2/dist/extensions/filter-control/bootstrap-table-filter-control.min.js&quot;&gt;&lt;/script&gt;
  9. &lt;/head&gt;
  10. &lt;!-- &lt;input type=&quot;text&quot; id=&quot;search&quot; onkeyup=&#39;searchTable()&#39; placeholder=&quot;Type to search&quot;&gt;
  11. &lt;input type=&quot;text&quot; id=&quot;search2&quot; onkeyup=&#39;searchTable()&#39; placeholder=&quot;Type to search&quot;&gt; --&gt;
  12. &lt;!-- &lt;input class=&quot;form-control&quot; onkeyup=&#39;searchTable()&#39; id=&quot;search&quot; type=&quot;text&quot; placeholder=&quot;Search..&quot;&gt; --&gt;
  13. &lt;table class=&quot;table responsive table table-striped&quot; data-toggle=&quot;table&quot; data-filter-control=&quot;true&quot; data-show-jump-to=&quot;true&quot; data-pagination=&quot;true&quot; data-show-columns=&quot;true&quot;&gt;
  14. &lt;thead&gt;
  15. &lt;tr&gt;
  16. &lt;th scope=&quot;col&quot; data-field=&quot;name&quot; data-filter-control=&quot;input&quot;&gt;Name&lt;/th&gt;
  17. &lt;th scope=&quot;col&quot; data-field=&quot;surname&quot; data-filter-control=&quot;input&quot;&gt;Surname&lt;/th&gt;
  18. &lt;th scope=&quot;col&quot; data-field=&quot;number&quot; data-filter-control=&quot;input&quot;&gt;Number&lt;/th&gt;
  19. &lt;/tr&gt;
  20. &lt;/thead&gt;
  21. &lt;tbody id=&quot;displaytable&quot;&gt;
  22. &lt;tr&gt;
  23. &lt;td&gt;John&lt;/td&gt;
  24. &lt;td&gt;Tidor&lt;/td&gt;
  25. &lt;td class=&quot;countable&quot;&gt;5&lt;/td&gt;
  26. &lt;/tr&gt;
  27. &lt;tr&gt;
  28. &lt;td&gt;Marc&lt;/td&gt;
  29. &lt;td&gt;Tidor&lt;/td&gt;
  30. &lt;td class=&quot;countable&quot;&gt;5&lt;/td&gt;
  31. &lt;/tr&gt;
  32. &lt;tr&gt;
  33. &lt;td&gt;Tom&lt;/td&gt;
  34. &lt;td&gt;Cruise&lt;/td&gt;
  35. &lt;td class=&quot;countable&quot;&gt;4&lt;/td&gt;
  36. &lt;/tr&gt;
  37. &lt;tr&gt;
  38. &lt;td&gt;Jordan&lt;/td&gt;
  39. &lt;td&gt;Michael&lt;/td&gt;
  40. &lt;td class=&quot;countable&quot;&gt;7&lt;/td&gt;
  41. &lt;/tr&gt;
  42. &lt;tr&gt;
  43. &lt;td&gt;Marc&lt;/td&gt;
  44. &lt;td&gt;Michael&lt;/td&gt;
  45. &lt;td class=&quot;countable&quot;&gt;3&lt;/td&gt;
  46. &lt;/tr&gt;
  47. &lt;tr&gt;
  48. &lt;td&gt;Marc&lt;/td&gt;
  49. &lt;td&gt;Michael&lt;/td&gt;
  50. &lt;td class=&quot;countable&quot;&gt;1&lt;/td&gt;
  51. &lt;/tr&gt;
  52. &lt;/tbody&gt;
  53. &lt;!-- &lt;tfoot class=&quot;shown&quot;&gt;
  54. &lt;tr&gt;
  55. &lt;td colspan=&quot;5&quot;&gt;Total:&lt;/td&gt;
  56. &lt;td id=&quot;total&quot;&gt;&lt;/td&gt;
  57. &lt;/tr&gt;
  58. &lt;/tfoot&gt; --&gt;
  59. &lt;/table&gt;
  60. &lt;table&gt;
  61. &lt;tfoot class=&quot;shown&quot;&gt;
  62. &lt;tr&gt;
  63. &lt;td colspan=&quot;5&quot;&gt;Total:&lt;/td&gt;
  64. &lt;td id=&quot;total&quot;&gt;&lt;/td&gt;
  65. &lt;/tr&gt;
  66. &lt;/table&gt;

<!-- end snippet -->

答案1

得分: 1

这不能工作,因为您的函数只有一个过滤器。

并且移除onclick,最好使用事件监听器。

所以,在这里,一开始您的列表为空,因为没有任何输入字段被填充。

编辑 1:而且,请避免使用 var!您可以看一下第一个代码片段,但第二个是更新版本。

编辑 2:请注意第二个代码片段,因为在第一个代码片段中,如果您键入 "M","Tom" 也会出现,因为它包含 "m"!!!

编辑 3:添加了第三个代码片段,以避免同时在多个字段中进行搜索,这样您就不会在前两个代码片段中遇到的问题。

通过保留这三种解决方案,您可以了解前两个提案的不便之处。

以下是翻译的代码部分:

第一个代码片段:

  1. let filter1, filter2;
  2. document.addEventListener("DOMContentLoaded", init);
  3. function init() {
  4. filter1 = document.getElementById("search");
  5. filter2 = document.getElementById("search2");
  6. filter1.addEventListener("keyup", searchTable);
  7. filter2.addEventListener("keyup", searchTable);
  8. searchTable();
  9. }
  10. function searchTable() {
  11. let found, table, tr, td, i;
  12. filter1 = document.getElementById("search").value.toUpperCase();
  13. filter2 = document.getElementById("search2").value.toUpperCase();
  14. table = document.getElementById("displaytable");
  15. tr = table.getElementsByTagName("tr");
  16. for (i = 0; i < tr.length; i++) {
  17. td = tr[i].getElementsByTagName("td");
  18. found = false;
  19. if (
  20. (filter1 && td[0].innerHTML.toUpperCase().indexOf(filter1) > -1) ||
  21. (filter2 && td[1].innerHTML.toUpperCase().indexOf(filter2) > -1)
  22. ) {
  23. found = true;
  24. }
  25. tr[i].style.display = found ? "" : "none";
  26. }
  27. updateTotal();
  28. }
  29. function updateTotal() {
  30. let cls = document.getElementById("displaytable").getElementsByTagName("td");
  31. let sum = 0;
  32. let originalList = false;
  33. for (i = 0; i < cls.length; i++) {
  34. if (
  35. cls[i].className == "countable" &&
  36. cls[i].closest("tr").style.display != "none"
  37. ) {
  38. sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
  39. originalList = true;
  40. }
  41. }
  42. document.getElementById("total").innerHTML = originalList ? sum : "";
  43. }

第二个代码片段:

  1. let filter1, filter2, filter3;
  2. document.addEventListener("DOMContentLoaded", init);
  3. function init() {
  4. filter1 = document.getElementById("search").value.toUpperCase();
  5. filter2 = document.getElementById("search2").value.toUpperCase();
  6. filter3 = document.getElementById("search3").value.toUpperCase();
  7. document.getElementById("search").addEventListener("keyup", searchTable);
  8. document.getElementById("search2").addEventListener("keyup", searchTable);
  9. document.getElementById("search3").addEventListener("keyup", searchTable);
  10. searchTable();
  11. }
  12. function searchTable() {
  13. let found, table, tr, td, i;
  14. filter1 = document.getElementById("search").value.toUpperCase();
  15. filter2 = document.getElementById("search2").value.toUpperCase();
  16. filter3 = document.getElementById("search3").value.toUpperCase();
  17. table = document.getElementById("displaytable");
  18. tr = table.getElementsByTagName("tr");
  19. for (i = 0; i < tr.length; i++) {
  20. if (tr[i].getElementsByTagName("th").length > 0) {
  21. continue;
  22. }
  23. td = tr[i].getElementsByTagName("td");
  24. found = false;
  25. if (
  26. (filter1 && td[0].textContent.toUpperCase().startsWith(filter1.trim())) ||
  27. (filter2 && td[1].textContent.toUpperCase().includes(filter2.trim())) ||
  28. (filter3 && td[2].textContent.trim().toUpperCase() === filter3.trim())
  29. ) {
  30. found = true;
  31. }
  32. tr[i].style.display = found ? "" : "none";
  33. }
  34. updateTotal();
  35. }
  36. function updateTotal() {
  37. let cls = document.getElementById("displaytable").getElementsByTagName("td");
  38. let sum = 0;
  39. let originalList = false;
  40. for (var i = 0; i < cls.length; i++) {
  41. if (
  42. cls[i].className == "countable" &&
  43. cls[i].closest("tr").style.display != "none"
  44. ) {
  45. sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
  46. originalList = true;
  47. }
  48. }
  49. document.getElementById("total").innerHTML = originalList ? sum : "";
  50. }

第三个代码片段:

  1. let filter1, filter2, filter3;
  2. let searchInput1;
  3. let searchInput2;
  4. let searchInput3;
  5. let filters;
  6. document.addEventListener("DOMContentLoaded", init);
  7. function init() {
  8. filter1 = document.getElementById("search");
  9. filter2 = document.getElementById("search2");
  10. filter3 = document.getElementById("search3");
  11. filters = [filter1, filter2, filter3];
  12. searchInput1 = document.getElementById("search");
  13. searchInput2 = document.getElementById("search2");
  14. searchInput3 = document.getElementById("search3");
  15. filter1.addEventListener("focus", () => resetOtherFields(filter1));
  16. filter2.addEventListener("focus", () => resetOtherFields(filter2));
  17. filter3.addEventListener("focus", () => resetOtherFields(filter3));
  18. filter1.addEventListener("keyup", searchTable);
  19. filter2.addEventListener("keyup", searchTable);
  20. filter3.addEventListener("keyup", searchTable);
  21. searchTable();
  22. }
  23. function resetOtherFields(currentField) {
  24. filters.forEach((field) => {
  25. if (field !== currentField) {
  26. field.value = "";
  27. }
  28. });
  29. searchTable();
  30. }
  31. function searchTable() {
  32. let found, table, tr, td, i;
  33. filter1 = searchInput1.value.toUpperCase();
  34. filter2 = searchInput2.value.toUpperCase();
  35. filter3 = searchInput3.value.toUpperCase();
  36. table = document.getElementById("displaytable");
  37. tr = table.getElementsByTagName("tr");
  38. for (i = 0; i < tr.length; i++) {
  39. if (tr[i].getElementsByTagName("th").length > 0) {
  40. continue;
  41. }
  42. td = tr[i].getElementsByTagName("td");
  43. found = false;
  44. if (
  45. (filter1 && td[0].textContent.toUpperCase().startsWith(filter1.trim())) ||
  46. (filter2 && td[1].textContent.toUpperCase().startsWith(filter2.trim())) ||
  47. (filter3 && td[2].textContent.trim().toUpperCase() === filter3.trim())
  48. ) {
  49. found = true;
  50. }
  51. tr[i].style.display = found ? "" : "none";
  52. }
  53. updateTotal();
  54. }
  55. function updateTotal() {
  56. let cls = document.getElementById("displaytable").getElementsByTagName("td");
  57. let sum = 0;
  58. let originalList =
  59. <details>
  60. <summary>英文:</summary>
  61. This cannot work because you have just one filter in your function.
  62. And remove the onclick, it&#39;s better to use EventListeners.
  63. So, here at start You start with an empty list because none of the input fields are filled.
  64. **EDIT 1** : And yes, avoid var! You may take a look on the first snippet, but the second is an update.
  65. **EDIT 2** : Check at the second snippet because in the first one if you type &quot;M&quot; Tom will also appear because it contains a &quot;m&quot;!!!
  66. **EDIT 3** : Added a third snippet to avoid searches in multiple fields at the same time, so you don&#39;t have problems that may occur in the two first snippets.
  67. By keeping the three solutions, you can have an idea of the inconveniences of the two first proposals.
  68. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  69. &lt;!-- language: lang-js --&gt;
  70. let filter1, filter2;
  71. document.addEventListener(&quot;DOMContentLoaded&quot;, init);
  72. function init(){
  73. filter1 = document.getElementById(&quot;search&quot;);
  74. filter2 = document.getElementById(&quot;search2&quot;);
  75. filter1.addEventListener(&quot;keyup&quot;, searchTable);
  76. filter2.addEventListener(&quot;keyup&quot;, searchTable);
  77. searchTable();
  78. }
  79. function searchTable() {
  80. let found, table, tr, td, i;
  81. filter1 = document.getElementById(&quot;search&quot;).value.toUpperCase();
  82. filter2 = document.getElementById(&quot;search2&quot;).value.toUpperCase();
  83. table = document.getElementById(&quot;displaytable&quot;);
  84. tr = table.getElementsByTagName(&quot;tr&quot;);
  85. for (i = 0; i &lt; tr.length; i++) {
  86. td = tr[i].getElementsByTagName(&quot;td&quot;);
  87. found = false;
  88. if (
  89. (filter1 &amp;&amp; td[0].innerHTML.toUpperCase().indexOf(filter1) &gt; -1) ||
  90. (filter2 &amp;&amp; td[1].innerHTML.toUpperCase().indexOf(filter2) &gt; -1)
  91. ) {
  92. found = true;
  93. }
  94. tr[i].style.display = found ? &quot;&quot; : &quot;none&quot;;
  95. }
  96. updateTotal();
  97. }
  98. function updateTotal() {
  99. let cls = document.getElementById(&quot;displaytable&quot;).getElementsByTagName(&quot;td&quot;);
  100. let sum = 0;
  101. let originalList = false;
  102. for (i = 0; i &lt; cls.length; i++) {
  103. if (
  104. cls[i].className == &quot;countable&quot; &amp;&amp;
  105. cls[i].closest(&quot;tr&quot;).style.display != &quot;none&quot;
  106. ) {
  107. sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
  108. originalList = true;
  109. }
  110. }
  111. document.getElementById(&quot;total&quot;).innerHTML = originalList ? sum : &quot;&quot;;
  112. }
  113. &lt;!-- language: lang-html --&gt;
  114. &lt;input type=&quot;text&quot; id=&quot;search&quot; placeholder=&quot;Search Name&quot;&gt;
  115. &lt;input type=&quot;text&quot; id=&quot;search2&quot; placeholder=&quot;Search Surname&quot;&gt;
  116. &lt;!-- &lt;input class=&quot;form-control&quot; onkeyup=&#39;searchTable()&#39; id=&quot;search&quot; type=&quot;text&quot; placeholder=&quot;Search..&quot;&gt; --&gt;
  117. &lt;table class=&quot;table responsive table table-striped&quot; data-toggle=&quot;table&quot; data-filter-control=&quot;true&quot; data-show-jump-to=&quot;true&quot; data-pagination=&quot;true&quot; data-show-columns=&quot;true&quot;&gt;
  118. &lt;thead&gt;
  119. &lt;tr&gt;
  120. &lt;th scope=&quot;col&quot; data-field=&quot;name&quot; data-filter-control=&quot;input&quot;&gt;Search by Name&lt;/th&gt;
  121. &lt;th scope=&quot;col&quot; data-field=&quot;surname&quot; data-filter-control=&quot;input&quot;&gt;Search by Surname&lt;/th&gt;
  122. &lt;th scope=&quot;col&quot; data-field=&quot;number&quot; data-filter-control=&quot;input&quot;&gt;Number&lt;/th&gt;
  123. &lt;/tr&gt;
  124. &lt;/thead&gt;
  125. &lt;tbody id=&quot;displaytable&quot;&gt;
  126. &lt;tr&gt;
  127. &lt;td&gt;John&lt;/td&gt;
  128. &lt;td&gt;Tidor&lt;/td&gt;
  129. &lt;td class=&quot;countable&quot;&gt;5&lt;/td&gt;
  130. &lt;/tr&gt;
  131. &lt;tr&gt;
  132. &lt;td&gt;Marc&lt;/td&gt;
  133. &lt;td&gt;Tidor&lt;/td&gt;
  134. &lt;td class=&quot;countable&quot;&gt;5&lt;/td&gt;
  135. &lt;/tr&gt;
  136. &lt;tr&gt;
  137. &lt;td&gt;Tom&lt;/td&gt;
  138. &lt;td&gt;Cruise&lt;/td&gt;
  139. &lt;td class=&quot;countable&quot;&gt;4&lt;/td&gt;
  140. &lt;/tr&gt;
  141. &lt;tr&gt;
  142. &lt;td&gt;Jordan&lt;/td&gt;
  143. &lt;td&gt;Michael&lt;/td&gt;
  144. &lt;td class=&quot;countable&quot;&gt;7&lt;/td&gt;
  145. &lt;/tr&gt;
  146. &lt;tr&gt;
  147. &lt;td&gt;Marc&lt;/td&gt;
  148. &lt;td&gt;Michael&lt;/td&gt;
  149. &lt;td class=&quot;countable&quot;&gt;3&lt;/td&gt;
  150. &lt;/tr&gt;
  151. &lt;tr&gt;
  152. &lt;td&gt;Marc&lt;/td&gt;
  153. &lt;td&gt;Michael&lt;/td&gt;
  154. &lt;td class=&quot;countable&quot;&gt;1&lt;/td&gt;
  155. &lt;/tr&gt;
  156. &lt;/tbody&gt;
  157. &lt;/table&gt;
  158. &lt;table&gt;
  159. &lt;tfoot class=&quot;shown&quot;&gt;
  160. &lt;tr&gt;
  161. &lt;td colspan=&quot;5&quot;&gt;Total:&lt;/td&gt;
  162. &lt;td id=&quot;total&quot;&gt;&lt;/td&gt;
  163. &lt;/tr&gt;
  164. &lt;/tfoot&gt;
  165. &lt;/table&gt;
  166. &lt;!-- end snippet --&gt;
  167. **Here&#39;s an edit that is more accurate as I say in my EDIT 2 :**
  168. So :
  169. &quot;M&quot; will display all the names that begins with &quot;M&quot;.
  170. &quot;Mi&quot; will display &quot;Michael&quot;, &quot;Michel&quot;, &quot;Miranda&quot;.
  171. and &quot;MIC&quot; only &quot;Michael&quot; and &quot;Michel&quot;
  172. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  173. &lt;!-- language: lang-js --&gt;
  174. let filter1, filter2, filter3;
  175. document.addEventListener(&quot;DOMContentLoaded&quot;, init);
  176. function init() {
  177. filter1 = document.getElementById(&quot;search&quot;).value.toUpperCase();
  178. filter2 = document.getElementById(&quot;search2&quot;).value.toUpperCase();
  179. filter3 = document.getElementById(&quot;search3&quot;).value.toUpperCase();
  180. document.getElementById(&quot;search&quot;).addEventListener(&quot;keyup&quot;, searchTable);
  181. document.getElementById(&quot;search2&quot;).addEventListener(&quot;keyup&quot;, searchTable);
  182. document.getElementById(&quot;search3&quot;).addEventListener(&quot;keyup&quot;, searchTable);
  183. searchTable();
  184. }
  185. function searchTable() {
  186. let found, table, tr, td, i;
  187. filter1 = document.getElementById(&quot;search&quot;).value.toUpperCase();
  188. filter2 = document.getElementById(&quot;search2&quot;).value.toUpperCase();
  189. filter3 = document.getElementById(&quot;search3&quot;).value.toUpperCase();
  190. table = document.getElementById(&quot;displaytable&quot;);
  191. tr = table.getElementsByTagName(&quot;tr&quot;);
  192. for (i = 0; i &lt; tr.length; i++) {
  193. if (tr[i].getElementsByTagName(&quot;th&quot;).length &gt; 0) {
  194. continue;
  195. }
  196. td = tr[i].getElementsByTagName(&quot;td&quot;);
  197. found = false;
  198. if (
  199. (filter1 &amp;&amp; td[0].textContent.toUpperCase().startsWith(filter1.trim())) ||
  200. (filter2 &amp;&amp; td[1].textContent.toUpperCase().includes(filter2.trim())) ||
  201. (filter3 &amp;&amp; td[2].textContent.trim().toUpperCase() === filter3.trim())
  202. ) {
  203. found = true;
  204. }
  205. tr[i].style.display = found ? &quot;&quot; : &quot;none&quot;;
  206. }
  207. updateTotal();
  208. }
  209. function updateTotal() {
  210. let cls = document.getElementById(&quot;displaytable&quot;).getElementsByTagName(&quot;td&quot;);
  211. let sum = 0;
  212. let originalList = false;
  213. for (var i = 0; i &lt; cls.length; i++) {
  214. if (cls[i].className == &quot;countable&quot; &amp;&amp; cls[i].closest(&quot;tr&quot;).style.display != &quot;none&quot;) {
  215. sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
  216. originalList = true;
  217. }
  218. }
  219. document.getElementById(&quot;total&quot;).innerHTML = originalList ? sum : &quot;&quot;;
  220. }
  221. &lt;!-- language: lang-html --&gt;
  222. &lt;input type=&quot;text&quot; id=&quot;search&quot; placeholder=&quot;Search Name&quot;&gt;
  223. &lt;input type=&quot;text&quot; id=&quot;search2&quot; placeholder=&quot;Search Surname&quot;&gt;
  224. &lt;input type=&quot;text&quot; id=&quot;search3&quot; placeholder=&quot;Search Value&quot;&gt;
  225. &lt;table class=&quot;table responsive table table-striped&quot; data-toggle=&quot;table&quot; data-filter-control=&quot;true&quot; data-show-jump-to=&quot;true&quot; data-pagination=&quot;true&quot; data-show-columns=&quot;true&quot;&gt;
  226. &lt;thead&gt;
  227. &lt;tr&gt;
  228. &lt;th scope=&quot;col&quot; data-field=&quot;name&quot; data-filter-control=&quot;input&quot;&gt;Search by Name&lt;/th&gt;
  229. &lt;th scope=&quot;col&quot; data-field=&quot;surname&quot; data-filter-control=&quot;input&quot;&gt;Search by Surname&lt;/th&gt;
  230. &lt;th scope=&quot;col&quot; data-field=&quot;number&quot; data-filter-control=&quot;input&quot;&gt;Search by value&lt;/th&gt;
  231. &lt;/tr&gt;
  232. &lt;/thead&gt;
  233. &lt;tbody id=&quot;displaytable&quot;&gt;
  234. &lt;tr&gt;
  235. &lt;td&gt;John&lt;/td&gt;
  236. &lt;td&gt;Tidor&lt;/td&gt;
  237. &lt;td class=&quot;countable&quot;&gt;5&lt;/td&gt;
  238. &lt;/tr&gt;
  239. &lt;tr&gt;
  240. &lt;td&gt;Marc&lt;/td&gt;
  241. &lt;td&gt;Tidor&lt;/td&gt;
  242. &lt;td class=&quot;countable&quot;&gt;5&lt;/td&gt;
  243. &lt;/tr&gt;
  244. &lt;tr&gt;
  245. &lt;td&gt;Tom&lt;/td&gt;
  246. &lt;td&gt;Cruise&lt;/td&gt;
  247. &lt;td class=&quot;countable&quot;&gt;4&lt;/td&gt;
  248. &lt;/tr&gt;
  249. &lt;tr&gt;
  250. &lt;td&gt;Jordan&lt;/td&gt;
  251. &lt;td&gt;Michael&lt;/td&gt;
  252. &lt;td class=&quot;countable&quot;&gt;7&lt;/td&gt;
  253. &lt;/tr&gt;
  254. &lt;tr&gt;
  255. &lt;td&gt;Marc&lt;/td&gt;
  256. &lt;td&gt;Michael&lt;/td&gt;
  257. &lt;td class=&quot;countable&quot;&gt;3&lt;/td&gt;
  258. &lt;/tr&gt;
  259. &lt;tr&gt;
  260. &lt;td&gt;Marc&lt;/td&gt;
  261. &lt;td&gt;Michael&lt;/td&gt;
  262. &lt;td class=&quot;countable&quot;&gt;1&lt;/td&gt;
  263. &lt;/tr&gt;
  264. &lt;tr&gt;
  265. &lt;td&gt;Miranda&lt;/td&gt;
  266. &lt;td&gt;Mimi&lt;/td&gt;
  267. &lt;td class=&quot;countable&quot;&gt;10&lt;/td&gt;
  268. &lt;/tr&gt;
  269. &lt;tr&gt;
  270. &lt;td&gt;Michel&lt;/td&gt;
  271. &lt;td&gt;Mitch&lt;/td&gt;
  272. &lt;td class=&quot;countable&quot;&gt;1&lt;/td&gt;
  273. &lt;/tr&gt;
  274. &lt;tr&gt;
  275. &lt;td&gt;John&lt;/td&gt;
  276. &lt;td&gt;Doe&lt;/td&gt;
  277. &lt;td class=&quot;countable&quot;&gt;0&lt;/td&gt;
  278. &lt;/tr&gt;
  279. &lt;/tbody&gt;
  280. &lt;/table&gt;
  281. &lt;table&gt;
  282. &lt;tfoot class=&quot;shown&quot;&gt;
  283. &lt;tr&gt;
  284. &lt;td colspan=&quot;5&quot;&gt;Total:&lt;/td&gt;
  285. &lt;td id=&quot;total&quot;&gt;&lt;/td&gt;
  286. &lt;/tr&gt;
  287. &lt;/tfoot&gt;
  288. &lt;/table&gt;
  289. &lt;!-- end snippet --&gt;
  290. Searches in the different fields at the same time may not working as expected!
  291. So I suggest you to reset all the fields to &quot;&quot; when you select a field to fill like in this **third EDIT**
  292. **Third snippet :**
  293. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  294. &lt;!-- language: lang-js --&gt;
  295. let filter1, filter2, filter3;
  296. let searchInput1;
  297. let searchInput2;
  298. let searchInput3;
  299. let filters;
  300. document.addEventListener(&quot;DOMContentLoaded&quot;, init);
  301. function init() {
  302. filter1 = document.getElementById(&quot;search&quot;);
  303. filter2 = document.getElementById(&quot;search2&quot;);
  304. filter3 = document.getElementById(&quot;search3&quot;);
  305. filters = [filter1, filter2, filter3];
  306. searchInput1 = document.getElementById(&quot;search&quot;);
  307. searchInput2 = document.getElementById(&quot;search2&quot;);
  308. searchInput3 = document.getElementById(&quot;search3&quot;);
  309. filter1.addEventListener(&quot;focus&quot;, () =&gt; resetOtherFields(filter1));
  310. filter2.addEventListener(&quot;focus&quot;, () =&gt; resetOtherFields(filter2));
  311. filter3.addEventListener(&quot;focus&quot;, () =&gt; resetOtherFields(filter3));
  312. filter1.addEventListener(&quot;keyup&quot;, searchTable);
  313. filter2.addEventListener(&quot;keyup&quot;, searchTable);
  314. filter3.addEventListener(&quot;keyup&quot;, searchTable);
  315. searchTable();
  316. }
  317. function resetOtherFields(currentField) {
  318. filters.forEach((field) =&gt; {
  319. if (field !== currentField) {
  320. field.value = &quot;&quot;;
  321. }
  322. });
  323. searchTable();
  324. }
  325. function searchTable() {
  326. let found, table, tr, td, i;
  327. filter1 = searchInput1.value.toUpperCase();
  328. filter2 = searchInput2.value.toUpperCase();
  329. filter3 = searchInput3.value.toUpperCase();
  330. table = document.getElementById(&quot;displaytable&quot;);
  331. tr = table.getElementsByTagName(&quot;tr&quot;);
  332. for (i = 0; i &lt; tr.length; i++) {
  333. if (tr[i].getElementsByTagName(&quot;th&quot;).length &gt; 0) {
  334. continue;
  335. }
  336. td = tr[i].getElementsByTagName(&quot;td&quot;);
  337. found = false;
  338. if (
  339. (filter1 &amp;&amp; td[0].textContent.toUpperCase().startsWith(filter1.trim())) ||
  340. (filter2 &amp;&amp; td[1].textContent.toUpperCase().startsWith(filter2.trim())) ||
  341. (filter3 &amp;&amp; td[2].textContent.trim().toUpperCase() === filter3.trim())
  342. ) {
  343. found = true;
  344. }
  345. tr[i].style.display = found ? &quot;&quot; : &quot;none&quot;;
  346. }
  347. updateTotal();
  348. }
  349. function updateTotal() {
  350. let cls = document.getElementById(&quot;displaytable&quot;).getElementsByTagName(&quot;td&quot;);
  351. let sum = 0;
  352. let originalList = false;
  353. for (var i = 0; i &lt; cls.length; i++) {
  354. if (cls[i].className == &quot;countable&quot; &amp;&amp; cls[i].closest(&quot;tr&quot;).style.display != &quot;none&quot;) {
  355. sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
  356. originalList = true;
  357. }
  358. }
  359. document.getElementById(&quot;total&quot;).innerHTML = originalList ? sum : &quot;&quot;;
  360. }
  361. &lt;!-- language: lang-html --&gt;
  362. &lt;input type=&quot;text&quot; id=&quot;search&quot; placeholder=&quot;Search Name&quot;&gt;
  363. &lt;input type=&quot;text&quot; id=&quot;search2&quot; placeholder=&quot;Search Surname&quot;&gt;
  364. &lt;input type=&quot;text&quot; id=&quot;search3&quot; placeholder=&quot;Search Value&quot;&gt;
  365. &lt;table class=&quot;table responsive table table-striped&quot; data-toggle=&quot;table&quot; data-filter-control=&quot;true&quot; data-show-jump-to=&quot;true&quot; data-pagination=&quot;true&quot; data-show-columns=&quot;true&quot;&gt;
  366. &lt;thead&gt;
  367. &lt;tr&gt;
  368. &lt;th scope=&quot;col&quot; data-field=&quot;name&quot; data-filter-control=&quot;input&quot;&gt;Search by Name&lt;/th&gt;
  369. &lt;th scope=&quot;col&quot; data-field=&quot;surname&quot; data-filter-control=&quot;input&quot;&gt;Search by Surname&lt;/th&gt;
  370. &lt;th scope=&quot;col&quot; data-field=&quot;number&quot; data-filter-control=&quot;input&quot;&gt;Search by value&lt;/th&gt;
  371. &lt;/tr&gt;
  372. &lt;/thead&gt;
  373. &lt;tbody id=&quot;displaytable&quot;&gt;
  374. &lt;tr&gt;
  375. &lt;td&gt;John&lt;/td&gt;
  376. &lt;td&gt;Tidor&lt;/td&gt;
  377. &lt;td class=&quot;countable&quot;&gt;5&lt;/td&gt;
  378. &lt;/tr&gt;
  379. &lt;tr&gt;
  380. &lt;td&gt;Marc&lt;/td&gt;
  381. &lt;td&gt;Tidor&lt;/td&gt;
  382. &lt;td class=&quot;countable&quot;&gt;5&lt;/td&gt;
  383. &lt;/tr&gt;
  384. &lt;tr&gt;
  385. &lt;td&gt;Tom&lt;/td&gt;
  386. &lt;td&gt;Cruise&lt;/td&gt;
  387. &lt;td class=&quot;countable&quot;&gt;4&lt;/td&gt;
  388. &lt;/tr&gt;
  389. &lt;tr&gt;
  390. &lt;td&gt;Jordan&lt;/td&gt;
  391. &lt;td&gt;Michael&lt;/td&gt;
  392. &lt;td class=&quot;countable&quot;&gt;7&lt;/td&gt;
  393. &lt;/tr&gt;
  394. &lt;tr&gt;
  395. &lt;td&gt;Marc&lt;/td&gt;
  396. &lt;td&gt;Michael&lt;/td&gt;
  397. &lt;td class=&quot;countable&quot;&gt;3&lt;/td&gt;
  398. &lt;/tr&gt;
  399. &lt;tr&gt;
  400. &lt;td&gt;Marc&lt;/td&gt;
  401. &lt;td&gt;Michael&lt;/td&gt;
  402. &lt;td class=&quot;countable&quot;&gt;1&lt;/td&gt;
  403. &lt;/tr&gt;
  404. &lt;tr&gt;
  405. &lt;td&gt;Miranda&lt;/td&gt;
  406. &lt;td&gt;Mimi&lt;/td&gt;
  407. &lt;td class=&quot;countable&quot;&gt;10&lt;/td&gt;
  408. &lt;/tr&gt;
  409. &lt;tr&gt;
  410. &lt;td&gt;Michel&lt;/td&gt;
  411. &lt;td&gt;Mitch&lt;/td&gt;
  412. &lt;td class=&quot;countable&quot;&gt;1&lt;/td&gt;
  413. &lt;/tr&gt;
  414. &lt;tr&gt;
  415. &lt;td&gt;John&lt;/td&gt;
  416. &lt;td&gt;Doe&lt;/td&gt;
  417. &lt;td class=&quot;countable&quot;&gt;0&lt;/td&gt;
  418. &lt;/tr&gt;
  419. &lt;tr&gt;
  420. &lt;td&gt;Michael&lt;/td&gt;
  421. &lt;td&gt;Jackson&lt;/td&gt;
  422. &lt;td class=&quot;countable&quot;&gt;4&lt;/td&gt;
  423. &lt;/tr&gt;
  424. &lt;/tbody&gt;
  425. &lt;/table&gt;
  426. &lt;table&gt;
  427. &lt;tfoot class=&quot;shown&quot;&gt;
  428. &lt;tr&gt;
  429. &lt;td colspan=&quot;5&quot;&gt;Total:&lt;/td&gt;
  430. &lt;td id=&quot;total&quot;&gt;&lt;/td&gt;
  431. &lt;/tr&gt;
  432. &lt;/tfoot&gt;
  433. &lt;/table&gt;
  434. &lt;!-- end snippet --&gt;
  435. So, now the reset is done when you change the field into you want to check a value.
  436. </details>

huangapple
  • 本文由 发表于 2023年6月9日 01:22:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/76434292.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定