1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

javascript array and dynamic add table row form input

Discussion in 'JavaScript' started by thkoo, Feb 21, 2010.

0
  1. #1
    I have the following html code to dynamically add the table rows in the form input

    I also have an editable select box plug in from DTHMLGoodies.com

    The editble select box works fine without using function addRow(tableID) and table rows input is created manually and name element is
    assigned without use of array [] i.e. name=country_1(for row1) name=country_2(for row2) etc

    BUT IT LACK OF FLEXIBILITY!

    So I change original code

    FROM:
    <script type="text/javascript">
    createEditableSelect(document.forms[0].country;
    </script>

    TO:

    <script type="text/javascript">
    var table = document.getElementById('dataTable');
    var rowCount = table.rows.length;

    for(var i=0; i< rowCount; i++) {

    createEditableSelect(document.forms[0].country;

    }
    </script>

    SO that IT CAN MATCH with element name array created by addtable row funciton


    BUT it can not work!!!!

    Can any one help to solve the problem?

    I spent a lot of time in the net to search for answer but no avail.

    Your help is therefore very much appreciated.




    ///************HTML CODE (PARENT WINDOW)**********************
    <HTML>
    <HEAD>
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
    <script type="text/javascript" src="../ipwe/jquery-1.3.2.js"></script>

    <SCRIPT language="javascript">
    function addRow(tableID) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var colCount = table.rows[0].cells.length;

    for(var i=0; i< colCount; i++) {

    var newcell = row.insertCell(i);

    newcell.innerHTML = table.rows[0].cells.innerHTML;
    //alert(newcell.childNodes);
    switch(newcell.childNodes[0].type) {
    case "text":
    newcell.childNodes[0].value = "";
    break;
    case "select-one":
    newcell.childNodes[0].selectedIndex = 0;
    break;
    case "text":
    newcell.childNodes[0].value ="";
    break;
    case "checkbox":
    newcell.childNodes[0].checked = false;
    break;
    }
    }
    }

    function deleteRow(tableID) {
    try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for(var i=0; i<rowCount; i++) {
    var row = table.rows;
    var chkbox = row.cells[4].childNodes[0];
    if(null != chkbox && true == chkbox.checked) {
    if(rowCount <= 1) {
    alert("Cannot delete all the rows.");
    break;
    }
    table.deleteRow(i);
    rowCount--;
    i--;
    }
    }
    }catch(e) {
    alert(e);
    }

    }
    </SCRIPT>
    </script>
    </HEAD>
    <BODY>
    <?
    $page_name=$_SERVER['PHP_SELF'];
    //
    ?>

    <form action="<? $page_name; ?>" name="note" id="note" method="GET">

    <table id="dataTable" width="700px" border="0">
    <thead>
    <th width="280" style="text-align:left" >Description</th>
    <th width="100">Current Year</th>
    <th width="100">Comp Year</th>
    <th width="100"></th>
    <th width="40"></th>
    <th width="40"></th>
    <th width="40"></th>
    </thead>
    <tbody>

    <tr>
    <input name="country[]" id="country[]" selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico;Norway;Sweden;United Kingdom;United States" />

    <td><input type="text" name="t_amount[]" style="width:100px;text-align:right" /></td>

    <td><input type="text" name="l_amount[]" style="width:100px;text-align:right" /></td>

    <td>
    <select name="underline[]" style="width:80px;" >
    <option value="total">Total</option>
    <option value="subtotal">Sub-total</option>
    <option value="subtotal1">Sub-total 1</option>
    </select>
    </td>
    <td><input type="checkbox" name="chk[]" value="Y" /></td>

    <td><a href="#" onclick="addRow('dataTable')">
    <img border='0' src='../images/add.gif' title='delete' width='15' height='15'></a></td>

    <td><a href="#" onclick="deleteRow('dataTable')">
    <img border='0' src='../images/delete2.gif' title='delete' width='15' height='15'></a></td>

    </tr>
    <tbody>
    <tfoot>
    <th></th>
    <th><input type="text" id="tYear" style="width:100px;text-align:right" READONLY /></th>
    <th><input type="text" id="lYear" style="width:100px;text-align:right" READONLY /></th>
    <th colspan="4"></th>
    </tfoot>
    </table>

    <script type="text/javascript">
    var table = document.getElementById('dataTable');

    var rowCount = table.rows.length;

    for(var i=0; i< rowCount; i++) {

    createEditableSelect(document.forms[0].country;

    }
    </script>

    <table width="700px" border="0">
    <tr><td colspan="7" style="text-align:center">&nbsp;</td>
    <tr><td colspan="7" style="text-align:center"><input type="submit" name="submitadd" value="Insert Content"></td>
    <tr><td colspan="2"><hr /></td></tr>
    </table>
    </form>
    </body>
    </html>
     
    thkoo, Feb 21, 2010 IP