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

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>