Newbie - limit number of table rows

JohnShell

08-30-2010, 02:56 PM

Hi,

Have a dynamic table in JS that adds rows. Want a max of 8 rows. How can that be done?

[CODE]
<script language="Javascript" type="text/javascript">
function addRow()
{
var tbl = document.getElementById('ReqDtTbl');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var cellLeft = row.insertCell(0);
var textNode = document.createElement('input');
textNode.size = 7;
textNode.name = 'startdate' + iteration;
cellLeft.appendChild(textNode);
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'enddate' + iteration;
el.id = 'enddate' + iteration;
el.size = 7;
cellRight.appendChild(el);
// the last cell!
var cellRightSel = row.insertCell(2);
var sel = document.createElement('select');
sel.name = 'TypeHrs' + iteration;
sel.options[0] = new Option('-Select-', '""');
sel.options[1] = new Option('Comp Time', 'Comp Time');
sel.options[2] = new Option('Credit Hrs', 'Credit Hrs');
sel.options[3] = new Option('Overtime', 'Overtime');
sel.options[4] = new Option('Rel Comp', 'RelComp');
cellRightSel.appendChild(sel);
var cellRight = row.insertCell(3);
var el = document.createElement('input');
el.type = 'text';
el.name = 'No. of Hours' + iteration;
el.id = 'No. of Hours' + iteration;
el.size = 7;
cellRight.appendChild(el);
}
[CODE]

John

vwphillips

08-30-2010, 04:44 PM

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function addRow(id,nu)
{
var tbl = document.getElementById(id);
var lastRow = tbl.rows.length;
var iteration = lastRow;
if (lastRow>nu){
return;
}
var row = tbl.insertRow(lastRow);
var cellLeft = row.insertCell(0);
var textNode = document.createElement('input');
textNode.size = 7;
textNode.name = 'startdate' + iteration;
cellLeft.appendChild(textNode);
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'enddate' + iteration;
el.id = 'enddate' + iteration;
el.size = 7;
cellRight.appendChild(el);
// the last cell!
var cellRightSel = row.insertCell(2);
var sel = document.createElement('select');
sel.name = 'TypeHrs' + iteration;
sel.options[0] = new Option('-Select-', '""');
sel.options[1] = new Option('Comp Time', 'Comp Time');
sel.options[2] = new Option('Credit Hrs', 'Credit Hrs');
sel.options[3] = new Option('Overtime', 'Overtime');
sel.options[4] = new Option('Rel Comp', 'RelComp');
cellRightSel.appendChild(sel);
var cellRight = row.insertCell(3);
var el = document.createElement('input');
el.type = 'text';
el.name = 'No. of Hours' + iteration;
el.id = 'No. of Hours' + iteration;
el.size = 7;
cellRight.appendChild(el);
}

/*]]>*/
</script></head>

<body>
<table>
<tbody id="ReqDtTbl" ></tbody>
</table>

<input type="button" name="" value="TEST" onclick="addRow('ReqDtTbl',7)"/></body>

</html>[CODE]

JohnShell

08-30-2010, 07:19 PM

Vic,

Thank you very much. Works perfectly.

John