2023年8月9日 17:36:08go评论97阅读模式

英文:

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:

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

  });
}

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

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

答案1

得分: 2

你需要使用.append()方法，并且需要在surname和rollnumber附近稍微改变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)

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;`);

  });
}

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

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

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;`);
  });
}

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

答案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.

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();

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

答案3

得分: 1

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

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);
}

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

英文:

You need to use a var in your loop

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);
}

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

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

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

问题

答案1

答案2

答案3

如何使一个按钮影响HTML中的布尔值？

“Issues with variable echos” 变量回显的问题

无法检查字符串中的数字和符号。

在进行预检请求时出现了401 + CORS的问题。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论