按鈕單擊創建新行

我有一個或多個行的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>

來源

2017-03-02 JAVA_CAT

首先，'id'是獨一無二的，所以你不應該使用相同的'id'爲'ID = 「的rowIndex」'設置不同的元素。其次，你的餐桌沒有''。請加上它。 –

上面和下面有什麼參考？用戶點擊的複選框？ – Dherya

@MrNeo我不知道如何獲得每一行的行號。請建議一個最好的方法。 –

我添加var selectedRow = $("input:checked").parent().parent();到您的兩個功能找到檢查元素的父行，然後使用，也可以$(newRow).insertBefore(selectedRow);或$(newRow).insertAfter(selectedRow);根據按鈕點擊。

希望這會有所幫助。

UPDATE：

在迴應評論請求甚至是動態添加行之後，該行的ID是保留在順序，我添加了一個SortRowIDs()功能被稱爲在兩個addNewRowAbove()和結束addNewRowBelow()。

該函數抓取<table id="maintable"></table>中的所有<input type="checkbox"/>標記，然後使用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>

來源

2017-03-02 10:03:38 BFG

我剛剛複製了這段代碼，它只是在點擊時閃爍。但是，當我運行代碼時，它的工作原理！ –

嗯..你準確複製了我的HTML嗎？我改變了一些你的代碼（即看看我的標籤與你的標籤），所以也許你的一些與這個表單無關的代碼是無效的？你是否收到任何控制檯錯誤？ – BFG

是的，我複製了相同的內容，並且控制檯中沒有錯誤。下面是從控制檯複製的消息。 HTML1300：導航發生。 File：AddNewRowsIn.html HTML1527：DOCTYPE預計。考慮添加一個有效的HTML5文檔類型：「<！DOCTYPE html>」。文件：AddNewRowsIn.html，行：1，列：1 DOM7011：此頁面上的代碼禁用後退和前進緩存。有關詳細信息，請參閱：http://go.microsoft.com/fwlink/?LinkID=291337 File：AddNewRowsIn.html –

您可以使用insertBefore追加上面的扣子（給id="button"划船內容按鈕）新行。試試下面的解決方案：

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>

來源

2017-03-02 09:47:21

按鈕單擊創建新行

回答

相關問題