点击添加表格行按钮

我希望点击按钮上的新行。点击添加表格行按钮

<html> 
<table id="tbl"> 
    <tr> 
     <td><input type="text" name="links" /></td> 
     <td><input type="text" name="keywords" /></td> 
     <td><input type="text" name="violationtype" /></td> 
     <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"/></td>   
    </tr> 
</table> 
<input type="submit" class="button" value="Add another line" onclick="addField(this);" /> 
</html>

的javascript：

window.SomeDeleteRowFunction = function SomeDeleteRowFunction(o) { 
    var p=o.parentNode.parentNode; 
    p.parentNode.removeChild(p); 
}

当我点击第一次提交按钮，整个表插入之后，我点击提交按钮第二次只<tr>是插入现有的表。

来源

2016-03-12 Bhumi Patel

节目，请， javascript代码 –

哪里是'addField'的代码 –

嘿@Bhumi帕特尔你可以请张贴这个 –

试试这个，一类添加到添加行按钮（如：add_another）

$('document').ready(function() { 
 
    $('.add_another').click(function() { 
 
     $("#tbl").append('<tr><td><input type="text" class="txtbox" value="" /> </td><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td></tr>'); 
 
    }); 
 
})

<html> 
 
<head> 
 
    <script src="https://code.jquery.com/jquery-1.12.1.js" integrity="sha256-VuhDpmsr9xiKwvTIHfYWCIQ84US9WqZsLfR4P7qF6O8=" crossorigin="anonymous"></script> 
 
</head> 
 
<table id="tbl"> 
 
    <tr> 
 
     <td><input type="text" name="links" /></td> 
 
     <td><input type="text" name="keywords" /></td> 
 
     <td><input type="text" name="violationtype" /></td> 
 
     <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"/></td>   
 
    </tr> 
 
</table> 
 
<input type="submit" class="button add_another" value="Add another line"/> 
 
</html>

Here is the fiddle

来源

2016-03-12 09:29:40 Sravan

你有没有试过吗？ – Sravan

谢谢，它的工作:) –

如果你觉得它有用，你可以接受我的答案。 – Sravan

没有jQuery的你可以使用这个JS功能

function addField(table){ 

    var tableRef = document.getElementById(table); 
    var newRow = tableRef.insertRow(-1); 

    var newCell = newRow.insertCell(0); 
    var newElem = document.createElement('input'); 
    newElem.setAttribute("name", "links"); 
    newElem.setAttribute("type", "text"); 
    newCell.appendChild(newElem); 

    newCell = newRow.insertCell(1); 
    newElem = document.createElement('input'); 
    newElem.setAttribute("name", "keywords"); 
    newElem.setAttribute("type", "text"); 
    newCell.appendChild(newElem); 

    newCell = newRow.insertCell(2); 
    newElem = document.createElement('input'); 
    newElem.setAttribute("name", "violationtype"); 
    newElem.setAttribute("type", "text"); 
    newCell.appendChild(newElem); 

    newCell = newRow.insertCell(3); 
    newElem = document.createElement('input'); 
    newElem.setAttribute("type", "button"); 
    newElem.setAttribute("value", "Delete Row"); 
    newElem.setAttribute("onclick", 'SomeDeleteRowFunction(this)') 
    newCell.appendChild(newElem); 
}

而你h AVE调用它是这样的：
（不要使用addField(this)，确定其中行应该添加addField(tableID)表的ID）

<html> 
<table id="tbl"> 
    <tr> 
     <td><input type="text" name="links" /></td> 
     <td><input type="text" name="keywords" /></td> 
     <td><input type="text" name="violationtype" /></td> 
     <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"/></td>   
    </tr> 
</table> 
<input type="submit" class="button" value="Add another line" onclick="addField('tbl');" />

这里是小提琴：https://jsfiddle.net/s5jx0ftg/

来源

2016-03-12 09:45:44

点击添加表格行按钮

回答

相关问题