如何使用jQuery生成带有加载数据的行和列？

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

How to Generate Row & Columns with load data by JQuery?

问题

我想使用jQuery的each函数重复生成带有数据的行和列。请帮忙。

所需的HTML结构和jQuery尝试：

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  4. var data = [{
  5.     "name": "Alice",
  6.     "surname": "Smith",
  7.     "rollnum": "00002"
  8.   },
  9.   {
  10.     "name": "Bob",
  11.     "surname": "Walter",
  12.     "rollnum": "00004"
  13.   }
  14. ];
  16. load();
  18. function load() {
  20.   var name = document.querySelector(".name");
  21.   var surname = document.querySelector(".surname");
  22.   $.each(data, function(index, value) {
  23.     var $name = value.name;
  24.     var $surname = value.surname;
  25.     var $rollnum = value.rollnum;
  26.     console.log($name);
  27.     console.log($surname);
  28.     console.log($name);
  29.     $(".name").text($name);
  30.     $(".surname").text($surname);
  31.     $(".rollnum").text($rollnum);
  33.   });
  34. }
  36. <!-- language: lang-html -->
  37. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
  39. <div class="eventsBlock">
  40.   <div class="row">
  41.     <div class="col-md-4 col-sm-4">
  42.       <span class="name">name</span>
  43.     </div>
  44.     <div class="col-md-4 col-sm-4">
  45.       <span class="surname">surname</span>
  46.       <span class="rollnum">rollnum</span>
  47.     </div>
  48.     <div class="col-md-4 col-sm-4">
  49.       <span class="locaton">locaton</span>
  50.     </div>
  51.   </div>
  52. </div>
  54. <!-- end snippet -->

链接：https://jsfiddle.net/anoopsuda/3a6ucg4d/3/

英文:

I want to generate row and column repeatably with data by jquery each function. Please help.

Required HTML Structure and jquery attempt:

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

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

  1. var data = [{
  2.     &quot;name&quot;: &quot;Alice&quot;,
  3.     &quot;surname&quot;: &quot;Smith&quot;,
  4.     &quot;rollnum&quot;: &quot;00002&quot;
  5.   },
  6.   {
  7.     &quot;name&quot;: &quot;Bob&quot;,
  8.     &quot;surname&quot;: &quot;Walter&quot;,
  9.     &quot;rollnum&quot;: &quot;00004&quot;
  10.   }
  11. ];
  13. load();
  15. function load() {
  17.   var name = document.querySelector(&quot;.name&quot;);
  18.   var surname = document.querySelector(&quot;.surname&quot;);
  19.   $.each(data, function(index, value) {
  20.     var $name = value.name;
  21.     var $surname = value.surname;
  22.     var $rollnum = value.rollnum;
  23.     console.log($name);
  24.     console.log($surname);
  25.     console.log($name);
  26.     $(&quot;.name&quot;).text($name);
  27.     $(&quot;.surname&quot;).text($surname);
  28.     $(&quot;.rollnum&quot;).text($rollnum);
  30.   });
  31. }

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

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js&quot;&gt;&lt;/script&gt;
  3. &lt;div class=&quot;eventsBlock&quot;&gt;
  4.   &lt;div class=&quot;row&quot;&gt;
  5.     &lt;div class=&quot;col-md-4 col-sm-4&quot;&gt;
  6.       &lt;span class=&quot;name&quot;&gt;name&lt;/span&gt;
  7.     &lt;/div&gt;
  8.     &lt;div class=&quot;col-md-4 col-sm-4&quot;&gt;
  9.       &lt;span class=&quot;surname&quot;&gt;surname&lt;/span&gt;
  10.       &lt;span class=&quot;rollnum&quot;&gt;rollnum&lt;/span&gt;
  11.     &lt;/div&gt;
  12.     &lt;div class=&quot;col-md-4 col-sm-4&quot;&gt;
  13.       &lt;span class=&quot;locaton&quot;&gt;locaton&lt;/span&gt;
  14.     &lt;/div&gt;
  15.   &lt;/div&gt;
  16. &lt;/div&gt;

<!-- end snippet -->

https://jsfiddle.net/anoopsuda/3a6ucg4d/3/

答案1

得分: 2

你需要使用.append()方法，并且需要在surname和rollnumber附近稍微改变HTML结构（按照我的建议将它们放在单独的div中）。

  1. var data = [{
  2.     "name": "Alice",
  3.     "surname": "Smith",
  4.     "rollnum": "00002"
  5.   },
  6.   {
  7.     "name": "Bob",
  8.     "surname": "Walter",
  9.     "rollnum": "00004"
  10.   }
  11. ];
  13. load();
  15. function load() {
  16.   $.each(data, function(index, value) {
  17.     $('.eventsBlock').append(`<div class="row">
  18.       <div class="col-md-4 col-sm-4">
  19.         <span class="name">name: ` + value.name + `</span>
  20.       </div>
  21.       <div class="col-md-4 col-sm-4">
  22.         <span class="surname">surname: ` + value.surname + `</span>
  23.       </div>
  24.       <div class="col-md-4 col-sm-4">
  25.         <span class="rollnum">rollnum: ` + value.rollnum + `</span>
  26.       </div>
  27.       <div class="col-md-4 col-sm-4">
  28.         <span class="locaton">locaton: N/A</span>
  29.       </div>
  30.     </div><br>`);
  31.   });
  32. }

如果你使用下面的表格HTML会更好：

  1. var data = [{
  2.     "name": "Alice",
  3.     "surname": "Smith",
  4.     "rollnum": "00002"
  5.   },
  6.   {
  7.     "name": "Bob",
  8.     "surname": "Walter",
  9.     "rollnum": "00004"
  10.   }
  11. ];
  13. load();
  15. function load() {
  16.   $.each(data, function(index, value) {
  17.     $('.eventsBlock tbody').append(`<tr>
  18.       <td>` + value.name + `</td>
  19.       <td>` + value.surname + `</td>
  20.       <td>` + value.rollnum + `</td>
  21.       <td>N/A</td>
  22.       </tr>`);
  23.   });
  24. }

希望对你有帮助！

英文:

You need to use .append() for this and need to change HTML structure a bit near surname and rollnumber (put them in separate div as per my suggestion)

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

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

  1. var data = [{
  2.     &quot;name&quot;: &quot;Alice&quot;,
  3.     &quot;surname&quot;: &quot;Smith&quot;,
  4.     &quot;rollnum&quot;: &quot;00002&quot;
  5.   },
  6.   {
  7.     &quot;name&quot;: &quot;Bob&quot;,
  8.     &quot;surname&quot;: &quot;Walter&quot;,
  9.     &quot;rollnum&quot;: &quot;00004&quot;
  10.   }
  11. ];
  13. load();
  15. function load() {
  16.   $.each(data, function(index, value) {
  17.     $(&#39;.eventsBlock&#39;).append(`&lt;div class=&quot;row&quot;&gt;
  18.     &lt;div class=&quot;col-md-4 col-sm-4&quot;&gt;
  19.       &lt;span class=&quot;name&quot;&gt;name: ` + value.name + `&lt;/span&gt;
  20.     &lt;/div&gt;
  21.     &lt;div class=&quot;col-md-4 col-sm-4&quot;&gt;
  22.       &lt;span class=&quot;surname&quot;&gt;surname: ` + value.surname + `&lt;/span&gt;
  23.     &lt;/div&gt;
  24.     &lt;div class=&quot;col-md-4 col-sm-4&quot;&gt;
  25.       &lt;span class=&quot;rollnum&quot;&gt;rollnum: ` + value.rollnum + `&lt;/span&gt;
  26.     &lt;/div&gt;
  27.     &lt;div class=&quot;col-md-4 col-sm-4&quot;&gt;
  28.       &lt;span class=&quot;locaton&quot;&gt;locaton: N/A&lt;/span&gt;
  29.     &lt;/div&gt;
  30.   &lt;/div&gt;&lt;br&gt;`);
  32.   });
  33. }

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

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js&quot;&gt;&lt;/script&gt;
  3. &lt;div class=&quot;eventsBlock&quot;&gt;
  4. &lt;/div&gt;

<!-- end snippet -->

It would be much better if you use table HTML like this:

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

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

  1. var data = [{
  2.     &quot;name&quot;: &quot;Alice&quot;,
  3.     &quot;surname&quot;: &quot;Smith&quot;,
  4.     &quot;rollnum&quot;: &quot;00002&quot;
  5.   },
  6.   {
  7.     &quot;name&quot;: &quot;Bob&quot;,
  8.     &quot;surname&quot;: &quot;Walter&quot;,
  9.     &quot;rollnum&quot;: &quot;00004&quot;
  10.   }
  11. ];
  13. load();
  15. function load() {
  16.   $.each(data, function(index, value) {
  17.     $(&#39;.eventsBlock tbody&#39;).append(`&lt;tr&gt;
  18.     &lt;td&gt;` + value.name + `&lt;/td&gt;
  19.     &lt;td&gt;` + value.surname + `&lt;/td&gt;
  20.     &lt;td&gt;` + value.rollnum + `&lt;/td&gt;
  21.     &lt;td&gt;N/A&lt;/td&gt;
  22.     &lt;/tr&gt;`);
  23.   });
  24. }

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

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js&quot;&gt;&lt;/script&gt;
  3. &lt;table class=&quot;eventsBlock&quot;&gt;
  4.   &lt;thead&gt;
  5.     &lt;tr&gt;
  6.       &lt;th&gt;name&lt;/th&gt;
  7.       &lt;th&gt;surname&lt;/th&gt;
  8.       &lt;th&gt;rollnum&lt;/th&gt;
  9.       &lt;th&gt;locaton&lt;/th&gt;
  10.       &lt;tr&gt;
  11.   &lt;/thead&gt;
  12.   &lt;tbody&gt;
  13.   &lt;/tbody&gt;
  14. &lt;/table&gt;

<!-- end snippet -->

答案2

得分: 1

这段代码是使用jQuery编写的。以下是翻译好的代码：

  1. <div class="eventsBlock">
  2.   <div class="row">
  3.     <div class="col-md-4 col-sm-4">
  4.       <span class="name">姓名</span>
  5.     </div>
  6.     <div class="col-md-4 col-sm-4">
  7.       <span class="surname">姓氏</span>
  8.       <span class="rollnum">学号</span>
  9.     </div> 
  10.     <div class="col-md-4 col-sm-4">
  11.       <span class="locaton">地点</span>            
  12.     </div> 
  13.   </div>
  14. </div>
  15. <div class="eventsRows">
  16.   <!--内容将在这里显示-->
  17. </div>
  1. var data = [
  2.   {
  3.     "name": "Alice",
  4.     "surname": "Smith",
  5.     "rollnum": "00002",
  6.     "locaton": "孟买"
  7.   },
  8.   {
  9.     "name": "Bob",
  10.     "surname": "Walter",
  11.     "rollnum": "00004",
  12.     "locaton": "德里"
  13.   }
  14. ];
  16. function load(){
  17.   let allRows = '';
  18.   $.each(data, function (index, value) {    	 
  19.     var $name = value.name;
  20.     var $surname = value.surname;
  21.     var $rollnum = value.rollnum;
  22.     var $locaton = value.locaton;
  23.     let rowView = `<div class="row">
  24.                     <div class="col-md-4 col-sm-4">
  25.                       <span class="name">${$name}</span>
  26.                     </div>
  27.                     <div class="col-md-4 col-sm-4">
  28.                       <span class="surname">${$surname}</span>
  29.                       <span class="rollnum">${$rollnum}</span>
  30.                     </div>
  31.                     <div class="col-md-4 col-sm-4">
  32.                       <span class="locaton">${$locaton}</span>            
  33.                     </div> 
  34.                   </div>`;
  35.     allRows += rowView;
  36.   });
  37.   $('.eventsRows').html(allRows);
  38. }
  40. load();

请注意，这只是代码的翻译部分，不包括任何其他内容。

英文:

This works if you're using jQuery.

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

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

  1. var data = [
  2.   {
  4.      &quot;name&quot;:&quot;Alice&quot;,
  5.      &quot;surname&quot;:&quot;Smith&quot;,
  6.      &quot;rollnum&quot;:&quot;00002&quot;,
  7.      &quot;locaton&quot;:&quot;Mumbai&quot;
  8.   },
  9.   {
  10.     &quot;name&quot;:&quot;Bob&quot;,
  11.      &quot;surname&quot;:&quot;Walter&quot;,
  12.      &quot;rollnum&quot;:&quot;00004&quot;,
  13.      &quot;locaton&quot;:&quot;Delhi&quot;
  14.   }
  15. ];
  16.      
  17.      
  18.      
  19. function load(){
  20.   let allRows = &#39;&#39;
  21.   $.each(data, function (index, value) {    	 
  22.    var $name = value.name;
  23.    var $surname = value.surname;
  24.    var $rollnum = value.rollnum;
  25.    var $locaton = value.locaton;
  26.    let rowView = `&lt;div class=&quot;row&quot;&gt;
  27.                     &lt;div class=&quot;col-md-4 col-sm-4&quot;&gt;
  28.                       &lt;span class=&quot;name&quot;&gt;${$name}&lt;/span&gt;
  29.                       &lt;/div&gt;
  30.                       &lt;div class=&quot;col-md-4 col-sm-4&quot;&gt;
  31.                       &lt;span class=&quot;surname&quot;&gt;${$surname}&lt;/span&gt;
  32.                       &lt;span class=&quot;rollnum&quot;&gt;${$rollnum}&lt;/span&gt;
  33.                       &lt;/div&gt;
  34.                       &lt;div class=&quot;col-md-4 col-sm-4&quot;&gt;
  35.                         &lt;span class=&quot;locaton&quot;&gt;${$locaton}&lt;/span&gt;            
  36.                         &lt;/div&gt; 
  37.                     &lt;/div&gt;
  38.                   &lt;/div&gt;`
  39.    allRows += rowView
  41.   });
  42.   $(&#39;.eventsRows&#39;).html(allRows)
  43. }
  44. load();

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

  1. &lt;div class=&quot;eventsBlock&quot;&gt;
  2.   &lt;div class=&quot;row&quot;&gt;
  3.     &lt;div class=&quot;col-md-4 col-sm-4&quot;&gt;
  4.       &lt;span class=&quot;name&quot;&gt;name&lt;/span&gt;
  5.     &lt;/div&gt;
  6.     &lt;div class=&quot;col-md-4 col-sm-4&quot;&gt;
  7.       &lt;span class=&quot;surname&quot;&gt;surname&lt;/span&gt;
  8.       &lt;span class=&quot;rollnum&quot;&gt;rollnum&lt;/span&gt;
  9.     &lt;/div&gt; 
  10.     &lt;div class=&quot;col-md-4 col-sm-4&quot;&gt;
  11.       &lt;span class=&quot;locaton&quot;&gt;locaton&lt;/span&gt;            
  12.     &lt;/div&gt; 
  13.   &lt;/div&gt;
  14. &lt;/div&gt;
  15. &lt;div class=&quot;eventsRows&quot;&gt;
  16.   &lt;!--Content will go here--&gt;        
  17. &lt;/div&gt;

<!-- end snippet -->

答案3

得分: 1

你需要在循环中使用一个变量。

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

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

  1. var data = [{
  2.     "name": "Alice",
  3.     "surname": "Smith",
  4.     "rollnum": "00002"
  5.   },
  6.   {
  7.     "name": "Bob",
  8.     "surname": "Walter",
  9.     "rollnum": "00004"
  10.   }
  11. ];
  13. load();
  15. function load() {
  16.   var output = '';
  17.   var name = document.querySelector(".name");
  18.   var surname = document.querySelector(".surname");
  19.   
  20.   $.each(data, function(index, value) {
  21.     var $name = value.name;
  22.     var $surname = value.surname;
  23.     var $rollnum = value.rollnum;
  24.     console.log($name + ' - ' + $surname + ' - ' + $rollnum);
  26.     output += '<div class="row"><div class="col-md-4 col-sm-4"><span class="name">' + $name + '</span></div><div class="col-md-4 col-sm-4"><span class="surname">' + $surname + '</span><span class="rollnum">' + $rollnum + '</span></div><div class="col-md-4 col-sm-4"><span class="locaton">locaton</span></div></div>';
  27.   });
  28.   
  29.   $('.eventsBlock').html(output);
  30. }

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

  1. &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  2. &lt;div class="eventsBlock"&gt;&lt;/div&gt;

<!-- end snippet -->

英文:

You need to use a var in your loop

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

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

  1. var data = [{
  2.     &quot;name&quot;: &quot;Alice&quot;,
  3.     &quot;surname&quot;: &quot;Smith&quot;,
  4.     &quot;rollnum&quot;: &quot;00002&quot;
  5.   },
  6.   {
  7.     &quot;name&quot;: &quot;Bob&quot;,
  8.     &quot;surname&quot;: &quot;Walter&quot;,
  9.     &quot;rollnum&quot;: &quot;00004&quot;
  10.   }
  11. ];
  13. load();
  15. function load() {
  16.   var output = &#39;&#39;;
  17.   var name = document.querySelector(&quot;.name&quot;);
  18.   var surname = document.querySelector(&quot;.surname&quot;);
  19.   
  20.   $.each(data, function(index, value) {
  21.     var $name = value.name;
  22.     var $surname = value.surname;
  23.     var $rollnum = value.rollnum;
  24.     console.log($name + &#39; - &#39; + $surname + &#39; - &#39; + $rollnum);
  26.     output += &#39;&lt;div class=&quot;row&quot;&gt;&lt;div class=&quot;col-md-4 col-sm-4&quot;&gt;&lt;span class=&quot;name&quot;&gt;&#39; + $name + &#39;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;col-md-4 col-sm-4&quot;&gt;&lt;span class=&quot;surname&quot;&gt;&#39; + $surname + &#39;&lt;/span&gt;&lt;span class=&quot;rollnum&quot;&gt;&#39; + $rollnum + &#39;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;col-md-4 col-sm-4&quot;&gt;&lt;span class=&quot;locaton&quot;&gt;locaton&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&#39;;
  27.   });
  28.   
  29.   $(&#39;.eventsBlock&#39;).html(output);
  30. }

<!-- 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;div class=&quot;eventsBlock&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年8月9日 17:36:08
  • 转载请务必保留本文链接：https://go.coder-hub.com/76866419.html
  • javascript
  • jquery
匿名

发表评论

匿名网友

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

确定