---
title: "Ny rad med <input> fält."
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/153251-ny-rad-med-input-fält"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Calippo"
published: "2006-11-01T08:41:48.000Z"
updated: "2006-11-01T09:02:18.000Z"
replies: 1
views: 264
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/153251-ny-rad-med-input-fält"
---

# Ny rad med <input> fält.

## #1 — Calippo, 2006-11-01T08:41Z

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

Ex:

\<input type="text" name="strFirstName1"\>\<input type="text" name="strLastname1"\>

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

\<input type="text" name="strFirstName1"\>\<input type="text" name="strLastname1"\>\<br\>
\<input type="text" name="strFirstName2"\>\<input type="text" name="strLastname2"\>

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>
```

Permalänk: https://www.webforum.nu/p/153251

## #2 — Calippo, 2006-11-01T09:02Z

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 
%>
```

Permalänk: https://www.webforum.nu/p/1891979

---

Tråden på webben: https://www.webforum.nu/amne/javascript/153251-ny-rad-med-input-fält
