Erstellen neue Zeile auf die Schaltfläche klicken

Question

I mit einem oder mehreren Reihe eine HTML-Tabelle haben. Ich habe 4 Spalten in meiner Tabelle in diesem ist eine Checkbox. Zwei Buttons gibt es "AddRowAbove" und "AddRowBelow". Wenn ein bestimmtes Kontrollkästchen aktiviert ist und auf eine Schaltfläche geklickt wird, sollte basierend auf dem Namen der Schaltfläche eine neue Zeile hinzugefügt werden. Mein Code sieht so aus, nicht sicher, wie man das Ergebnis erzielt.

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

Ich habe var selectedRow = $("input:checked").parent().parent(); sowohl Ihre Funktionen die übergeordnete Zeile des geprüften Elements zu finden, und dann verwendet, um entweder $(newRow).insertBefore(selectedRow); oder $(newRow).insertAfter(selectedRow); je nach auf der Schaltfläche geklickt.

Hoffentlich hilft das.

UPDATE:

In Reaktion auf die Stellungnahme beantragt, dass die IDs der Zeilen in Ordnung gehalten werden, selbst nachdem Zeilen dynamisch hinzugefügt, habe ich hinzugefügt, um eine SortRowIDs() Funktion, die am Ende der beiden addNewRowAbove() genannt wird und addNewRowBelow().

Diese Funktion packt alle <input type="checkbox"/> Tags in <table id="maintable"></table> und durchläuft sie anschließend mit der Methode .each() von jQuery. Die übergeordnete Zeile jeder Checkbox erhält dann eine ID basierend auf ihrer Reihenfolge in der Tabelle. Ich habe auch ein paar Kommentare in den Code eingefügt, so dass es leichter zu folgen ist.

<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>

Answer 2

können Sie insertBefore verwenden, um neue Zeile über Tasten anhängen (geben id="button" Inhalt Tasten Zeile). Versuchen Sie, mit folgenden Lösung:

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>'); 
 
    newRow.insertBefore('#button'); 
 
} 
 

 
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); 
 
}

<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<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 id="button"><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>  
 
</body> 
 

 
</html>