I need to select a cell from a p: dataTable and then load the data into another page [closed]

Question

I need to select a cell from a p: dataTable and then load the data into another page [closed]

Navigation

#1 by (0 votes)
#2 by (-1 votes)

1

I need to select a cell of p:dataTable and then load the data of the selected cell on another page

javascript jquery datatables

asked by cristhian leon 09.05.2016 в 22:39

source

2 answers

Write html with Javascript Form of a JSON [duplicate]

score 0 · Answer 1

It can be done in many ways, at least 5 different, I will focus on a single option and easy to see that you are a novice yet, you need to add the onclick event to something, the tr for example or a checkbox, within the event put a function, to highlight the tr you need, there may be one highlighted then return all normal before and then highlight the specific.

Something like this:

function Resalta(row){
    try{
        for(var iIdx=1; iIdx<4; iIdx++)
        {
            document.getElementById("tr" + iIdx).style.backgroundColor='#ffffff'; 
        }
        document.getElementById("tr" + row).style.backgroundColor='#003F87'; 
    }catch(e){
        alert(e.message);
    }
}

HTML

<table> <tr id="tr1" onclick="javascript:Resalta(1);"><td>1<td><tr> <tr id="tr2" onclick="javascript:Resalta(2);"><td>2<td><tr> <tr id="tr3" onclick="javascript:Resalta(3);"><td>3<td><tr> </table>

score -1 · Answer 2

Look I leave you an example for a JS version of JS non-use, as you said this is another way to solve the problem.

// Aquí yo asumo que tienes un depósito de datos en un Object, lo puedes cambiar por lo que ocupes
var data = {"UJHY54":{"genero":"Masculino","tipoSangre":"O Positivo"},
            "DEWX38":{"genero":"Masculino","tipoSangre":"RH Positivo"},
            "GTYU76":{"genero":"Femenino","tipoSangre":"O Negativo"}
           }
//Primeramente busco la tabla que actualmente tengo en el página, ojo, si tienes mas tablas entonces deberas agregar el ID de tu tabla.
var a = document.querySelectorAll("table tbody tr"); //Buscamos todos los tr del Body en la Tabla
if(a != undefined && a != null){ //Verificamos que la variable a no esta undefined y distinta de null
  for(var b in a){ //Como el querySelectorAll nos devuelve un array, entonces iteramos
    var c = a[b];
    if(typeof c === "object"){ // filtramos solo los tr que son tipo object
      c.onclick = function (){ //Agregamos evento onclick al TR
        var id = this.children[0].textContent; //Obtenemos el ID que esta en la primera columna del TR
        var ventana = window.open("", "Ventana Externa", "width=200,height=100"); // Creamos una ventana
        ventana.document.write("<p>Genero: "+data[id].genero+"</p><p>Tipo Sangre: "+data[id].tipoSangre+"</p>"); // Le insertamos los datos que tenemos en el deposito del Object llamado data y listo.
      }
    }
  }
}

table tbody tr:hover{
background: yellow;
  color: red;
  cursor: pointer;
}

<table cellspacing=0>
<thead><tr><th>ID</th><th>Nombre</th><th>Paterno</th><th>País</th><th>Edad</th></tr></thead>
<tbody>
<tr><td>UJHY54</td><td>Alfonso</td><td>Carrasco</td><td>México</td><td>31 Años</td></tr>
<tr><td>DEWX38</td><td>Raul</td><td>Méndez</td><td>Brasil</td><td>20 Años</td></tr>
<tr><td>GTYU76</td><td>Lorena</td><td>Lopez</td><td>Venezuela</td><td>19 Años</td></tr>
</tbody>
</table>