1

estoy siguiendo una guía para crear una vista PHP donde subo un archivo Excel y este me los muestra en una tabla HTML utilizando JavaScript. todo va bien hasta que se me ocurrió poder personalizar una de las columnas para destacarla de las demás y posterior imprimir desde el navegador. sucede que estoy intentando seleccionar la primera columna, pero no le encuentro como hacerle.

agradecería su gran ayuda de indicarme como puedo seleccionar la columna para posterior aplicar estilos css.

esta es la vista de un archivo excel ya cargado en el HTML, la columna que quiero personalizar es la columna Cod

Este es el etiquetado HMTL y el script empleado para completar la accion

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Convertir Excel en HTML</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/xlsx.full.min.js"></script>

    <link rel="stylesheet" href="style.css">

    <link href="http://fonts.cdnfonts.com/css/ccode39" rel="stylesheet">


</head>
<body>

    <div class="container">
        <h2 class="text-center mt-4 mb-4">Convertir Excel en HTML </h2>

        <div class="card">
            <div class="card-header">Seleccione archivo Excel</div>
            <div class="card-body">
                <input type="file" id="excel_file" />

            </div>
        </div>

    </div>

    <div id="datos">

        <div id="excel_data" class="mt-1"></div>

    </div>

    <script>
    const excel_file = document.getElementById('excel_file');

    excel_file.addEventListener('change', (event) => {

    if(!['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'].includes(event.target.files[0].type))
    {
        document.getElementById('excel_data').innerHTML = '<div class="alert alert-danger">Only .xlsx or .xls file format are allowed</div>';

        excel_file.value = '';

        return false;
    }

    var reader = new FileReader();

    reader.readAsArrayBuffer(event.target.files[0]);

    reader.onload = function(event){

        var data = new Uint8Array(reader.result);

        var work_book = XLSX.read(data, {type:'array'});

        var sheet_name = work_book.SheetNames;

        var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], {header:1});

        if(sheet_data.length > 0)
        {
            var table_output = '<table class="table" style="table-layout:none" border="1">';
            
            for(var row = 0; row < sheet_data.length; row++)
            {
                table_output += '<tr class="thead-dark">';
                for(var cell = 0; cell < sheet_data[row].length; cell++)
                {
                    if(row == 0)
                    {
                        table_output += '<th>'+sheet_data[row][cell]+'</th>';
                    }
                    else
                    {
                        table_output += '<td>'+sheet_data[row][cell]+'</td>';
                        
                    }
                }
                table_output += '</tr>';
            }
            table_output += '</table>';

            document.getElementById('excel_data').innerHTML = table_output;
        }
        excel_file.value = '';
    }

    });
</script>
</body>
</html>

les agradezco de antemano Saludos

2
  • 1
    En este bloque: else { table_output += '<td>'+sheet_data[row][cell]+'</td>'; } puedes agregar otro if, algo así: else { if (cell == 0) { //aquí poner al td el estilo que quieras } else { table_output += '<td>'+sheet_data[row][cell]+'</td>';} }
    – A. Cedano
    Commented el 14 jul. 2022 a las 3:28
  • Excelente ahora si. Muchas Gracias. Podrias poner tu comentario como respuesta. para aceptarla como solucion. Commented el 14 jul. 2022 a las 3:46

2 respuestas 2

1

En este bloque:

                else
                {
                    table_output += '<td>'+sheet_data[row][cell]+'</td>';
                    
                }

puedes agregar otro if, algo así:

                else
                {
                    if (cell == 0) {
                        //aquí poner al td el estilo que quieras
                    } else {
                        table_output += '<td>'+sheet_data[row][cell]+'</td>';
                    }                        
                }

O, puedes hacerlo con un ternario, en vez del if, algo así:

table_output += (cell == 0) ? "aquí td cuando sea la 1ª columna" : '<td>'+sheet_data[row][cell]+'</td>';
0

Si no tienes como aplicar un formato a las celdas de la tabla desde su creación, entonces tendrás que hacerlo después de creada, recorriendo fila por fila y aplicándole el estilo a la celda que necesites de cada una de las filas. Te dejo un enlace donde se explica como recorrer la tabla.

Como recorrer una tabla de HTML con JAVASCRIPT

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.