Добавление рядов и колон в таблицу JavaScript

144

18 декабря 2018, 13:20

Задача состоит в том, чтобы при нажатии кнопки add создавался ряд и 4 колонки , и записывать туда данные из переменных. Вот что имеется на данный момент.

var name; 
var age; 
var weekend; 
var workday; 
var table = document.getElementById("myTable"); 
var peopleAmount = prompt("Сколько людей вы хотите проанализировать?"); 
peopleAmount = parseInt(peopleAmount); 
 
function dataToTable() { 
  for (var i = 0; name !== null && i < peopleAmount; i++) { 
    name = prompt('Имя человека? Если хотите закончить нажмите "Отмена"'); 
    age = prompt('Сколько лет человеку? '); 
    age = parseInt(age); 
    weekend = age * 116; 
    workday = age * 275; 
    if (name === null) { 
      i += 1000; 
    } 
  } 
  return name; 
  return age; 
  return weekend; 
  return workday; 
} 
 
function addTable() { 
  var table = document.getElementById('myTable'); 
  var tr = document.createElement('tr') * 4; 
  var td = document.createElement('td') * 4; 
  table.appendChild(tr); 
  tr.appendChild(td); 
}

<table border="1" id="myTable"> 
  <tr> 
    <th class="nameTitle">Name</th> 
    <th class="ageTitle">Age</th> 
    <th class="workdaysTitle">Workdays</th> 
    <th class="weekendTitle">Weekends</th> 
  </tr> 
</table> 
<input type="button" value="add" onclick="addTable();">

Answer 1

Для начала вам нужно знать, что после вызова return выполнение функции прекращается. Поэтому каскад

return name;
return age;
return weekend;
return workday;

бессмысленен. Если вы хотите вернуть из функции несколько значений, то для этого нужно использовать какие-нибудь контейнеры: массивы или объекты.

Далее, попытка создать четыре объекта одним махом

var td = document.createElement('td') * 4;

конечно похвальна. Но в JS умножать можно только числа. А для размножения объектов люди используют циклы

function dataToTable() { 
  var peopleAmount = prompt("Сколько людей вы хотите проанализировать?"); 
  peopleAmount = parseInt(peopleAmount); 
  var res = []; 
  for (var i = 0; i < peopleAmount; i++) { 
    var name = prompt('Имя человека? Если хотите закончить нажмите "Отмена"'); 
    if (name === null) 
      break; 
    var age = prompt('Сколько лет человеку? '); 
    age = parseInt(age); 
    res.push({ 
      name: name, 
      age: age, 
      weekend: age * 116, 
      workday: age * 275 
    }); 
  } 
  return res; 
} 
 
function addTable() { 
  var table = document.getElementById('myTable'); 
  var data = dataToTable(); 
  for (var i = 0; i < data.length; i++) { 
    var tr = document.createElement('tr'); 
    table.appendChild(tr); 
    for (var fld in data[i]) { 
      var td = document.createElement('td'); 
      tr.appendChild(td); 
      td.innerText = data[i][fld]; 
    } 
  } 
}

<table border="1" id="myTable"> 
  <tr> 
    <th class="nameTitle">Name</th> 
    <th class="ageTitle">Age</th> 
    <th class="workdaysTitle">Workdays</th> 
    <th class="weekendTitle">Weekends</th> 
  </tr> 
</table> 
<input type="button" value="add" onclick="addTable();">