[SOLUCIONADO] Pasar datos de tabla html a otra

[jacajob]

Buenas una consulta, como pasar cierta filas de una tabla html a otra tabla, a partir de una selección de filas.

tengo una tabla html que llena desde una consulta php. la idea es seleccionar ciertas filas y pasarlas a una nueva tabla html para guardar esa nueva tabla html en la bd

[Alexis88]

Puedes apoyarte en el evento click de tal manera que se ejecute una función por cada vez que se pulse una celda. En dicha función necesitarás obtener a las celdas constituyentes de la fila a la cual pertenece la celda pulsada para así acceder a sus valores y copiarlos. Para buscar elementos ancestros, utiliza la propiedad parentNode.

Si deseas seleccionar varias filas, por ejemplo, pulsando la tecla Ctrl, Alt o Shift junto a un clic del botón izquierdo del ratón, el objeto del evento tiene las propiedades ctrlKey, altKey y shiftKey para cada caso. Otra forma quizá más práctica consiste en utilizar valores para cada fila, de tal forma que se asignaría un valor X cada vez que la fila esté seleccionada y un valor Y cuando se le quite la selección. Para esto último solo serían necesarios simples clics.

Finalmente, cuando ya hayas obtenido los valores en cuestión, tan solo tendrás que añadir filas y columnas a la otra tabla, para lo cual puedes utilizar los métodos insertRow() e insertCell(), respectivamente.

Este es un ejemplo de dos tablas cuyos id son "one" y "two", siendo "one" la que contiene los datos y "two" la que los recibirá. También hay un botón que disparará la ejecución de una función que realizará la copia de los datos:

Código Javascript:

var oneTbody = document.querySelector("#one tbody"), //Cuerpo de la primera tabla
    twoTbody = document.querySelector("#two tbody"), //Cuerpo de la segunda tabla
    copy = document.querySelector("#copy"), //Botón que copiará los datos de las filas seleccionadas
    seleccion = [], //Arreglo que almacenará a las filas seleccionadas
    seleccionar = function(event){ //Función a ejecutarse para seleccionar una fila
        if (event.target.tagName == "TD"){ //Si se pulsó una celda
            var fila = event.target.parentNode; //Se almacena en una variable a la fila que la contiene
            
            //Si no está seleccionada
            if (fila.dataset.selected < 1){
                fila.style.backgroundColor = "red"; //Se la pinta de rojo
                fila.style.color = "white"; //Con un texto en blanco
                fila.dataset.selected = 1; //Se asigna el valor 1 al pseudoatributo "data-selected"
                seleccion.push(fila); //Se añade la fila al arreglo de filas seleccionadas
            }
            //Si está seleccionada
            else{
                fila.style.backgroundColor = ""; //Se retira el color de fondo
                fila.style.color = ""; //Y el del texto
                fila.dataset.selected = 0; //El valor del pseudoatributo retorna a 0
                seleccion.splice(seleccion.indexOf(fila), 1); //Se elimina la fila del arreglo  
            }           
        }
    },
    copiar = function(){ //Función a ejecutarse para copiar los datos de las filas seleccionadas en la segunda tabla
        if (seleccion.length){ //Si hay filas seleccionadas
            for (var i = 0, l = seleccion.length; i < l; i++){ //Se recorre a dicho conjunto
                var tr = twoTbody.insertRow(), //Se inserta una nueva fila en la segunda tabla
                    celdas = seleccion[i].querySelectorAll("td"); //Se toma a las celdas de la fila seleccionada actual en el bucle
 
                for (var j = 0, m = celdas.length; j < m; j++){ //Se recorre a dicho conjunto de celdas
                    var td = tr.insertCell(); //Se añade una nueva celda en la nueva fila de la segunda tabla
                    td.innerHTML = celdas[j].innerHTML; //Se copia el texto de la celda de la fila seleccionada a la nueva celda
                }
 
                //La fila seleccionada retorna a su estado inicial
                seleccion[i].style.backgroundColor = "";
                seleccion[i].style.color = "";
                seleccion[i].dataset.selected = 0;
            }
 
            //Se eliminan a las filas seleccionadas del arreglo
            seleccion.length = 0;
        }
    };
    
//Cuando se produzca el evento "click" en la primera tabla, se ejecutará la función "callback"
oneTbody.addEventListener("click", seleccionar, false);
 
//Cuando se pulse el botón, se ejecutará el siguiente conjunto de instrucciones
copy.addEventListener("click", copiar, false);
 

DEMO

Hay algunas líneas de código que pueden optimizarse. Lo he dejado tal cual para que pueda entenderse en un nivel más básico debido a que más personas lo verán, pero puedes modificar el script a tu gusto y conveniencia.

[jacajob]

Estimado muchas gracias me sirvió, coloque el primero en un modal y lleva los datos al otro tabla sin ningún problema.
también le coloque un botón para poder eliminar en el caso de agregar algún incorrecto.

Luego le muestro el código, para cualquier observación de su parte.

[jacajob]

Estimado como puedo hacer para que ya aparezcan marcadas o que se marquen todas con algún método, para des-seleccionar las que no se necesiten y pasar las que queden marcadas

[Alexis88]

Si deseas seleccionar automáticamente todas las filas, tendrías que utilizar el bloque de instrucciones de la estructura if dentro de un bucle que recorra a todas las filas para que así se seleccione cada una. Podrías colocar todo eso en una función que se ejecutaría luego de cargar el DOM.

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    var filas = document.querySelectorAll("#one tbody tr");
 
    [].forEach.call(filas, function(fila){
        fila.style.backgroundColor = "red";
        fila.style.color = "white";
        fila.dataset.selected = 1;
        seleccion.push(fila);
    });
});
 

El arreglo seleccion es el mismo del ejemplo anterior. Este último ejemplo tendría que ser añadido al anterior.