Edit row of table with ajax (no jquery)

Question

I want to change the row with the numbers 1, 2 and 3 for the number 4, 5 and 6 with AJAX (no jquery) when I push the button. How can I do it? because with this code I can't.

This is the main .php:

<!DOCTYPE html>
<html>
    <head>
        <title>Hola Mundo con AJAX</title>
        <script>
            function loadXMLDoc()
            {
                var xmlhttp;
                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("myDiv").innerHTML=xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET","carga.php",true);
                xmlhttp.send();
            }
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td bgcolor="#D6D6D6">field 1</td>
                <td bgcolor="#D6D6D6">field 2</td>
                <td bgcolor="#D6D6D6">field 3</td>
            </tr>
            <tr>
                <div id="myDiv"><td>1</td>
                <td>2</td>
                <td>3</td></div>
            </tr>
        </table>
        <button onclick="loadXMLDoc()">Cambio</button>
    </body>
</html>

This is cargar.php:

<?php
echo "<td>4</td>
    <td>5</td>
    <td>6</td>"; 
?>

Answer 1

Try this:

<!DOCTYPE html>
<html>
    <head>
        <title>Hola Mundo con AJAX</title>
        <script>
            function loadXMLDoc()
            {
                var xmlhttp;
                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("myTable").tBodies[0].innerHTML+=xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET","carga.php",true);
                xmlhttp.send();
            }
        </script>
    </head>
    <body>
        <table id="myTable">
            <tbody>
                <tr>
                    <td bgcolor="#D6D6D6">field 1</td>
                    <td bgcolor="#D6D6D6">field 2</td>
                    <td bgcolor="#D6D6D6">field 3</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td></div>
                </tr>
            </tbody>
        </table>
        <button onclick="loadXMLDoc()">Cambio</button>
    </body>
</html>

Edit row of table with ajax (no jquery)

Question

1 answers

solution1
0 ACCPTED 2013-05-04 16:18:51

Edit row of table with ajax (no jquery)

Question

1 answers

solution1 0 ACCPTED 2013-05-04 16:18:51

solution1
0 ACCPTED 2013-05-04 16:18:51