添加可在HTML中寫入的行

Question

我製作了一個可以添加行的表格。但我希望該行是可寫的。當用戶點擊addRow時，會出現一個新行，用戶可以在其上輸入文本。有人可以幫我做嗎？非常感謝。

代碼是在jsFiddle中。 jsFiddle

Answer 1

試試這個

Check here

function addRow() { 

    $('#addmore').append('<tr><td><input type="text" value="1"></td><td><input type="text" value="2"></td></tr><tr><td>&nbsp;</td></tr>') 


}; 

Answer 2

$(document).on('click', '#add', function() { 
 
    var row = '<tr><td><input type="text" /></td></tr>'; 
 
    $(this).closest('table').append(row); 
 
})

td { 
 
    border: 1px solid #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td id="add">add row </td> 
 
    </tr> 
 
</table>

Answer 3

嘗試使用這樣的：

function addRow() { 
 
    "use strict"; 
 

 
    var table = document.getElementById("tbl1"); 
 
    
 
    var row=table.insertRow(table.rows.length); 
 
    console.log(row); 
 
    var td1=row.insertCell(0); 
 
    var td11 = document.createElement("span"); 
 
    td1.appendChild(td11); 
 

 
    var td2=row.insertCell(1);; 
 
    var td22 = document.createElement("input"); 
 
    td22.type = "text"; 
 
    td2.appendChild(td22); 
 
    td11.innerHTML = document.getElementById("a").innerHTML; 
 
    td2.value = document.getElementById("b").innerHTML; 
 

 
    row.appendChild(td1); 
 
    row.appendChild(td2); 
 

 
    table.children[0].appendChild(row); 
 
}

<input type="button" onclick="addRow()" value="Add Row"/> 
 

 
<TABLE id="tbl1"> 
 
\t \t \t \t \t <TR> 
 
\t \t \t \t \t \t <TH></TH> 
 
\t \t \t \t \t \t <TH id="a">Principal Name</TH> 
 
\t \t \t \t \t \t <TH id="b">Principal Titles</TH> 
 
\t \t \t \t \t </TR> 
 
\t \t \t \t \t <TR> 
 
\t \t \t \t \t \t <TD></TD> 
 
\t \t \t \t \t \t <TD>Director Of Manager</TD> 
 
\t \t \t \t \t </TR> 
 
\t \t \t \t \t <TR> 
 
\t \t \t \t \t \t <TD></TD> 
 
\t \t \t \t \t \t <TD>President</TD> 
 
\t \t \t \t \t </TR> 
 
\t \t \t \t \t <TR> 
 
\t \t \t \t \t \t <TD></TD> 
 
\t \t \t \t \t \t <TD>Treasurer</TD> 
 
\t \t \t \t \t </TR> 
 

 
\t \t \t \t </TABLE>

Answer 4

這裏是的jsfiddle解決

http://jsfiddle.net/96oqxz9z/

所有你需要補充的是一個簡單的一行：

$('#tbl1').append("<TR><TD></TD><TD><input type=\"text\"></TD></TR>");