Ny rad med <input> fält.

CalippoMedlem sedan aug. 2002536 inlägg

1 nov. 2006 08:41#1

Skulle behöva ett skript som gör så att man får en ny rad med nya <input> fält.

Ex:

med ett knapp ska en ny rad skapas så att det blir:

Det vore bra om det dök upp en radera rad knapp till höger om varje rad också.

Jag hittade en sida på nätet, men jag får den inte att fungera när jag lägger in en <form>-tagg plus att fältnamnen tydligen får samma namn.

<script>
function addRow(aTable) {
 aRow = aTable.insertRow(aTable.rows.length);
 numCells=5
 var col_dir = ['<input type="button" value="Del" onClick="delete_this_row(this)" class="btn-submit3">',
 '<input type="text" name="dirFax">',
 '<input type="text" name="dirEmail">',
 '<input type="text" name="dirPhone">',
 '<input type="text" name="dirName">']

 aCell = aRow.insertCell(0);
 aCell.innerHTML='<input type="button" id="delRow" onClick="delRow(this)" value="delete">'
 for (i=1;i<numCells;i++){
  aCell = aRow.insertCell(i);
  aCell.innerHTML= col_dir[i]
 }

}

function delRow(row) {
row.parentNode.parentNode.parentNode.deleteRow(row.parentNode.parentNode.rowIndex);
}
</script>

<body>

<table id="myTable" name="myTable" border="1" width="200">
<tbody id="myTableTBody" name="myTableTBody">
  <tr>
    <td>&nbsp;</td>
    <td>Name</td>
    <td>Phone</td>
    <td>Email</td>
    <td>Fax</td>
  </tr>
  <tr>
    <td width="67"><input type="button" id="delRow" onClick="delRow(this)" value="delete"></td>
    <td><input type="text" name="dirName"></td>
    <td><input type="text" name="dirPhone"></td>
    <td><input type="text" name="dirEmail"></td>
    <td><input type="text" name="dirFax"></td>
  </tr>
  <tr>
    <td width="67"><input type="button" id="delRow" onClick="delRow(this)" value="delete"></td>
    <td><input type="text" name="dirName"></td>
    <td><input type="text" name="dirPhone"></td>
    <td><input type="text" name="dirEmail"></td>
    <td><input type="text" name="dirFax"></td>
  </tr>
  <tr>
    <td width="67"><input type="button" id="delRow" onClick="delRow(this)" value="delete"></td>
    <td><input type="text" name="dirName"></td>
    <td><input type="text" name="dirPhone"></td>
    <td><input type="text" name="dirEmail"></td>
    <td><input type="text" name="dirFax"></td>
  </tr>
</tbody>
</table>

<p><input type="button" id="addRow" onClick="addRow(document.getElementById('myTable'))" value=" add row"> </p>

</body>

CalippoMedlem sedan aug. 2002536 inlägg

1 nov. 2006 09:02#2

Hittade detta som verkar fungera:

addRow.asp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Insert/Delete Table Row using DOM</title> 
<script language="javascript"> 
var gRowId = 2; 

function delRow(button) 
{ 
var row = button.parentNode.parentNode; 
var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0]; 
tbody.removeChild(row); 
} 

function addRow() 
{ 
var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0]; 

var row = document.createElement('TR'); 

var cell1 = document.createElement('TD'); 
var cell2 = document.createElement('TD'); 
var cell3 = document.createElement('TD'); 

var inp1 =  document.createElement('INPUT'); 
var inp2 = document.createElement('INPUT'); 

inp1.setAttribute('type','text'); 
inp1.setAttribute('name','usertxt'); 
//inp1.setAttribute('value','New row'); 
inp1.setAttribute('value','name'+gRowId);
inp2.setAttribute('type','button'); 
inp2.setAttribute('value','Delete'); 
inp2.onclick=function(){delRow(this);} 

cell1.innerHTML = gRowId; 
cell2.appendChild(inp1); 
cell3.appendChild(inp2); 

row.appendChild(cell1); 
row.appendChild(cell2); 
row.appendChild(cell3); 

tbody.appendChild(row); 

gRowId++; 
} 
</script> 

</head> 
<body> 
<form name="myform" method="post" action="addRow2.asp"> 
<table id="table1"> 
<tbody> 
<tr> 
<th>ID</th><th>Data</th><th>Action</th> 
</tr> 
<tr> 
<td>1</td> 
<td><input name="usertxt" type=text value="Original Row"></td> 
<td><input type="button" value="Delete" onClick="delRow(this);" /></td> 
</tr> 
</tbody> 
</table> 
<input type="button" value="Insert Row" onClick="addRow();"> 
<input type="submit" name="submit" value="Submit"> 
</form> 
</body> 
</html>

addRow2.asp

<%@ Language=VBScript %> 
<%Option Explicit 

Dim strUserTxt, iInputs, iLoop 

iInputs = Request.Form("usertxt").Count 

For iLoop = 1 To iInputs 
   Response.Write Request.Form("usertxt")(iLoop) & "<br />" 
Next 
%>