如何在每个表格行的末尾添加按钮?

时间:2019-01-12 14:35:13

标签: javascript html button html-table

我正在尝试在表receitas的每一行的末尾插入一个按钮,但是这些按钮是在表的开始而不是每行的末尾设置的。

function mostraTabelaTeste(aTipo, aLista) {
    tb = '<table>';
    tb += '<tr><th>Tipo</th><th>Nome</th><th>Tempo</th><th>Custo</th><th>Dificuldade</th></tr>';
    for(let i in receitas) {
        if(receitas[i].tipo==aTipo) {
            tb += '<tr><td>' + receitas[i].tipo + '</td><td>' + receitas[i].nome + '</td><td> '+ receitas[i].tempo + '</td><td>' + receitas[i].custo + '</td><td>' + receitas[i].dificuldade + '</td></td><input type="button" id="remove_' + i + '" value="x"</td></tr>';
        }
    }
    tb += '<table>';
    document.getElementById(aLista).innerHTML = tb;
}

我将所有属性放入表格行的行(在for的内部),我有一个输入应设置在该行的末尾,但要转到表的顶部。

enter image description here

2 个答案:

答案 0 :(得分:0)

您可能需要在第一行的按钮列中再添加一个。如下所示:

tb += '<tr><th>Tipo</th><th>Nome</th><th>Tempo</th><th>Custo</th><th>Dificuldade</th><th>&nbsp;</th></tr>';

答案 1 :(得分:0)

这只是包装正在创建的按钮</td>而不是启动<td>的单元格中的类型错误

请参阅以下代码段:

receitas = [
  {tipo:"typ1",nome:"nome1",tempo:"tempo1",custo:"custo1",dificuldade:"dificuldade1"},
  {tipo:"typ2",nome:"nome2",tempo:"tempo2",custo:"custo2",dificuldade:"dificuldade2"},
  {tipo:"typ1",nome:"nome3",tempo:"tempo3",custo:"custo3",dificuldade:"dificuldade3"},
  {tipo:"typ1",nome:"nome4",tempo:"tempo4",custo:"custo4",dificuldade:"dificuldade4"},
]

function mostraTabelaTeste(aTipo, aLista) {
  tb = '<table>';
  tb += '<tr><th>Tipo</th><th>Nome</th><th>Tempo</th><th>Custo</th><th>Dificuldade</th></tr>';
  for (let i in receitas) {
    if (receitas[i].tipo == aTipo) {
      tb += '<tr><td>' + receitas[i].tipo + '</td><td>' + receitas[i].nome + '</td><td> ' + receitas[i].tempo + '</td><td>' + receitas[i].custo + '</td><td>' + receitas[i].dificuldade + '</td><td><input type="button" id="remove_' + i + '" value="x"</td></tr>';

    }
  }
  tb += '<table>';
  document.getElementById(aLista).innerHTML = tb;
}

mostraTabelaTeste("typ1","table");
<div id="table"></div>

相关问题