Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    create and remove elements on button click

    hai,

    i want to do something like this,

    when i click a "CREATE" button a row should be created which contains 5 columns.
    In
    first column check box,
    second column textbox,
    third column textarea,
    fourth column radio button,
    fifth column a button with "DELETE" as value, which on click should delete the created row.

    the number of times i click "create" button that many rows has to be created.their names also should be generated dynamically.

    pls send solution as soon as possible.
    waiting for ur response.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    use DOM methods:

    createElement()
    createTextNode()
    appendChild()
    removeChild()

    maybe
    cloneNode()
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question create and remove elements on button click

    hai

    i have used reateElement()...

    but i want all the elements to be in a table with 5 columns.

    pls send the code

  • #4
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Dom Script code not working in Opeara browser..check given code

    hai

    the following code is working in Internet Explorer, but not working in Opera. Pls Check the code and give the solution, so that it should work in Opera Browser.

    <html>
    <head>
    <script type="text/javascript">

    var i=0;

    function insRow()
    {
    var trow=document.getElementById('myTable').insertRow()

    var tdata1=trow.insertCell(0)
    var tdata2=trow.insertCell(1)
    var tdata3=trow.insertCell(2)
    var tdata4=trow.insertCell(3)
    var tdata5=trow.insertCell(4)

    tdata1.innerHTML="<input type='text' id='txt' >"
    tdata2.innerHTML="<input type='CHECKBOX' id='chk'>"
    tdata3.innerHTML="<textarea id='tarea'></textarea>"
    tdata4.innerHTML="<select id='lov'></select>"
    tdata5.innerHTML="<input type='button' id='btn' onclick=delrow(this)>"

    document.forms[0].elements[i].id=document.forms[0].elements[i].id+i;
    document.forms[0].elements[i+1].id=document.forms[0].elements[i+1].id+i;
    document.forms[0].elements[i+2].id=document.forms[0].elements[i+2].id+i;
    document.forms[0].elements[i+3].id=document.forms[0].elements[i+3].id+i;
    document.forms[0].elements[i+4].id=document.forms[0].elements[i+4].id+i;


    tname="txt"+i;
    chkname="chk"+i;
    tareaname="tarea"+i;
    lovname="lov"+i;
    btnname="btn"+i;

    tid="txt"+i;
    chkid="chk"+i;
    tareaid="tarea"+i;
    lovid="lov"+i;
    btnid="btn"+i;


    var txtid = document.getElementById(tid);
    txtid.setAttribute("name",tname);

    var chkid = document.getElementById(chkid);
    chkid.setAttribute("name",chkname);

    var tareaid = document.getElementById(tareaid);
    tareaid.setAttribute("name",tareaname);

    var lovid = document.getElementById(lovid);
    lovid.setAttribute("name",lovname);


    var btnid = document.getElementById(btnid);
    btnid.setAttribute("name",btnname);
    btnid.setAttribute("value","delete row");



    i=i+5;
    }
    function delrow(curr_row)
    {

    document.getElementById('myTable').deleteRow(curr_row.parentNode.parentNode.rowIndex);
    }

    </script>
    </head>

    <body>
    <form>

    <table id="myTable" border="1">
    </table>

    <input type="button" onclick="insRow()" value="Insert row">

    </form>

    </body>
    </html>

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    insertRow is a DHTML rather than a DOM Level 2 method.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Look, I have not enough spare time this very moment, but I'll give you a similar code whioh I have build for a friend. It is not exactely what you want, but you may see the methods and maybe you may build one of your own. If not, maybe later, if time, I might try one for you.

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script language="JavaScript" type="text/JavaScript">
    //genuine code by Corneliu Lucian 'KOR' Rusu [email]corneliulucian@apropo.ro[/email]
    function addR(){
    var 
    oTab document.getElementById('tab');// the table element
    var oRows oTab.getElementsByTagName('tr');// the rows collection
    var root oRows[1].parentNode;//the root for the future append
    var newRow oRows[1].cloneNode(true);//clone the second row with the entire content
    var oFields oTab.getElementsByTagName('input')//the text field collection
    for (var i=0;i<oFields.length;i++){
    if(
    oFields[i].getAttribute('value').length<1){
    alert('Please, fill in all the text fields!');//alerts
    oFields[i].focus();//focuses the empty field
    return false//stops if one of the text fields is not filled
    }
    }
    var 
    newFields newRow.getElementsByTagName('input');//the fields in the cloned row collection
    for(var i=0;i<newFields.length;i++){
    newFields[i].setAttribute('name',newFields[i].getAttribute('name')+'_'+oRows.length);//sets the new incremented names
    newFields[i].setAttribute('value','');//clears the values
    }
    var 
    newSel newRow.getElementsByTagName('select');//the select elements in the cloned row collection
    for(var i=0;i<newSel.length;i++){
    newSel[i].setAttribute('name',newSel[i].getAttribute('name')+'_'+oRows.length);//sets the new incremented selects' names
    newSel[i].setAttribute('value','');//clears the selects' values
    }
    root.insertBefore(newRow,document.getElementById('tot'));//appends the new row
    }
    function 
    addT(n,f){
    var 
    re = /^[0-9]*$/; 
    if (!
    re.test(f.value)) {//validate for numbers input
    alert("Value must be all numeric characters, non numeric's removed from field!");
    f.value f.value.replace(/[^0-9]/g,"");
    }
    var 
    vTot='';
    var 
    oTab document.getElementById('tab');// the table element
    var oRows oTab.getElementsByTagName('tr');// the rows collection
    var cIndexf.parentNode.cellIndex;//the index of the cell in row
    for(var i=1;i<oRows.length-1;i++){
    vTot vTot*1+oRows[i].getElementsByTagName('input')[cIndex].getAttribute('value')*1;//calculates the total
    }
    document.forms[0].elements[n].value vTot//assigns the total
    }
    </script>
    </head>
    <body>
    <form>
    <table id="tab" width="600" border="0" cellspacing="0" cellpadding="0">
    <tbody>
    <tr>
    <th>A/C Cd.</th>
    <th>Description</th>
    <th>S.L Code</th>
    <th>Description</th>
    <th>Debit</th>
    <th>Credit</th>
    </tr>
    <tr>
    <td><input type="text" name="Ac.code" size="5" maxlength="5"></td>
    <td> <input type="text" name="description" size="30"></td>
    <td><input type="text" name="slcode" size="10" ></td>
    <td> <input type="text" name="description1" size="30"></td>
    <td><input type="text" name="debit" size="12" onkeyup="addT('tdebit',this)"></td>
    <td> <input type="text" name="credit" size="12" onkeyup="addT('tcredit',this)"></td>
    <td><select name="type">
    <option value="" selected></option>
    <option value="C">C</option>
    <option value="O">O</option>
    </select> </td>
    </tr>
    <tr id="tot">
    <td><input type="text" name="tdebit" size="12" readonly></td>
    <td><input type="text" name="tcredit" size="12" readonly></td>
    </tr>
    </tbody>
    </table>
    <br>
    <br>
    <input type="button" value="ADD" onclick="return addR()">
    <br>
    <br>
    <input type="button" name="Submit" value="Submit" onclick="this.form.submit();this.form.reset()">
    </form>
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question thanks...on button click how to remove row

    hai,

    thanks for ur solution..

    i want one more solution
    when i click another button it should remove the row.

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Try insert a button in a cell in the row and

    <td><input name="but" type="button" value="remove" onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)"></td>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •