Which cell of the table was selected ?

Discussion in 'Javascript' started by cogitoergosum, Jun 10, 2007.

  1. Hi,
    I have a table with four columns.

    By default, except for the second column (id="s01") all column values
    are protected. When a value is selected from second column, the third
    column is enabled. When a value is selected in the third column, the
    fourth column is enabled and a separate button for adding a new row
    (as in <tr> of code snippet above) is also enabled.

    As you would have guessed, I have got the javascript code working when
    number of rows is one.
    This is obviously because, the javascript for en/disablement does not
    get to know which cell was selected.

    Thus, if there are four rows and I selected a value from the second
    column (id="s02"), how do I detect which cell was selected and thereby
    take the action in the adjacent cell ?


    <table id="t01" cellpadding="1" cellspacing="0">
    <tr>
    <td align=center>Delete</td>
    <td align=center>Item type</td>
    <td align=center>Month Ending</td>
    <td align=center>Comments</td>
    </tr>
    <tr><td><input type="checkbox" id="c01" disabled="true"></td>
    <td><select id="s01" value="0">
    <option id="00" value="0">Select item type...</option>
    <option id="01" value="1">Vendor Item</option>
    <option id="02" value="2">Wholesale Item</option>
    <option id="03" value="3">Distributor Item</option>
    </select></td>
    <td><select id="s02" disabled="true" value="0">
    <option id="00" value="0">Month ending...</option>
    <option id="01" value="1">Jan</option>
    <option id="02" value="2">Feb</option>
    <option id="03" value="3">Mar</option>
    </select></td>
    <td><input type="text" id="desc" size="80" accept="plain/text"
    disabled="true"></input></td>
    </tr>
    </table>

    Thanks,
    Nagesh

    PS: I did search this forum. But, most code samples pointed to getting
    to a cell from the javascript code rather than the other way around.
     
    cogitoergosum, Jun 10, 2007
    #1
    1. Advertisements

  2. cogitoergosum

    ASM Guest

    cogitoergosum a écrit :
    value is not allowed in a tag 'select'
    an id (as a name) can't begin with a number
    the 1st character must be a letter

    only ONE id with same name is allowed !

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="fr">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>Untitled</title>
    <script type="text/javascript">
    <!--

    function nextFree(what) {
    var idx;
    // collection of elements in what's row
    var rw = setElem(what);
    // index in row
    switch(what.name) {
    case 's1[]': idx = 2; break;
    case 's2[]': idx = 3; break;
    case 'desc[]': idx = 0; break;
    }
    if(what.checked) {
    rw[1].selectedIndex = rw[2].selectedIndex = 0;
    rw[3].value ='';
    rw[0].disabled = rw[2].disabled = rw[3].disabled = true;
    what.checked = false;
    }
    else
    if(1<idx && idx<4) {
    if(what.selectedIndex==0) {
    rw[0].disabled = rw[idx].disabled = true;
    if(idx==2) {
    rw[idx].selectedIndex = 0;
    rw[3].disabled = true;
    }
    rw[3].value = '';
    alert('you must choice an item in this list');
    }
    else rw[idx].disabled=false;
    }
    else
    rw[0].disabled=false;
    }

    function setElem(where) {
    // which table row ?
    while(where.tagName.toLowerCase() != 'tr')
    {
    where = where.parentNode;
    }
    var I = where.getElementsByTagName('INPUT');
    var S = where.getElementsByTagName('SELECT');
    // array of form elements in this table's row
    var rw = [I[0], S[0], S[1], I[1]];
    return rw;
    }

    onload = function() {
    var t = document.getElementById('t01');
    t = t.getElementsByTagName('TR');
    for(var i=1; i<t.length; i++) {
    var I = t.getElementsByTagName('INPUT');
    var S = t.getElementsByTagName('SELECT');
    I[0].onclick = function() { nextFree(this); };
    I[1].onchange = function() { nextFree(this); };
    S[0].onchange = function() { nextFree(this); };
    S[1].onchange = function() { nextFree(this); };
    }
    }
    //-->
    </script>
    </head>
    <body>
    <form action="javascript:void();">
    <table id="t01" cellpadding="1" cellspacing="0">
    <tr>
    <td align=center>Delete</td>
    <td align=center>Item type</td>
    <td align=center>Month Ending</td>
    <td align=center>Comments</td>
    </tr>
    <tr><td><input type="checkbox" id="c_01" name="c1[]"
    disabled="true"></td>
    <td><select id="s1_01" name="s1[]">
    <option value="0">Select item type...</option>
    <option value="1">Vendor Item</option>
    <option value="2">Wholesale Item</option>
    <option value="3">Distributor Item</option>
    </select></td>
    <td><select id="s2_01" name="s2[]" disabled="true">
    <option value="0">Month ending...</option>
    <option value="1">Jan</option>
    <option value="2">Feb</option>
    <option value="3">Mar</option>
    </select></td>
    <td><input type="text" id="desc_01" name="desc[]" size="80"
    accept="plain/text" disabled="true"/></td>
    </tr>
    <tr><td><input type="checkbox" id="c_02" name="c1[]"
    disabled="true"></td>
    <td><select id="s1_02" name="s1[]">
    <option value="0">Select item type...</option>
    <option value="1">Vendor Item</option>
    <option value="2">Wholesale Item</option>
    <option value="3">Distributor Item</option>
    </select></td>
    <td><select id="s2_02" name="s2[]" disabled="true">
    <option value="0">Month ending...</option>
    <option value="1">Jan</option>
    <option value="2">Feb</option>
    <option value="3">Mar</option>
    </select></td>
    <td><input type="text" id="desc_02" name="desc[]" size="80"
    accept="plain/text" disabled="true"/></td>
    </tr>
    <tr><td><input type="checkbox" id="c_03" name="c1[]"
    disabled="true"></td>
    <td><select id="s1_03" name="s1[]">
    <option value="0">Select item type...</option>
    <option value="1">Vendor Item</option>
    <option value="2">Wholesale Item</option>
    <option value="3">Distributor Item</option>
    </select></td>
    <td><select id="s2_03" name="s2[]" disabled="true">
    <option value="0">Month ending...</option>
    <option value="1">Jan</option>
    <option value="2">Feb</option>
    <option value="3">Mar</option>
    </select></td>
    <td><input type="text" id="desc_03" name="desc[]" size="80"
    accept="plain/text" disabled="true"/></td>
    </tr>
    </table>
    </form>
    </body>
    </html>
     
    ASM, Jun 10, 2007
    #2
    1. Advertisements

  3. Merci, Monsieur !

    Regards,
    Nags
     
    cogitoergosum, Jun 11, 2007
    #3
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.