Cómo actualizar una tabla HTML automáticamente según la opción de opción de selección de HTML del usuario

Digamos que su tabla contiene una lista de todos los miembros de la base de datos. Ahora, en su menú desplegable de selección, tiene opciones, digamos miembro activo, miembro inactivo y ex miembro.

Cambios en la interfaz de usuario : cuando el usuario selecciona la opción Activa en el menú desplegable de selección, la tabla debe actualizarse y llenarse solo de miembros activos.

Detrás de escena: en el elemento del menú desplegable, escriba un evento javascript onChange y pase el valor de la opción como parámetro dentro de las funciones onChange. Ejemplo:

Seleccionar
Miembro activo
Miembro inactivo
Ex miembro

En javascript statusChange(value) tendrá la funcionalidad mencionada a continuación

estado de la funciónCambio (valor) {
// Llama a la función ajax
// Pase el valor al script del lado del servidor
// El servidor devolverá los datos del miembro de actualización
// Añadir los datos devueltos al cuerpo de la tabla
}

Puede consultar ¿Cómo actualizar una tabla HTML a través de una llamada AJAX?

Si desea hacerlo a través de PHP (si eso es lo que está utilizando) sin Javascript, coloque la selección en un formulario, haga una devolución de datos y extraiga la selección y realice una nueva consulta SQL basada en esos datos y renderice la tabla.

Algo así (excluyendo todo lo que no esté relacionado específicamente con esto):

$ fieldfilter = $ _GET [‘fieldfilter’];
?>

// Realizar consulta, etc.

Agregue también un mecanismo para que se seleccione el valor actual en la selección. Lo resolverás. Siempre genero selecciones del código PHP, que establece automáticamente el valor actual, etc.

¿Puedes escribir algunos javascript?

La idea es que le dé a cada fila de la tabla un respeto de clase a la opción desplegable de selección a la que pertenece. Y maneje el evento onchange del menú desplegable de selección. En la función de controlador, muestra todas las filas que pertenecen a esa opción seleccionada y oculta todas las demás filas que pertenecen a otras categorías

Pruebe RE: DOM: Tiny (2 KB) biblioteca de JavaScript con turbocompresor para crear interfaces de usuario