id en ajax

[hextrem]

Buenas necesito ayuda urgente por que no doy con la solucion ni en google ni foros ni nada. Tengo este codigo funciona ok pero solo me recoge el primer valor ya k es autogenerado tengo k concatenar i creo pero no se como ni como luego recoger el valor este es el codigo

Código Javascript:

var obj;
           var objs;
            function seleccion(){
                if(window.XMLHttpRequest){
                    obj=new XMLHttpRequest();
                }
                else if(window.AxtiveXObject){
                    obj=new AxtiveXObject("Microsoft.XMLHttp");
                }
                else{alert("No dispone de ajax");
                        return;
            }
                
                var seci = document.getElementById("secion");
                var secion = seci.options[seci.selectedIndex].value;
                
                obj.open("GET","lista?secion="+secion,true);
                obj.onreadystatechange=retorno;
                obj.send(null);
               
            }
            function retorno(){
             
                    if(obj.readyState==4){
                    if(obj.status==200){
                                     
                    var raiz= obj.responseText;
                    var p = eval("("+raiz+")")
                                          
                    var tabla = "<table border = '1'>";
                    tabla +="<tr>";
                    tabla +="<th>Comprar</th>";
                    tabla +="<th>Producto</th>";
                    tabla +="<th>Precio</th>";
                    tabla += "<th>Descripcion</th>";
                    tabla +="</tr>";
                    for(var i = 0;i<p.length;i++){
                        var ob = p[i];
                    tabla += "<tr>";
                    tabla += "<td>";
                    tabla += "<input type='button' name='Comprar' value='Comprar' onclick='comprar(this)' >";
                    tabla += "</td>";
                    tabla += "<td id=com>";
                    tabla += ob.producto+"</td>";
                    tabla += "<td>"+ob.precio+"</td>";
                    tabla += "<td>"+ob.descripcion+"</td>";
                    tabla += "</tr>";
                    
                }
               
                    tabla += "</table>"
                    document.getElementById("dato").innerHTML=tabla;
                    
                                 }
               
                    }}
           function comprar(){
                         
                var pro = document.getElementById("com").innerHTML;
                
                if(window.XMLHttpRequest){
                    or=new XMLHttpRequest();
                }
                else if(window.AxtiveXObject){
                    or=new AxtiveXObject("Microsoft.XMLHttp");
                }
                else{alert("No dispone de ajax");
                        return;
            }
           
               or.open("GET","carro?pro="+pro,true);
               or.onreadystatechange=lis;
               or.send(null);
               
           }
           
           function lis(){
             
                    if(or.readyState==4){
                    if(or.status==200){
                                     
                    var list= or.responseText;
                    var l = eval("("+list+")")
                                          
                    var tabla = "<table border = '6'>";
                    tabla +="<tr>";
                    tabla +="<th>Eliminar</th>";
                    tabla +="<th>Producto</th>";
                    tabla +="<th>Precio</th>";
                    tabla += "<th>Descripcion</th>";
                    tabla +="</tr>";
                    for(var i = 0;i<l.length;i++){
                        var li = l[i];
                    tabla += "<tr>";
                    tabla += "<td>";
                    tabla += "<input type='button' name='Eliminar' value='Eliminar' onclick='eliminar()' >";
                    tabla += "</td>";
                    tabla += "<td id=el>";
                    tabla += li.producto+"</td>";
                    tabla += "<td>"+li.precio+"</td>";
                    tabla += "<td>"+li.descripcion+"</td>";
                    tabla += "</tr>";
                    
                }
                
                    tabla += "</table>"
                    document.getElementById("te").innerHTML=tabla;
                 
                }
                    }}
           function eliminar(){
               var eli = document.getElementById("el").innerHTML;
                   if(window.XMLHttpRequest){
                    or=new XMLHttpRequest();
                }
                else if(window.AxtiveXObject){
                    or=new AxtiveXObject("Microsoft.XMLHttp");
                }
                else{alert("No dispone de ajax");
                        return;
            }
           
               or.open("GET","elimina?eli="+eli,true);
               or.onreadystatechange=lis;
               or.send(null);
               
               
             }
 

Espero su ayuda

[maycolalvarez]

1 - puedes crear una función para crear el XHR, así reusas código.

2 - el problema es que generas varias filas, y elementos con el mismo nombre 'ID', lo ideal es que concatenes el ID de la db, de manera que queden elementos con nombres como:

<td id="id1"> y <td id="id2">

3 - lo ideal es que pases o this a la funcion eliminar, o que le concatenes del ID de la DB

[hextrem]

Gracias por la repuesta e puesto lo this pero no entiendo que quieres decir con cocatenar el id de la base de dato, esta misma tabla la e creado en jsp y si me detecta el que quiero pulsar pero con ajax no, puede tambien ser debido a que esta todo como un string.

[maycolalvarez]

recuerda que JSP es del lado del servidor, y sólo le importa el NAME de los input, en cambio para javascript cliente es otra historia, no se recomienda tener varios elementos con el mismo ID, es por ello que podrías desde JSP concatenar o construirlos con el id junto.