how to add row dynamically in html using javascript
I have a task where I need to add a table row dynamically in HTML where each row has 2 textboxes and the last element is a hyperlink. However, when I add a row the last element hyperlink should be replace by an <input> tag. How this can be done? I
I'm able to add a row but I'm unable to change the last element to <input> tag, here is my code:
HTML file
<html>
<head>
<title>Add row</title>
<script language=javascript type=text/javascript src="multiplerows.js"></script>
</head>
<body>
<table id="CPTbl">
<tr>
<td>
<input type="text" name="cpName" value="">
</td>
<td>
<input type="text" name="cpName1" value="">
</td>
<td>
<a href="samle.htm" View Image</a>
</td>
</tr>
<tr>
<td>
<input type="button" value="AddRow" name="AddRowData" onClick="add('CPTbl',1)">
<input type="button" value="Delete Row" name="DeleteAgencyCp" onClick="remove('CPTbl',1);">
</td>
</tr>
</table>
</form></body></html>
My script is as below
function add(TableId,replicaterow){
var oMyTable = document.getElementById(TableId);
var oNewRow;
if (oMyTable.rows[replicaterow].style.display=="none"){
if(oMyTable.rows.length==(replicaterow+1)){
oMyTable.rows[replicaterow].style.display="";
}else{
oNewRow = o开发者_开发知识库MyTable.rows[replicaterow].cloneNode(true);
oNewRow.style.display=""
ReInitRow(oNewRow,oMyTable.rows.length);
oMyTable.tBodies[0].appendChild(oNewRow);
}
}else{
oNewRow = oMyTable.rows[replicaterow].cloneNode(true);
ReInitRow(oNewRow,oMyTable.rows.length);
oMyTable.tBodies[0].appendChild(oNewRow);
}
}
function ReInitRow(oNewRow,rowlength){
var flg=true;
if (! oNewRow){return;}
for (var i = 0 ; i < oNewRow.childNodes.length ; i++){
if((oNewRow.childNodes[i].tagName == "INPUT") ||
(oNewRow.childNodes[i].tagName == "SELECT") ||
(oNewRow.childNodes[i].tagName == "TEXTAREA") ||
(oNewRow.childNodes[i].tagName == "textarea"))
{
oNewRow.childNodes[i].name = oNewRow.childNodes[i].name;
if((oNewRow.childNodes[i].tagName == "INPUT") &&
(oNewRow.childNodes[i].type == "text") ||
(oNewRow.childNodes[i].tagName == "TEXTAREA"))
{
oNewRow.childNodes[i].value = "";
}
if(oNewRow.childNodes[i].tagName == "SELECT" && !oNewRow.childNodes[i].multiple ){
oNewRow.childNodes[i].selectedIndex=0;
}
if(oNewRow.childNodes[i].id == "resetList")
{
oNewRow.childNodes[i].options.length=0;
}
if((oNewRow.childNodes[i].type=="hidden")){
flg=false;
oNewRow.childNodes[i].value="0";
}
}
ReInitRow(oNewRow.childNodes[i],rowlength);
}
}
How can I replace the third table data (<a href="samle.htm" View Image</a>) with <input type="file" name="photo" value="">?
Thanks in advance.
this is a rather blunt way to approach it, but you don't have id's for anything that would help.
...
if (!oNewRow) { return; }
if (oNewRow.tagName == 'TD') {
var anchors = oNewRow.getElementsByTagName('a');
if (anchors.length > 0) {
// found your hyperlink
oNewRow.removeChild(anchors[0]); // assuming there's only the one link
var fi = document.createElement('input');
fi.type = 'file';
fi.name = 'photo';
oNewRow.appendChild(fi);
}
}
for (var i = 0; i < oNewRow.childNodes.length; i++) {
...
also your code is set up to clone the button row. the row with the inputs and the hyperlink is row 0, not row 1, at least in IE. you might look for a more reliable way of obtaining row references in your code.
@Apache - type in your original HTML code:
<a href="samle.htm" View Image</a>
Should be:
<a href="samle.htm">View Image</a>
加载中,请稍侯......
精彩评论