我可以在insertRow()函数中加上<input />标记吗?不仅是文字

时间:2018-03-24 15:09:41

标签: javascript html function

我想使用insertRow()函数在我的表中添加行。但是我可以插入包含<input>标记的行吗?因为我的表看起来像这样

<table><thead>
  <tr>
    <th>No Account</th> 
    <th>Deskripsi</th>
    <th>Debit</th>
    <th>Credit</th>
    <th>Job</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td><input class="input-td" type="text" placeholder="No Account">  
    </td>
    <td><input class="input-td" type="text" placeholder="-"></td>
    <td><input class="input-td" type="text" placeholder="-"></td>
    <td><input class="input-td" type="text" placeholder="0"></td>
    <td><input class="input-td" type="text" placeholder="0"></td>
  </tr></thead>
</table>

<a href="#" onclick="myCreateFunction()" name="add_row" class="btn btn-info"><i class="fa fa-plus"></i>&nbsp Add row</a>

到目前为止,我只能找到这个javascript代码的例子

function myCreateFunction() {
    var table = document.getElementById("bootstrap-data-table");
    var row = table.insertRow(3);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    cell1.innerHTML = "0";
    cell2.innerHTML = "0";
    cell3.innerHTML = "0";
    cell4.innerHTML = "0";
    cell.innerHTML = "0";
}
我可以改变&#34; 0&#34;哪个只是前一行输入标签的文字?

1 个答案:

答案 0 :(得分:0)

您只需指定一个HTML字符串:

cell1.innerHTML = `<input class="input-td" type="text" placeholder="No Account">`;

其他选项包括通过document.createElement等创建DOM。

const input1 = document.createElement("input");
input1.classList.add("input-td");
input1.type = "text";
input1.placeholder = "No Account";
cell1.appendChild(input1);