javascript - 单击按钮创建新行

Question

我有一个包含一行或多行的 html 表格。我的表中有 4 列，其中一列是复选框。有两个按钮“AddRowAbove”和“AddRowBelow”。当选中特定复选框并单击按钮时，应根据按钮名称添加新行。我的代码看起来像这样，不确定如何实现结果。

function addNewRowAbove() {

  alert("actioned !!!");
  var rowNumber = document.getElementById("rowIndex").value;
  var rowNumberNew = parseInt(rowNumber) - 1;
  alert(rowNumber + " - " + rowNumberNew);
  var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
  newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '"></input><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"></input></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
  $('#maintable tbody').append(newRow);
}

function addNewRowBelow() {

  alert("actioned !!!");
  var rowNumber = document.getElementById("rowIndex").value;
  var rowNumberNew = parseInt(rowNumber) + 1;
  alert(rowNumber + " - " + rowNumberNew);
  var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
  newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '"></input><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"></input></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
  $('#maintable tbody').append(newRow);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <table id="maintable" width="50%" cellpadding="0" cellspacing="0" border="#729111 1px solid">
    <tr>
      <th align="center">Select</th>
      <th align="center">Employee ID</th>
      <th align="center">First Name</th>
      <th align="center">Last Name</th>
    </tr>
    <tr>
      <td><input type="checkbox" name="radio" id="radio"></input><input type="hidden" id="rowIndex" value="1" /></td>
      <td><input type="text" name="empid"></input>
      </td>
      <td><input type="text" name="empfname"></input>
      </td>
      <td><input type="text" name="emplname"></input>
      </td>
    </tr>
    <tr>
      <td><input type="checkbox" name="radio1" id="radio1"></input><input type="hidden" id="rowIndex" value="2" /></td>
      <td><input type="text" name="empid1"></input>
      </td>
      <td><input type="text" name="empfname1"></input>
      </td>
      <td><input type="text" name="emplname1"></input>
      </td>
    </tr>
    <tr>
      <td></td>
      <td> <input type="submit" name="AddRowAbove" value="AddRowAbove" onclick="addNewRowAbove()"></td>
      <td> <input type="submit" name="AddRowBelow" value="AddRowBelow" onclick="addNewRowBelow()"></td>
      <td></td>
    </tr>
  </table>
</form>

Answer 1

我添加了var selectedRow = $( "input:checked" ).parent().parent();到您的两个函数来查找已检查元素的父行，然后使用 $(newRow).insertBefore(selectedRow);或$(newRow).insertAfter(selectedRow);取决于单击的按钮。

希望这有帮助。

更新:

为了响应请求即使在动态添加行后仍保持行 ID 顺序的评论，我添加了 SortRowIDs()在 addNewRowAbove() 末尾调用的函数和addNewRowBelow() .

此函数获取所有 <input type="checkbox"/> <table id="maintable"></table> 中的标签然后使用 jQuery 的 .each() 迭代它们方法。然后根据其在表中的顺序为每个复选框的父行分配一个 ID。我还在代码中添加了一些注释，以便更容易理解。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

  function SortRowIDs() {
  
    // The code below finds all the <tr> elements in the table WITH checkboxes in them.
    // This way, we skip the first row containing column headers and the last row containing buttons
    
    // We use the jQuery .each() method to iterate through jQuery-object arrays 
    $('#maintable').find('tr > td > input[type="checkbox"]').each(function(index) {
      
      // We assign the parent row of the current checkbox to the variable 'currentRow'
      let currentRow = $(this).parent().parent();
      
      // Here we give the current row an id based on its position in the table
      $(currentRow).attr('id', 'id_' + (index + 1));
      
      // Prints the id's of each row
      console.log('Current row\'s id: ' + $(currentRow).attr('id'));
      
    });
    
    // This prints the id attribute of the selected checkbox's parent row, to show that 
    // the Id's were successfully assigned by the SortRowIDs() function
    console.log('');
    console.log('Selected row\'s id: ' + $( "input:checked" ).parent().parent().attr('id'));
    
  }

  function addNewRowAbove() {
    
    var rowNumber = document.getElementById("rowIndex").value;
    var rowNumberNew = parseInt(rowNumber) - 1;
    
    var newRow = $('<tr/>');
    
    newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '" /><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"/></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
    
    var selectedRow = $( "input:checked" ).parent().parent();
    
    $(newRow).insertBefore(selectedRow);
    
    SortRowIDs();
  }

  function addNewRowBelow() {

    var rowNumber = document.getElementById("rowIndex").value;
    var rowNumberNew = parseInt(rowNumber) + 1;
    
    var newRow = $('<tr/>');
    
    newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '"></input><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"></input></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
    
    var selectedRow = $( "input:checked" ).parent().parent();
    
    $(newRow).insertAfter(selectedRow);
    
    SortRowIDs();
  }
</script>

<form>
  <table id="maintable" width="50%" cellpadding="0" cellspacing="0" border="#729111 1px solid">
    <tr>
      <th align="center">Select</th>
      <th align="center">Employee ID</th>
      <th align="center">First Name</th>
      <th align="center">Last Name</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="radio" id="radio"/>
        <input type="hidden" id="rowIndex" value="1" />
      </td>
      <td>
        <input type="text" name="empid" />
      </td>
      <td>
        <input type="text" name="empfname" />
      </td>
      <td>
        <input type="text" name="emplname" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="radio1" id="radio1" />
        <input type="hidden" id="rowIndex" value="2" />
      </td>
      <td>
        <input type="text" name="empid1" />
      </td>
      <td>
        <input type="text" name="empfname1" />
      </td>
      <td>
        <input type="text" name="emplname1" />
      </td>
    </tr>
    <tr>
      <td></td>
      <td> 
        <input type="submit" name="AddRowAbove" value="AddRowAbove" onclick="addNewRowAbove()">
      </td>
      <td> 
        <input type="submit" name="AddRowBelow" value="AddRowBelow" onclick="addNewRowBelow()">
      </td>
      <td></td>
    </tr>
  </table>
</form>