✔ Erweiterung eines vorhandenen Scrips

Q

QUEST08

Erfahrenes Mitglied
Hallo liebe JSler,

ich habe ein Script, in welchem bei klick ein weiteres Input-Feld erstellt wird. Hierfür benötige ich eine Erweiterung. Ersteinmal der vorhandene Code:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
<!--
var i = 1;

function NeuesFeld()
{
	var row = document.getElementById('formtable').insertRow(i);
	var cell_1 = row.insertCell(0);
	var cell_2 = row.insertCell(1);

	var text = document.createTextNode('Link ' + (i + 1));
	cell_1.appendChild(text);

	var input = document.createElement('input');
	input.type = 'text';
	input.name = 'link[]';
	input.size = 60;
	input.maxlength = 150;

	cell_2.appendChild(input);

	i++;
}
//-->
</script>

</head>
<body>

<form name="posting" action="save.php" method="post">
	<table id="formtable" border="1" cellspacing="0" cellpadding="0" width="100%">
		<tr>
			<td>Link 1</td>
			<td><input name="link[]" type="text" size="60" maxlength="150" /></td>
		</tr>
		<tr>
			<td colspan="2"><input type="button" onclick="NeuesFeld();" value="Feld hinzufügen" /></td>
		</tr>
	</table>
</form>

</body>
</html>

Nun möchte ich neben das erste Input-Feld ein weiteres einfügen. Es sollen also je Zeile 2 Input-Felder ausgegeben werden. Außerdem möchte ich dem Input-Feld eine CSS-Klasse zuweisen, damit eine spätere Formatierung auf alle Felder anwendbar ist. Der Teil müsste also wie folgt aussehen:

Code: 
		<tr>
			<td>Link 1</td>
			<td><input class="formatierung" name="link[]" type="text" size="60" maxlength="150" /><input class="formatierung2" name="link[]" type="text" size="60" maxlength="150" /></</td>
		</tr>

Wie muss ich das JS-Script abändern, damit dies möglich ist? Vielen Dank für Eure Hilfe!

Grüße,
QUEST08
 
So, nun habe ich mir das alles eigentlich ganz gut angepasst, jedoch habe ich noch das Problem, dass er mir die erste Spalte auch mit kopiert. Im Formular an sich hab ich die Spalte entfernt, jedoch wird die erste Spalte weiterhin eingefügt. Hast du dafür noch eine Lösung?
 
Hat sich soeben erledigt. Hier nun das Script für den Rest der Weltl. Es werden 2 Spalten mit je einem Textfeld eingefügt. Diese können beliebig erweitert oder gelöscht werden.

Code: 
<script type="text/javascript">

function addRowToTable()
{
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);
  
  
  // right cell
  var cellRight = row.insertCell(0);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'txtRow' + iteration;
  el.id = 'txtRow' + iteration;
  el.size = 5;
  
  cellRight.appendChild(el);
  
  // select cell
  var cellRightSel = row.insertCell(1);
  var sel = document.createElement('input');
  sel.type = 'text';
  sel.name = 'selRow' + iteration;
  sel.id = 'selRow' + iteration;
  sel.size = 40;
  cellRightSel.appendChild(sel);
}

function removeRowFromTable()
{
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}

</script>

Code: 
<form action="tableaddrow_nw.html" method="get">

<p>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Remove" onclick="removeRowFromTable();" />
</p>

<table border="1" id="tblSample">
  <tr>
    <th colspan="2">Sample table</th>
  </tr>
  <tr>
    <td><input type="text" name="txtRow1" id="txtRow1" size="5" /></td>
    <td><input type="text" name="selRow0" id="selRow0" size="40" /></td>
  </tr>
</table>

</form>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück