Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 4 down vote favorite

I want to give a hint to each row and now I have problem

How do I put the row number into this div id="txtHint" become txthint1 *txthint2* txthint3

onchange="showUser(this.value,i) which is the number of row.. so I can use showuser function

JS :

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[i].innerHTML;
        //alert(newcell.childNodes);
        switch(newcell.childNodes[0].type) {
            case "text":
                newcell.childNodes[0].value = "";
                break;
            case "checkbox":
                newcell.childNodes[0].checked = false;
                break;
            case "select-one":
                newcell.childNodes[0].selectedIndex = 0;
                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[i];
            var chkbox = row.cells[0].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);
    }
}
function showUser(str)
{
    if (str=="")
    {
        document.getElementById("txtHint").innerHTML="";
        return;
    } 
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","getuser.php?q="+str,true);
    xmlhttp.send();
}

HTML : 

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<form action="http://localhost/tes/index.php/form/prints" method="post">
<TABLE id="dataTable" width="350px" border="1">
    <TR>
        <TD><INPUT type="checkbox" name="chk[]"/></TD>
        <TD><select name="a[]" id="a" onchange="showUser(this.value)">
        <option value="">select</option>
      <?php
    $sql="select * FROM user";

    $result = mysql_query($sql);        

    while($row = mysql_fetch_array($result))
      {

      ?>
        <option value="<?=$row['username']?>"><?=$row['username']?></option>
    <?php
    }
    ?>


            </select>
        </TD>
        <TD>
            <div id="txtHint"></div>
        </TD>
    </TR>
</TABLE>
<input type="submit"/>
</form>
share|improve this question
1  
once try with: newcell.innerHTML += table.rows[0].cells[i].innerHTML; –  Anup Oct 8 at 12:48
 
i have changed it with newcell.innerHTML += table.rows[0].cells[i].innerHTML and it did not give any different still got a same problem T.T –  Johanes Chan 2 days ago

2 Answers

up vote 0 down vote

You're basically dealing with an event registration issue. You can store the data in the ID (the i value you mentioned). But you then are having trouble getting it back out, yes?

Try reading up on this topic here: http://www.quirksmode.org/js/events_advanced.html

Then, once you get that (basically) try something like this:

function registerEvents() {
    var showUser = function(e) {
        if (!e) var e = window.event;
        var target = e.target || e.srcElement;
        if (target.nodeType == 3) // defeat Safari bug
            target = target.parentNode;
        console.log(target);
        //  Your code would go here
        //  ..probably in place of the console.log() line as well.
    },
        eventElements = document.getElementsByTagName("select"),
        eventRegistrar;
    if(eventElements.length > 0) {
        for(var i=0;i<eventElements.lengthli++) {
            eventRegistrar = eventElements[i].addEventListener || eventElements[i].attachEvent;
            eventRegistrar(((eventRegistrar==eventElements[i].attachEvent)?"on":"")+"change", registerEvents);
        }
    }
}
var windowEventRegistrar = window.addEventListener || window.attachEvent;
windowEventRegistrar(((windowEventRegistrar==window.attachEvent)?"on":"")+"load", registerEvents);

Or you could use jQuery, which would result in a lot less code writing for you.

share|improve this answer
 
if you run the javascript code after the body (or in the body) you will want to fire that "registerEvents()" manually. –  Luke 2 days ago
up vote 0 down vote

after did some change to the code i decided to made it like this and it could work it can give a hint depend on selective i choose and i made the application ask how many row do you need before, because i dont know how to fix it so the user can add row but now i have another problem here when i move it to codeigniter

function showUser(str,x)
        {

....... i dont know how to post it error always showed when i want to post hehe


xmlhttp.open("GET","http://localhost/tes/index.php/form/hint?q="+str,true
)
}

str value is get from select value from body and javascript receive it but i want to send it to function and it wont please help me

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.