Как построить динамическую таблицу с использованием JQuery? - PullRequest
Новая
       40

Как построить динамическую таблицу с использованием JQuery?

2 голосов
/ 24 апреля 2019

Я хотел бы построить динамическую таблицу, используя JQuery, а затем добавить таблицу в DOM.Обычно я использовал метод конкатенации строк для построения таблицы.На этот раз я хотел бы сделать это с JQuery.Одна вещь, которую я изо всех сил пытаюсь получить, - это открытие / закрытие элемента tr при зацикливании нескольких строк.Вот пример, если мой код: 

var data = {
  "1": {
    "fname": "Jon",
    "lname": "Wayne",
    "dob": "05/14/1987",
    "status": "Active",
    "color": "Red",
    "team": "Miami"
  },
  "2": {
    "fname": "Tim",
    "lname": "Ryan",
    "dob": "01/23/1967",
    "status": "Inactive",
    "color": "Blue",
    "team": "Chicago"
  },
  "3": {
    "fname": "Jim",
    "lname": "Carey",
    "dob": "11/02/1997",
    "status": "Suspended",
    "color": "Yellow",
    "team": "Denver"
  },
  "4": {
    "fname": "Chuck",
    "lname": "Norris",
    "dob": "09/06/1945",
    "status": "Active",
    "color": "Green",
    "team": "Boston"
  }
}

$('#start').on('click', showRecords);
function showRecords() {
  displayData(1,data);
}

function displayData(fnid,data) {
		var tbl = $('<table>').addClass('display').prop('id','data_tbl'),
			thead = $('<thead>'),
			tbody = $('<tbody>'),
			tr = $('<tr>');
			title = ['First Name','Last Name','DOB','Status','Color','Team'];

		/*** Start: Table Header ***/
		thead.append('<tr>');
		for(var i=0; i < title.length; i++) {
			if(fnid == 1){
				if(i <= 3) {
					thead.append($('<th>').text(title[i]));
				}
			}else{
				thead.append($('<th>').text(title[i]));
			}
		}
		thead.append('</tr>');
		/*** End: Table Header ***/

		/*** Start: Table Body ***/
		for(key in data) {
			tbody.append('<tr>');
			tbody.append($('<td>').text(data[key].fname));
			tbody.append($('<td>').text(data[key].lname));
			tbody.append($('<td>').text(data[key].dob));
			tbody.append($('<td>').text(data[key].status));
			if(fnid !== 1) {
				tbody.append($('<td>').text(data[key].color));
				tbody.append($('<td>').text(data[key].team));
			}
			tbody.append('</tr>');
		}
		/*** End: Table Body ***/

		tbl.append(thead); // Append header section to table.
		tbl.append(tbody); // Append body section to table.
		
    $("#container").empty().append(tbl);
	}
.display {
  width: 500px;
  background-color: red;
}
.display,
.display th,
.display td{
  border: 1px solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" name="start" id="start" value="Start" />
<div id="container"></div>

На первый взгляд, вы можете подумать, что с кодом все в порядке, но если вы откроете свои инструменты разработчика и осмотрите элементы таблицы, вы найдетеПроблемы.В thead и tbody есть элементы tr, которые пусты.Этих элементов не должно быть.Может кто-нибудь сказать мне, как я могу открыть / закрыть элемент tr в JQuery и правильно построить таблицу?Спасибо.

Ответы [ 3 ]

2 голосов
/ 24 апреля 2019

Используйте Object.keys , чтобы зациклить ваш объект. 

var data = {
  "1": {
    "fname": "Jon",
    "lname": "Wayne",
    "dob": "05/14/1987",
    "status": "Active",
    "color": "Red",
    "team": "Miami"
  },
  "2": {
    "fname": "Tim",
    "lname": "Ryan",
    "dob": "01/23/1967",
    "status": "Inactive",
    "color": "Blue",
    "team": "Chicago"
  },
  "3": {
    "fname": "Jim",
    "lname": "Carey",
    "dob": "11/02/1997",
    "status": "Suspended",
    "color": "Yellow",
    "team": "Denver"
  },
  "4": {
    "fname": "Chuck",
    "lname": "Norris",
    "dob": "09/06/1945",
    "status": "Active",
    "color": "Green",
    "team": "Boston"
  }
}

$('#start').on('click', showRecords);
function showRecords() {
  displayData(1,data);
}

function displayData() {
  const table = $("<table></table>").addClass('display');

  Object.keys(data).forEach(item => {
    const row = $("<tr></tr>");
    Object.keys(data[item]).forEach(key => {
      const rowData = $("<td></td>")
        .addClass("bar")
        .text(data[item][key]);
      row.append(rowData);
    });
    table.append(row);
  });

  $("#container").empty().append(table);
}
.display {
  width: 500px;
  background-color: red;
}
.display,
.display th,
.display td{
  border: 1px solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" name="start" id="start" value="Start" />
<div id="container"></div>
1 голос
/ 24 апреля 2019

Я бы предложил распаковать ваш html в шаблон. Таким образом, ваш скрипт будет очищен, и вы тем самым отделите свою разметку от логики. Следующая логика использует созданный шаблон, а затем ему нужно только создать ячейки для тела. Он строит ячейки в массиве строк, используя map, который затем сразу присоединяет все строки к телу. 

var data = {
  "1": {
    "fname": "Jon",
    "lname": "Wayne",
    "dob": "05/14/1987",
    "status": "Active",
    "color": "Red",
    "team": "Miami"
  },
  "2": {
    "fname": "Tim",
    "lname": "Ryan",
    "dob": "01/23/1967",
    "status": "Inactive",
    "color": "Blue",
    "team": "Chicago"
  },
  "3": {
    "fname": "Jim",
    "lname": "Carey",
    "dob": "11/02/1997",
    "status": "Suspended",
    "color": "Yellow",
    "team": "Denver"
  },
  "4": {
    "fname": "Chuck",
    "lname": "Norris",
    "dob": "09/06/1945",
    "status": "Active",
    "color": "Green",
    "team": "Boston"
  }
}

$('#start').on('click', showRecords);

function showRecords() {
  displayData(1,data);
}

function displayData(fnid,data) {
  var template = $('#tableTemplate').html();
  var $table = $(template);
  
  $table.find('tbody').append(
    Object.keys(data[fnid]).map(function(key){
      return '<td>'+ data[fnid][key] +'</td>';
    })
  );
	
  $("#container").empty().append($table);
}
.display {
  width: 500px;
  background-color: red;
}
.display,
.display th,
.display td{
  border: 1px solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" name="start" id="start" value="Start" />
<div id="container"></div>

<script type="text/html" id="tableTemplate">
  <table class="display" id="data_tbl">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>DOB</th>
        <th>Status</th>
        <th>Color</th>
        <th>Team</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</script>
0 голосов
/ 24 апреля 2019

Object.keys (data) .forEach (функция (элемент, ключ) {data [item] .fname});

...