Question

我有3个JavaScript对象，每个对象包含一个列数据（它有8个条目）。我想将此数据添加到html表中。我可以使用第n个子项来检索列数据，但不能插入。

代码段：

countNovels = {
             Ramesh: 5,
             Kumar: 10,
             Sameera: 15,
         }
countTales = {
             Ramesh: 2,
             Kumar: 6,
             Sameera: 8,
}

<table id="Summary" cellspacing="0">
                    <tr>
                        <th >Name</th>
                        <th >No. of Novels</th>
                        <th >No. of Fairytales</th>  
                        <th >Total</th>
               </tr>
                    <tbody></tbody>

                </table>

var col = "<td style=\"max-width : 40px\">" + countNovels.Ramesh + "</td><td style=\"max-width : 40px\">" + countNovels.Kumar + "</td><td style=\"max-width : 40px\">" + countNovels.Sameera + "</td>";
$('#Summary td:nth-child(1)').text(col);

这不是实际的代码。我想要这样的输出

请帮忙。

Answer 1

在页面加载时，抓住两个迭代对象，并将行添加到表的最后。

window.onload = function() {
  const countNovels = {
    Ramesh: 5,
    Kumar: 10,
    Sameera: 15,
  };
  const countTales = {
    Ramesh: 2,
    Kumar: 6,
    Sameera: 8,
  };

  function renderTable() {
    const tableRows = Object.entries(countNovels).reduce((acc, curr, index) => {
      const name = (curr[0] || '');
      const novels = curr[1];
      const tales = countTales[curr[0]];
      const total = novels + tales;
      acc.push({
        name,
        novels,
        tales,
        total
      });
      return acc;
    }, []);

    const tableBody = document.querySelector('#Summary');

    for (const tableRow of tableRows) {
      let newRow = tableBody.insertRow(-1);
      Object.values(tableRow).forEach((curr, index) => {
        let newCell = newRow.insertCell(index);
        let newText = document.createTextNode(curr);
        newCell.appendChild(newText);
      });
    }
  }

  renderTable();
};

table,
th,
td {
  border: 1px solid black;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <table id="Summary">
    <tr>
      <th>Name</th>
      <th>No. of Novels</th>
      <th>No. of Fairytales</th>
      <th>Total</th>
    </tr>
    <tbody></tbody>
  </table>

</body>

</html>

Answer 2

这是一个很好的问题：）

我创建的代码段可与任意数量的源对象一起使用（因此，末尾可以有任意数量的列）。

转换功能并不理想-它可以生成更好的返回格式（因此HTML模板生成会更简单）。

const countNovels = {
  Ramesh: 5,
  Kumar: 10,
  Sameera: 15,
}
const countTales = {
  Ramesh: 2,
  Kumar: 6,
  Sameera: 8,
}

// transformation function
const transformObject = (arr) => {
  const r = arr.reduce((acc, c) => {
    // key - countNovels, countTales
    // obj - the source object content
    // k1 - the name of the person
    // v1 - the value of key-name (e.g. countTales-Ramesh = 2)
    const [
      [key, obj]
    ] = Object.entries(c)
    Object.entries(obj).forEach(([k1, v1]) => {
      if (typeof acc[k1] === 'undefined') acc[k1] = {}
      acc[k1][key] = v1
    })
    return acc
  }, {})
  return r
}

// running transformation with two objects
const transformed = transformObject([{
    countNovels
  },
  {
    countTales
  }
])

// just a utility function
const wrapTd = (item) => {
  return `<td>${item}</td>`
}

// creating the HTML template
const addToTable = (obj) => {
  let html = ''
  for (key in obj) {
    const total = Object.values(obj[key]).reduce((a, c) => a + c, 0)

    // creating the columns for the numbers (including total)
    let values = ''
    Object.values(obj[key]).forEach(e => {
      values += wrapTd(e)
    })
    values += wrapTd(total)

    // adding name and numbers to rows
    const template = `
     <tr>
      ${wrapTd(key)}
      ${values}
     </tr>
    `
    html += template
  }
  return html
}

// adding HTML string to DOM
document.getElementById('tablebody').innerHTML = addToTable(transformed)

<table id="Summary" cellspacing="0">
  <tr>
    <th>Name</th>
    <th>No. of Novels</th>
    <th>No. of Fairytales</th>
    <th>Total</th>
  </tr>
  <tbody id="tablebody"></tbody>

</table>

jQuery：我想将数据明智地添加到简单的html表列中

2 个答案: