按钮单击创建新行

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

按钮单击创建新行

回答

相关问题