Add Row (DOM) with onClick Function

jj6849

I have been using the dom to add a row to my form for awhile now, but now I need to do some validation to make sure certain check boxes aren't checked with other check boxes. Now of course it works with the first row, but after I add a row, the Function does not work (no runtime error or anything).
So first is my Function do the validation, second is my code for adding new row (this is where I'm having trouble, maybe with the setAttribute??), and third is my HTML code.
Thanks!!!
1. Function for validation

Expand|Select|Wrap|Line Numbers

  <script language="javascript"> 

function checkAccess(j) {

    xgu = eval("document.step2.general_" + j); 

    xadmin = eval("document.step2.admin_" + j); 

    xvo = eval("document.step2.viewonly_" + j); 

    if (xgu.checked == true && xvo.checked == true && xadmin.checked == true){

        alert('You cannot have General User AND Admin AND View Only Selected');

        xgu.checked = true;

        xadmin.checked = false;

        xvo.checked = false;

    }

    if (xgu.checked == true && xadmin.checked == true) {

        alert('You cannot have General User AND Admin Selected');

        xgu.checked = true;

        xadmin.checked = false;

        xvo.checked = false;

    }

if (xgu.checked == true && xvo.checked == true){

        alert('You cannot have General User AND View Only Selected');

        xgu.checked = true;

        xadmin.checked = false;

        xvo.checked = false;

    }    

}

</script>

2. Add new Row

Expand|Select|Wrap|Line Numbers

  
<script language="JavaScript" type="text/javascript">

function addRowToTable() 

{

    var tbl = document.getElementById('table2a');

    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);
 
    // sbcuid cell

    var cellbox = row.insertCell(0);    

    cellbox.style.backgroundColor = "#F4F4F4";

    var box = document.createElement('input');

    box.setAttribute('type', 'text');

    box.setAttribute('name', 'txtRow_' + iteration);

    box.setAttribute('id', 'txtRow_' + iteration);

    box.setAttribute('size', '5');

    box.setAttribute('maxlength', '6');
 
    cellbox.appendChild(box);
 
    // General User cell

    var cellgeneral = row.insertCell(1);

    cellgeneral.style.backgroundColor = "#F4F4F4";

    cellgeneral.align='center';

    var general = document.createElement('input');

    general.setAttribute('type', 'checkbox');

    general.setAttribute('name', 'general_' + iteration);

    general.setAttribute('id', 'general_' + iteration);    

    general.setAttribute('value','1');

    var myfcn = 'checkAccess(' + iteration + ')';

    general.setAttribute('onClick',myfcn);

    cellgeneral.appendChild(general);    
 
    // admin cell

    var celladmin = row.insertCell(1);

    celladmin.style.backgroundColor = "#F4F4F4";

    celladmin.align='center';

    var admin = document.createElement('input');

    admin.setAttribute('type', 'checkbox');

    admin.setAttribute('name', 'admin_' + iteration);

    admin.setAttribute('id', 'admin_' + iteration);    

    admin.setAttribute('value','1');

    var myfcn = 'checkAccess(' + iteration + ')';

    admin.setAttribute('onClick',myfcn);

    celladmin.appendChild(admin);
 
    // viewonly cell

    var cellviewonly = row.insertCell(2);

    cellviewonly.style.backgroundColor = "#F4F4F4";

    cellviewonly.align='center';

    var viewonly = document.createElement('input');

    viewonly.setAttribute('type', 'checkbox');

    viewonly.setAttribute('name', 'viewonly_' + iteration);

    viewonly.setAttribute('id', 'viewonly_' + iteration);    

    viewonly.setAttribute('value','1');

    var myfcn = 'checkAccess(' + iteration + ')';

    viewonly.setAttribute('onClick',myfcn);

    cellviewonly.appendChild(viewonly);

}

</script>

3. HTML Code

Expand|Select|Wrap|Line Numbers

  
<table width="100%" cellpadding="2" cellspacing="1" id="table2a">

                                                <tr bgcolor="FDFFE6">

                                                    <td width="29%"><b>SBCUID</b></td>    

                                                    <td align="center" width="2%">

                                                        <b> 

                                                        <SCRIPT LANGUAGE="javascript" type="text/javascript">

                                                        <!--

                                                        document.write ("<span style=\"color:black;font-size=80%;\" title=\" General User is being listed on the calendar. \" class='popup1'>General User</span>");

                                                        //-->

                                                        </SCRIPT>

                                                        </b>    

                                                    </td>                                                            

                                                    <td align="center" width="2%">

                                                        <b>

                                                        <SCRIPT LANGUAGE="javascript" type="text/javascript">

                                                        <!--

                                                        document.write ("<span style=\"color:black;font-size=80%;\" title=\" Admin is having the ability to update/delete the calendar and it's users. A User CAN have View Only Access and Admin Access \" class='popup1'>Admin</span>");

                                                        //-->

                                                        </SCRIPT>

                                                        </b>    

                                                    </td>                        

                                                    <td align="center" width="2%" nowrap>

                                                        <b>

                                                        <SCRIPT LANGUAGE="javascript" type="text/javascript">

                                                        <!--

                                                        document.write ("<span style=\"color:black;font-size=80%;\" title=\" View Only is having access to the calendar, but will NOT be included in the list of users. A User CAN have View Only Access and Admin Access \" class='popup1'>View Only</span>");

                                                        //-->

                                                        </SCRIPT>

                                                        </b>    

                                                    </td>            

                                                </tr>                

                                                <tr bgcolor="F4F4F4">

                                                    <td>

                                                        <input type="text" name="txtRow_1" id="txtRow_1" size="5" maxlength="6">                                                                

                                                    </td>

                                                    <td align="center" align="center">

                                                        <input type="checkbox" name="general_1" value="1" id="general_1" checked onClick="checkAccess('1')" />

                                                    </td>

                                                    <td align="center" align="center">

                                                        <input type="checkbox" name="admin_1" value="1" id="admin_1" onClick="checkAccess('1')" />

                                                    </td>

                                                    <td align="center" align="center">

                                                        <input type="checkbox" name="viewonly_1" value="1" id="viewonly_1" onClick="checkAccess('1')" />

                                                    </td>                                                            

                                                </tr>        

                                            </table>
 
                                <input type="button" class="XPButton" value="Add A User" onclick="addRowToTable();" />

jj6849

This is what was needed:
general.onclick=function() {checkAccess(iteration);}

For Example:

Expand|Select|Wrap|Line Numbers

 // General User cell

var cellgeneral = row.insertCell(1);

cellgeneral.style.backgroundColor = "#F4F4F4";

cellgeneral.align='center';

var general = document.createElement('input');

general.setAttribute('type', 'checkbox');

general.setAttribute('name', 'general_' + iteration);

general.setAttribute('id', 'general_' + iteration); 

general.setAttribute('value','1');

general.onclick=function() {checkAccess(iteration);}

cellgeneral.appendChild(general);

Bisweswar

I have gone through the "Add Row at run time."
There i just adding textfield and option field .
But i need to add a combobox with some values.
Please give how to add it instead of textfield.

Bisweswar

Please specify how to add a combo in a new added cell.

Bisweswar

How to delete a row from that table

Add Row (DOM) with onClick Function

re: Add Row (DOM) with onClick Function

re: Add Row (DOM) with onClick Function

re: Add Row (DOM) with onClick Function

re: Add Row (DOM) with onClick Function

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about