在另一行之前和之后追加行

Question

<table id="thisTable">
<tr>
<th>ID</th>
<th>Name</th>
</tr>
<tr>
<td><input></td>
<td><input></td>
</tr>
<tr>
<td><input></td>
<td><input></td>
</tr>
<tr>
<td><input></td>
<td><input></td>
</tr>
<tr>
<td><input></td>
<td><input></td>
</tr>
</table>
<button onclick="prePend()">Insert Above</button>
<button onclick="appPend()">Inser Below</button>

单击此表单中的某些文本输入，然后单击按钮Insert Above/Insert Below，将在焦点输入引用的位置创建一个新行。

示例：单击第二行中的输入，然后单击"插入上方"按钮 - 将在第二行上方创建新行。需要示例功能！

Answer 1

试试这个

let currentIndex = $('#thisTable tbody tr').length - 1;
let staticHtml = ' <tr><td><input></td><td><input></td></tr>';
$('#thisTable').on('focus', 'input', function(){
currentIndex = $(this).parent().parent().index() //Row index
});
function prePend() {
changeStructure(currentIndex - 1);
}
function appPend() {
changeStructure(currentIndex);
}
function changeStructure(index) {
$('#thisTable > tbody > tr').eq(index).after(staticHtml);
currentIndex++;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="thisTable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input></td>
<td><input></td>
</tr>
<tr>
<td><input></td>
<td><input></td>
</tr>
<tr>
<td><input></td>
<td><input></td>
</tr>
<tr>
<td><input></td>
<td><input></td>
</tr>
</tbody>
</table>
<button onclick="prePend()">Insert Above</button>
<button onclick="appPend()">Inser Below</button>

Answer 2

使用JQUERY：

参考资料 ： jQuery.closest， jQuery before， jQuery after， jQuery html

var selectedinput;
document.addEventListener("focus",function(event){
if(event.target.tagName.toLowerCase()==="input"){
selectedinput = event.target;
}
},true);
function insert(pos)
{
if(!selectedinput) return;
var tr = $(selectedinput).closest("tr");
pos=='above' ? tr.before(tr.html()) : tr.after(tr.html());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="thisTable">
<tr>
<th>ID</th>
<th>Name</th>
</tr>
<tr>
<td><input></td>
<td><input></td>
</tr>
<tr>
<td><input></td>
<td><input></td>
</tr>
<tr>
<td><input></td>
<td><input></td>
</tr>
<tr>
<td><input></td>
<td><input></td>
</tr>
</table>
<button onclick="insert('above')">Insert Above</button>
<button onclick="insert('below')">Inser Below</button>

使用JAVASCRIPT：

参考资料 ： JS cloneNode， JS insertAdjacentElement

var selectedinput;
document.addEventListener("focus",function(event){
if(event.target.tagName.toLowerCase()==="input"){
selectedinput = event.target;
}
},true);
function insert(pos)
{
if(!selectedinput) return;
var tr = selectedinput.parentElement.parentElement;
var elem = tr.cloneNode(true);
//Clone node not supported in Opera - following can be used
//var elem = document.createElement("tr")†;
//elem.innerHTML=tr.innerHTML
tr.insertAdjacentElement((pos=='above' ? 'beforeBegin':'afterEnd'),elem );
}

<table id="thisTable">
<tr>
<th>ID</th>
<th>Name</th>
</tr>
<tr>
<td><input></td>
<td><input></td>
</tr>
<tr>
<td><input></td>
<td><input></td>
</tr>
<tr>
<td><input></td>
<td><input></td>
</tr>
<tr>
<td><input></td>
<td><input></td>
</tr>
</table>
<button onclick="insert('above')">Insert Above</button>
<button onclick="insert('below')">Inser Below</button>