Question

我希望使函数能够通过单击felt将数组中的所有信息写入button。我在做什么错了，我该怎么做：

var search = document.getElementById("search");
var felt = document.getElementById("felt");
var button = document.getElementById("button");

var personer = [{
  name: "Ole",
  age: 22,
  intrests: ["Swim", "Game"]
}, {
  name: "Jakob",
  age: 30,
  intrests: ["Dance", "Game", "Eat"]
}];

function ppl(x, f) {
  f.innerHTML = ``;
  for (var i = 0; i < x.length; i++) {
    f.innerHTML += `<table border="1px"><tr id="t${(3*i)+1}"><td>Name</td></tr><tr id="t${(3*i)+2}"><td>Age</td></tr><tr id="t${(3*i)+3}"><td>Intrests</td></tr></table>`;
    var table = document.getElementById(`t${(3*i)+1}`);
    var table2 = document.getElementById(`t${(3*i)+2}`);
    var table3 = document.getElementById(`t${(3*i)+3}`);
    var storeFor = i;
    for (var y = 0; y < x[i].name.lenght; y++) {
      table += `<th>${x[storeFor].name[y]}</th>`;
    }
    for (var j = 0; j < x[i].age.lenght; j++) {
      table2 += `<td>${x[storeFor].age[j]}</td>`;
    }
    for (var o = 0; o < x[i].intrests.lenght; o++) {
      table3 += `<td>${x[storeFor].intrests[o]}</td>`;
    }
    f.innerHTML += `<br><br><br><br>`;
  }
}

button.onclick = function() {
  var sValue = search.value;
  if (20 <= sValue && sValue <= 25) {
    ppl(personer, felt);
  } else {
    felt.innerHTML = ``;
  }
}

<form>
  <input type="text" id="search">
  <input type="button" id="button" value="Search">
</form>
<div id="felt">

</div>

Answer 1

您需要使用innerHTML而不是向表中添加文本字符串。这是因为表变量包含DOM元素，并且不能像这样附加模板文字。

 df_input.iloc[1:2,:].reindex(df_input.index).fillna(0).astype(int)

小提琴供您参考：http://jsfiddle.net/69vcp1k7/

Answer 2

在您的代码中，您不需要这些循环：

for (var y = 0; y < x[i].name.lenght; y++) {
      table += `<th>${x[storeFor].name[y]}</th>`;
    }
    for (var j = 0; j < x[i].age.lenght; j++) {
      table2 += `<td>${x[storeFor].age[j]}</td>`;
    }
    for (var o = 0; o < x[i].intrests.lenght; o++) {
      table3 += `<td>${x[storeFor].intrests[o]}</td>`;
    }

您需要.innerHtml tho

var table = document.getElementById(`t${(3*i)+1}`);
    var table2 = document.getElementById(`t${(3*i)+2}`);
    var table3 = document.getElementById(`t${(3*i)+3}`);
    var storeFor = i;
    table.innerHTML += `<th>${x[storeFor].name}</th>`;
    table2.innerHTML += `<td>${x[storeFor].age}</td>`;
    table3.innerHTML += `<td>${x[storeFor].intrests}</td>`;

var search = document.getElementById("search");
var felt = document.getElementById("felt");
var button = document.getElementById("button");

var personer = [{
  name: "Ole",
  age: 22,
  intrests: ["Swim", "Game"]
}, {
  name: "Jakob",
  age: 30,
  intrests: ["Dance", "Game", "Eat"]
}];

function ppl(x, f) {
  f.innerHTML = ``;
  for (var i = 0; i < x.length; i++) {
    f.innerHTML += `<table border="1px"><tr id="t${(3*i)+1}"><td>Name</td></tr><tr id="t${(3*i)+2}"><td>Age</td></tr><tr id="t${(3*i)+3}"><td>Intrests</td></tr></table>`;
    var table = document.getElementById(`t${(3*i)+1}`);
    var table2 = document.getElementById(`t${(3*i)+2}`);
    var table3 = document.getElementById(`t${(3*i)+3}`);

    table.innerHTML += `<th>${x[i].name}</th>`;
    table2.innerHTML += `<td>${x[i].age}</td>`;
    table3.innerHTML += `<td>${x[i].intrests}</td>`;
    f.innerHTML += `<br><br><br><br>`;
  }
}

button.onclick = function() {
  var sValue = search.value;
  if (20 <= sValue && sValue <= 25) {
    ppl(personer, felt);
  } else {
    felt.innerHTML = ``;
  }
}

<form>
  <input type="text" id="search">
  <input type="button" id="button" value="Search">
</form>
<div id="felt">

</div>

Answer 3

请考虑以下解决方案

const personer = [
    {
        name: 'Ole',
        age: 22,
        intrests: ['Swim', 'Game']
    }, {
        name: 'Jakob',
        age: 30,
        intrests: ['Dance', 'Game', 'Eat']
    }
];

const button = document.querySelector('#button');
const felt = document.querySelector('#felt');

button.addEventListener('click', handleClick);

function handleClick(event) {
    const search = parseInt(document.querySelector('#search').value, 10);

    if (search >= 20 && search <= 25) {
        renderTable();

        return;
    }

    felt.innerHTML = '';
}

function renderTable() {
    const tables = personer.map(personerToTable).join('');

    felt.innerHTML = tables;
}

function personerToTable(personer) {
    return `
        <table>
            <tr>
                <td>Name</td>
                <td>${personer.name}</td>
            </tr>
            <tr>
                <td>Age</td>
                <td>${personer.age}</td>
            </tr>
            <tr>
                <td>Interests</td>
                <td>${personer.intrests.join(', ')}</td>
            </tr>
        </table>`;
}

table {
    border: 1px solid #DDD;
    margin-bottom: 10px;
}

table td {
    border: 1px solid #DDD;
}

<input type="text" id="search">
<button id="button">Search</button>

<div id="felt"></div>

如何使用javascript制作表格并向其中添加表格单元格？

3 个答案: