pizzy wrote:
> I don't have any that works.
>
Now you do. Put in any value you like, it will keep adding 'em.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Add inputs </title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
</head>
<body>
<style type="text/css">
table { /* border-collapse: collapse; */ border: 1px solid blue;
padding: 1px 1 1 1;}
..tip {font-size: 90%; color: #666633;}
</style>
<script type="text/javascript">
// Create an array of the letters of the alphabet
var alpha = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
// Add first set of inputs and checkbox
function addInputsA(f,t) {
// Clean and validate input
var n = t.value.replace(/\s+/g,'');
if (/\D+/.test(n) || 1 > n || '' == n) {
alert('Please enter an integer greater than 0');
if (t.focus) t.focus();
return;
}
// Delete the body containing the first input
delBody(t);
// Setup variables
var bA = document.getElementById('bodyA');
var i=0, oTr, oTd, oChk, txt, let;
// Add the inputs and checkboxes
do {
oTr = document.createElement('tr');
let = numToAlpha(i);
txt = 'Input-1-' + let;
addToTr(oTr,document.createTextNode(txt));
oInp = document.createElement('input');
oInp.name = txt;
addToTr(oTr,oInp);
oChk = document.createElement('input');
oChk.type = 'checkbox'
oChk.name = 'Check-1-' + let;
oChk.onclick = function() {addInputsB(this)};
addToTr(oTr,oChk);
addToTr(oTr,document.createTextNode(chkTxt(let)));
bA.appendChild(oTr);
} while (++i < n)
}
// Add second set of inputs
function addInputsB(y){
var x = y, oInp, txt;
var nBit = x.name.split('-');
// Go up to parent td
while (!/td/i.test(x.nodeName)) {
x = x.parentNode;
}
// Go to next td
x = x.nextSibling;
// Remove its content
delKids(x);
// If checkbox checked, put inputs into it
if (y.checked) {
for (var j=2; j<4; j++) {
txt = 'Input-' + j + '-' + nBit[2];
x.appendChild(document.createTextNode(txt));
oInp = document.createElement('input');
oInp.name = txt;
x.appendChild(oInp);
}
// Otherwise, put some text into it
} else {
x.appendChild(document.createTextNode(chkTxt(nBit[2])));
}
}
// Returns a string with value of 'a' appended
function chkTxt(a){
return 'Click to add inputs 2 & 3 ' + a;
}
// Deletes a tbody given any element inside the tbody to delete
function delBody(t) {
while ( !/tbody/i.test(t.nodeName)) {t = t.parentNode;}
t.parentNode.removeChild(t);
}
// Removes all child nodes of given element
function delKids(n) {
while (n.firstChild) {n.removeChild(n.firstChild)}
}
// Given a tr, append b to new cell, append cell to tr
function addToTr(a,b){
var oTd = document.createElement('td');
oTd.appendChild(b);
a.appendChild(oTd);
}
function numToAlpha(n){
var t='';
while (n > 0) {
t = alpha[n%26] + t;
n = Math.floor(n/26-1);
}
return (0 > n)? t : alpha[n] + t;
}
</script>
<form action="">
<table border="1">
<tbody>
<tr>
<td colspan="2">Enter number of inputs:
<input type="text" size="5" name="numInputs">
<input type="button" value="Add inputs" onclick="
addInputsA(this.form,this.form.numInputs);
">
<br>
<span class="tip">(Integer greater than 1)</span>
</td>
</tr>
</tbody>
<tbody id="bodyA">
</tbody>
<tbody>
<tr>
<td colspan="4">
<input type="reset">
<input type="submit">
</td>
</tr>
</tbody>
</table>
</form>
<!-- test harness for the number-to-alpha-index thing -->
<input type="text" size="10" onblur="
var o = document.getElementById('xx');
var n = +this.value, t='', m;
while (n > 0) {
t = alpha[n%26] + t;
n = Math.floor(n/26-1);
}
(0 > n)? t=t : t = alpha[n] + t;
o.innerHTML = t;
">
<span id="xx"></span>
</body>
</html>
Similar Threads
