获取循环外的数据在 JQuery 中

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

Get data outside Loop in JQuery

问题

I can help you with the translation. Here is the translated text:

  1. 当我尝试在点击获取所有输入类型数据时控制台数据时，它返回`未定义`。我想要的只是获取每个输入类型的值，并使用`push`将其存储在列表中，我应该再创建一个for循环吗？
  2.  
  3. var selected_obj = {
  4.     quantity: testtttttt examplee
  5. }
  6. selected_items.push(selected_obj);

Please let me know if you need any further assistance.

英文:

I have an issue where it returns an unidentified when I tried to console the data by clicking get all input type data, All I want is to get the value of each input type and store it on list using push should I make another for loop? just to reiterate each value?

  1. var selected_obj ={ 
  2.             quantity: testtttttt examplee
  3.        }
  4. selected_items.push(selected_obj);

获取循环外的数据在 JQuery 中

what I've tried

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

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

  1. $(&quot;#allcb&quot;).change(function() {
  2.   $(&#39;tbody tr td input[type=&quot;checkbox&quot;]&#39;).prop(
  3.     &quot;checked&quot;,
  4.     $(this).prop(&quot;checked&quot;)
  5.   );
  6. });
  8. $(document).on(&quot;keyup&quot;, &quot;.quantity_input&quot;, function() {
  9.   var $row = $(this).closest(&#39;.row&#39;);
  10.   var value_input = 0;
  11.   var price_value = 0;
  12.   var total_value = 0;
  14.   value_input = $(&quot;.quantity_input&quot;, $row).val();
  15.   price_value = $(&quot;.price_value&quot;, $row).html();
  16.   total_value = parseInt(value_input) * parseInt(price_value);
  17.   $(&quot;.total_value_row&quot;, $row).text(total_value);
  18. });
  20. $(document).on(&quot;click&quot;, &quot;.remove_data&quot;, function() {
  21.   var $row = $(this).closest(&#39;.row&#39;);
  22.   var checkboxName = $row.data(&#39;for&#39;);
  23.   var $checkbox = $(`input[type=&quot;checkbox&quot;][name=&quot;${checkboxName}&quot;]`);
  24.   
  25.   $row.remove();
  26.   $checkbox.prop(&#39;checked&#39;, false);
  27.   $checkbox.get(0).hasCovered = false;
  28. });
  30. $(document).ready(function() {
  31.   $(&quot;#add_data&quot;).click(function() {
  32.     var grid = document.getElementById(&quot;Table1&quot;);
  33.     var message = &quot;Values                 Description\n&quot;;
  35.     var checkBoxes = grid.getElementsByTagName(&quot;INPUT&quot;);
  36.     var str = &#39;&#39;
  38.     for (var i = 0; i &lt; checkBoxes.length; i++) {
  39.       if (
  40.         checkBoxes[i].checked &amp;&amp;
  41.         checkBoxes[i].name !== &quot;allcb&quot; &amp;&amp;
  42.         !checkBoxes[i].hasCovered
  43.       ) {
  44.         var row = checkBoxes[i].parentNode.parentNode;
  45.         str +=
  46.           &#39;&lt;div class=&quot;row&quot; data-for=&quot;&#39; + checkBoxes[i].id + &#39;&quot;&gt;&lt;div class=&quot;col-md-8&quot;&gt;&lt;p class=&quot;me-3&quot;&gt; &#39; +
  47.           &#39;&lt;a href=&quot;#&quot; class=&quot;text-body&quot;&gt;&#39; +
  48.           &#39;&lt;button type=&quot;button&quot; class = &quot;remove_data&quot; id=&quot;remove_data&quot;&gt;Remove item&lt;/button&gt;&lt;/a&gt;&amp;nbsp&#39; +
  50.           &#39;&lt;span&gt;Quantity&lt;/span&gt;&amp;nbsp&#39; +
  51.           row.cells[2].innerHTML +
  52.           &quot;&lt;/a&gt;&lt;/p&gt; &quot; +
  53.           &#39;&lt;span class=&quot;me-1&quot;&gt;Price &lt;/span&gt;&amp;nbsp&#39; +
  54.           &#39;&lt;span class=&quot;me-1 price_value&quot;&gt;&#39; +
  55.           row.cells[1].innerHTML +
  56.           &quot;&lt;/span&gt;&amp;nbsp&quot; +
  57.           &#39;&lt;input type=&quot;number&quot; id=&quot;quantity_input&quot; class=&quot;form-control form-control-sm w-px-75 quantity_input&quot; value=&quot;1&quot; min=&quot;1&quot; max=&quot;5&quot;/&gt;&amp;nbsp&#39; +
  58.           &#39;&lt;span class= &quot;total_value_row&quot; &gt;total value is&lt;/span&gt; &#39; +
  59.           &quot;&lt;/div&gt;&lt;hr&gt;&lt;/div&gt;&quot;;
  60.         checkBoxes[i].hasCovered = true;
  61.       }
  62.     }
  63.     $(&quot;.whole-div-class&quot;).append(str);
  64.   });
  67.   $(&quot;#get_data&quot;).click(function() {
  68.     var selected_items = [];
  69.     var $row = $(this).closest(&#39;.row&#39;);
  71.     var grid = document.getElementById(&quot;Table1&quot;);
  72.     var checkBoxes = grid.getElementsByTagName(&quot;INPUT&quot;);
  73.     var str = &#39;&#39;
  75.     for (var i = 0; i &lt; checkBoxes.length; i++) {
  76.       value_input = $(&quot;.quantity_input&quot;, $row).val();
  77.       console.log(value_input);
  78.       console.log(&quot;test&quot;);
  80.       var selected_obj ={ 
  81.             quantity: value_input
  82.        }
  83.       selected_items.push(selected_obj);
  84.     }
  87.   });
  90. });

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

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2.     &lt;table border=&quot;1&quot; id=&quot;Table1&quot;&gt;
  3.       &lt;thead&gt;
  4.         &lt;tr&gt;
  5.           &lt;th&gt;
  6.             &lt;input type=&quot;checkbox&quot; id=&quot;allcb&quot; name=&quot;allcb&quot; /&gt;
  7.           &lt;/th&gt;
  8.           &lt;th&gt;Price&lt;/th&gt;
  9.           &lt;td&gt;Quantity&lt;/td&gt;
  10.         &lt;/tr&gt;
  11.       &lt;/thead&gt;
  12.       &lt;tbody&gt;
  13.         &lt;tr&gt;
  14.           &lt;td&gt;
  15.             &lt;input type=&quot;checkbox&quot; id=&quot;cb1&quot; name=&quot;cb1&quot; /&gt;
  16.           &lt;/td&gt;
  17.           &lt;td&gt;200&lt;/td&gt;
  18.           &lt;td&gt; 25&lt;/td&gt;
  19.         &lt;/tr&gt;
  20.         &lt;tr&gt;
  21.           &lt;td&gt;
  22.             &lt;input type=&quot;checkbox&quot; id=&quot;cb2&quot; name=&quot;cb2&quot; /&gt;
  23.           &lt;/td&gt;
  24.           &lt;td&gt;300&lt;/td&gt;
  25.           &lt;td&gt;30&lt;/td&gt;
  26.         &lt;/tr&gt;
  27.         &lt;tr&gt;
  28.           &lt;td&gt;
  29.             &lt;input type=&quot;checkbox&quot; id=&quot;cb3&quot; name=&quot;cb3&quot; /&gt;
  30.           &lt;/td&gt;
  31.           &lt;td&gt;400&lt;/td&gt;
  32.           &lt;td&gt;50&lt;/td&gt;
  33.         &lt;/tr&gt;
  34.       &lt;/tbody&gt;
  35.     &lt;/table&gt;
  36.     &lt;br /&gt;
  37.     &lt;button type=&quot;button&quot; id=&quot;add_data&quot;&gt;Add datas&lt;/button&gt;
  38.     &lt;button type=&quot;button&quot; id=&quot;get_data&quot;&gt;Get all input type data&lt;/button&gt;
  39.     
  40.     &lt;ul class=&quot;list-group mb-3 row whole-div-class&quot;&gt;&lt;/ul&gt;

<!-- end snippet -->

答案1

得分: 1

你可以通过类选择所有输入元素，然后使用 map 获取对象数组。

  1. const selectedItems = $('.quantity_input').map((i, el) => ({quantity: el.value})).get();
英文:

You can select all the input elements by class, then use map to get an array of objects.

  1. const selectedItems = $(&#39;.quantity_input&#39;).map((i, el) =&gt; ({quantity: el.value})).get();

huangapple
  • 本文由 发表于 2023年5月15日 00:40:47
  • 转载请务必保留本文链接：https://go.coder-hub.com/76248610.html
  • css
  • html
  • javascript
  • jquery
匿名

发表评论

匿名网友

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

确定