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

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

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

问题

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

所需的HTML结构和jQuery尝试:

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

<!-- language: lang-js -->
var data = [{
    "name": "Alice",
    "surname": "Smith",
    "rollnum": "00002"
  },
  {
    "name": "Bob",
    "surname": "Walter",
    "rollnum": "00004"
  }
];

load();

function load() {

  var name = document.querySelector(".name");
  var surname = document.querySelector(".surname");
  $.each(data, function(index, value) {
    var $name = value.name;
    var $surname = value.surname;
    var $rollnum = value.rollnum;
    console.log($name);
    console.log($surname);
    console.log($name);
    $(".name").text($name);
    $(".surname").text($surname);
    $(".rollnum").text($rollnum);

  });
}

<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div class="eventsBlock">
  <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>
</div>

<!-- 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 -->

var data = [{
    &quot;name&quot;: &quot;Alice&quot;,
    &quot;surname&quot;: &quot;Smith&quot;,
    &quot;rollnum&quot;: &quot;00002&quot;
  },
  {
    &quot;name&quot;: &quot;Bob&quot;,
    &quot;surname&quot;: &quot;Walter&quot;,
    &quot;rollnum&quot;: &quot;00004&quot;
  }
];

load();

function load() {

  var name = document.querySelector(&quot;.name&quot;);
  var surname = document.querySelector(&quot;.surname&quot;);
  $.each(data, function(index, value) {
    var $name = value.name;
    var $surname = value.surname;
    var $rollnum = value.rollnum;
    console.log($name);
    console.log($surname);
    console.log($name);
    $(&quot;.name&quot;).text($name);
    $(&quot;.surname&quot;).text($surname);
    $(&quot;.rollnum&quot;).text($rollnum);

  });
}

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

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js&quot;&gt;&lt;/script&gt;

&lt;div class=&quot;eventsBlock&quot;&gt;
  &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;name&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;surname&lt;/span&gt;
      &lt;span class=&quot;rollnum&quot;&gt;rollnum&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;
&lt;/div&gt;

<!-- end snippet -->

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

答案1

得分: 2

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

var data = [{
    "name": "Alice",
    "surname": "Smith",
    "rollnum": "00002"
  },
  {
    "name": "Bob",
    "surname": "Walter",
    "rollnum": "00004"
  }
];

load();

function load() {
  $.each(data, function(index, value) {
    $('.eventsBlock').append(`<div class="row">
      <div class="col-md-4 col-sm-4">
        <span class="name">name: ` + value.name + `</span>
      </div>
      <div class="col-md-4 col-sm-4">
        <span class="surname">surname: ` + value.surname + `</span>
      </div>
      <div class="col-md-4 col-sm-4">
        <span class="rollnum">rollnum: ` + value.rollnum + `</span>
      </div>
      <div class="col-md-4 col-sm-4">
        <span class="locaton">locaton: N/A</span>
      </div>
    </div><br>`);
  });
}

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

var data = [{
    "name": "Alice",
    "surname": "Smith",
    "rollnum": "00002"
  },
  {
    "name": "Bob",
    "surname": "Walter",
    "rollnum": "00004"
  }
];

load();

function load() {
  $.each(data, function(index, value) {
    $('.eventsBlock tbody').append(`<tr>
      <td>` + value.name + `</td>
      <td>` + value.surname + `</td>
      <td>` + value.rollnum + `</td>
      <td>N/A</td>
      </tr>`);
  });
}

希望对你有帮助!

英文:

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 -->

var data = [{
    &quot;name&quot;: &quot;Alice&quot;,
    &quot;surname&quot;: &quot;Smith&quot;,
    &quot;rollnum&quot;: &quot;00002&quot;
  },
  {
    &quot;name&quot;: &quot;Bob&quot;,
    &quot;surname&quot;: &quot;Walter&quot;,
    &quot;rollnum&quot;: &quot;00004&quot;
  }
];

load();

function load() {
  $.each(data, function(index, value) {
    $(&#39;.eventsBlock&#39;).append(`&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;name: ` + value.name + `&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;surname: ` + value.surname + `&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-md-4 col-sm-4&quot;&gt;
      &lt;span class=&quot;rollnum&quot;&gt;rollnum: ` + value.rollnum + `&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: N/A&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;&lt;br&gt;`);

  });
}

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

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js&quot;&gt;&lt;/script&gt;

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

var data = [{
    &quot;name&quot;: &quot;Alice&quot;,
    &quot;surname&quot;: &quot;Smith&quot;,
    &quot;rollnum&quot;: &quot;00002&quot;
  },
  {
    &quot;name&quot;: &quot;Bob&quot;,
    &quot;surname&quot;: &quot;Walter&quot;,
    &quot;rollnum&quot;: &quot;00004&quot;
  }
];

load();

function load() {
  $.each(data, function(index, value) {
    $(&#39;.eventsBlock tbody&#39;).append(`&lt;tr&gt;
    &lt;td&gt;` + value.name + `&lt;/td&gt;
    &lt;td&gt;` + value.surname + `&lt;/td&gt;
    &lt;td&gt;` + value.rollnum + `&lt;/td&gt;
    &lt;td&gt;N/A&lt;/td&gt;
    &lt;/tr&gt;`);
  });
}

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

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js&quot;&gt;&lt;/script&gt;

&lt;table class=&quot;eventsBlock&quot;&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;name&lt;/th&gt;
      &lt;th&gt;surname&lt;/th&gt;
      &lt;th&gt;rollnum&lt;/th&gt;
      &lt;th&gt;locaton&lt;/th&gt;
      &lt;tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

<!-- end snippet -->

答案2

得分: 1

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

<div class="eventsBlock">
  <div class="row">
    <div class="col-md-4 col-sm-4">
      <span class="name">姓名</span>
    </div>
    <div class="col-md-4 col-sm-4">
      <span class="surname">姓氏</span>
      <span class="rollnum">学号</span>
    </div> 
    <div class="col-md-4 col-sm-4">
      <span class="locaton">地点</span>            
    </div> 
  </div>
</div>
<div class="eventsRows">
  <!--内容将在这里显示-->
</div>
var data = [
  {
    "name": "Alice",
    "surname": "Smith",
    "rollnum": "00002",
    "locaton": "孟买"
  },
  {
    "name": "Bob",
    "surname": "Walter",
    "rollnum": "00004",
    "locaton": "德里"
  }
];

function load(){
  let allRows = '';
  $.each(data, function (index, value) {    	 
    var $name = value.name;
    var $surname = value.surname;
    var $rollnum = value.rollnum;
    var $locaton = value.locaton;
    let rowView = `<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>`;
    allRows += rowView;
  });
  $('.eventsRows').html(allRows);
}

load();

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

英文:

This works if you're using jQuery.

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

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

var data = [
  {

     &quot;name&quot;:&quot;Alice&quot;,
     &quot;surname&quot;:&quot;Smith&quot;,
     &quot;rollnum&quot;:&quot;00002&quot;,
     &quot;locaton&quot;:&quot;Mumbai&quot;
  },
  {
    &quot;name&quot;:&quot;Bob&quot;,
     &quot;surname&quot;:&quot;Walter&quot;,
     &quot;rollnum&quot;:&quot;00004&quot;,
     &quot;locaton&quot;:&quot;Delhi&quot;
  }
];
     
     
     
function load(){
  let allRows = &#39;&#39;
  $.each(data, function (index, value) {    	 
   var $name = value.name;
   var $surname = value.surname;
   var $rollnum = value.rollnum;
   var $locaton = value.locaton;
   let rowView = `&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;${$name}&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;${$surname}&lt;/span&gt;
                      &lt;span class=&quot;rollnum&quot;&gt;${$rollnum}&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;
                  &lt;/div&gt;`
   allRows += rowView

  });
  $(&#39;.eventsRows&#39;).html(allRows)
}
load();

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

&lt;div class=&quot;eventsBlock&quot;&gt;
  &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;name&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;surname&lt;/span&gt;
      &lt;span class=&quot;rollnum&quot;&gt;rollnum&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;
&lt;/div&gt;
&lt;div class=&quot;eventsRows&quot;&gt;
  &lt;!--Content will go here--&gt;        
&lt;/div&gt;

<!-- end snippet -->

答案3

得分: 1

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

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

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

var data = [{
    "name": "Alice",
    "surname": "Smith",
    "rollnum": "00002"
  },
  {
    "name": "Bob",
    "surname": "Walter",
    "rollnum": "00004"
  }
];

load();

function load() {
  var output = '';
  var name = document.querySelector(".name");
  var surname = document.querySelector(".surname");
  
  $.each(data, function(index, value) {
    var $name = value.name;
    var $surname = value.surname;
    var $rollnum = value.rollnum;
    console.log($name + ' - ' + $surname + ' - ' + $rollnum);

    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>';
  });
  
  $('.eventsBlock').html(output);
}

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

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&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 -->

var data = [{
    &quot;name&quot;: &quot;Alice&quot;,
    &quot;surname&quot;: &quot;Smith&quot;,
    &quot;rollnum&quot;: &quot;00002&quot;
  },
  {
    &quot;name&quot;: &quot;Bob&quot;,
    &quot;surname&quot;: &quot;Walter&quot;,
    &quot;rollnum&quot;: &quot;00004&quot;
  }
];

load();

function load() {
  var output = &#39;&#39;;
  var name = document.querySelector(&quot;.name&quot;);
  var surname = document.querySelector(&quot;.surname&quot;);
  
  $.each(data, function(index, value) {
    var $name = value.name;
    var $surname = value.surname;
    var $rollnum = value.rollnum;
    console.log($name + &#39; - &#39; + $surname + &#39; - &#39; + $rollnum);

    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;;
  });
  
  $(&#39;.eventsBlock&#39;).html(output);
}

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

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&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
匿名

发表评论

匿名网友

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

确定