Tironemota

▲
Javascript

Códigos Javascript
14/05/2023

  • Columna 2

Buscar contenido en una tabla con función Javascript 14/05/2023

Buscar:
Columna 1Columna 2
UnoPrimero
DosSegundo
TresTercero
 
<div class="buscadorTablaJs">
    <div>
        Buscar: <input id="buscarPalabra" type="text" placeholder="Texto a buscar ..." onkeyup="aBuscar()" />
    </div>
    <table id="tablaDatos">
        <thead>
            <tr><th>Columna 1</th><th>Columna 2</th></tr>
        </thead>
        <tbody>
            <tr><td>Uno</td><td>Primero</td></tr>
            <tr><td>Dos</td><td>Segundo</td></tr>
            <tr><td>Tres</td><td>Tercero</td></tr>
        </tbody>
        <tfoot>
            <tr class='noBuscar hide'><td colspan="2"></td></tr>
        </tfoot>
    </table>
</div>

colspan="2": La celda ocupará dos columnas

.buscadorTablaJs{margin:2rem auto;border:1px solid #D4D2D2;border-radius:10px;width:80%;padding:20px;box-shadow:5px 5px 12px black}
.buscadorTablaJs>div,
.buscadorTablaJs>div>input{font-size: 1.5rem;}
.buscadorTablaJs>div{font-weight: bold;text-align: center;}
.buscadorTablaJs>table{margin:2rem auto;width: 100%;}
.buscadorTablaJs>table th{background: #535353;color: #fff;font-size: 1.2rem;text-transform:uppercase;}
.buscadorTablaJs>table tbody tr:nth-child(even){background: #ededfb;}
.buscadorTablaJs>table tbody tr:hover{background: #dcf8df;}
.buscadorTablaJs>table tbody td{padding: 5px;}
.noBuscar{font-size:1.5rem;font-weight: bold;}
.hide {display:none;}
.red{color: #F00;}
function aBuscar()
{
    const tableReg = document.getElementById('tablaDatos');
    const searchText = document.getElementById('buscarPalabra').value.toLowerCase();
    let total = 0;
    // Recorremos todas las filas con contenido de la tabla
    for (let i = 1; i < tableReg.rows.length; i++) {
        // Si el td tiene la clase "noBuscar" no se busca en su contenido
        if (tableReg.rows[i].classList.contains("noBuscar")) {
            continue;
        }
        let found = false;
        const cellsOfRow = tableReg.rows[i].getElementsByTagName('td');
        // Recorremos todas las celdas
        for (let j = 0; j < cellsOfRow.length && !found; j++) {
            const compareWith = cellsOfRow[j].innerHTML.toLowerCase();
            // Buscamos el texto en el contenido de la celda
            if (searchText.length == 0 || compareWith.indexOf(searchText) > -1) {
                found = true;
                total++;
            }
        }
        if (found) {
            tableReg.rows[i].style.display = '';
        } else {
            // si no ha encontrado ninguna coincidencia, esconde la
            // fila de la tabla
            tableReg.rows[i].style.display = 'none';
        }
    }
    // mostramos las coincidencias
    const lastTR=tableReg.rows[tableReg.rows.length-1];
    const td=lastTR.querySelector("td");
    lastTR.classList.remove("hide", "red");
    if (searchText == "") {
        lastTR.classList.add("hide");
    } else if (total) {
        td.innerHTML="Se ha encontrado "+total+" coincidencia"+((total>1)?"s":"");
    } else {
        lastTR.classList.add("red");
        td.innerHTML="No se han encontrado coincidencias";
    }
}
Arriba ... ⇑

Seleccionar contenido al hacer click con función Javascript(09/06/2022)

Seleccionar contenido al hacer click

Ejemplo:
====================================
<pre onclick="seleccionar(this)">Contenido</pre>
/**************************************
    SELECCIONAR CONTENIDO
    Usar: onclick="seleccionar(this)"
**************************************/
function seleccionar(obj){
	if(obj.nodeName.toLowerCase()=='textarea' || (obj.nodeName.toLowerCase()=='input' && obj.type=='text')){
		obj.select();
		return;
	}
	if (window.getSelection) { 
        var sel = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(obj);
        sel.removeAllRanges();
        sel.addRange(range);
    } 
	else if (document.selection) { 
    	document.selection.empty();
    	var range = document.body.createTextRange();
		range.moveToElementText(obj);
		range.select();
    }
}
Arriba ... ⇑

Detectar la resolución de la pantalla del usuario con Javascript(09/06/2022)

La necesidad de adaptar el contenido de una página web dependiendo del tamaño del navegador es cada vez más necesaria, por esto se vuelve importante saber como determinar las dimensiones del viewport, que no es más que el área del navegador que el usuario puede ver.

La resolución actual de tu pantalla es:

Colocar en donde lo desee. 
<div class="resolucion">
    <span id="w"></span><span id="h"></span>
</div>
.resolucion{
    background-color:#2e2d2d;
    border-radius:20px;
    color:#ffff00;
    font:4em 'Times New Roman';
    margin:auto;
    text-align:center;
    width:400px;
}
/**************************************
	RESOLUCION DE PANTALLA
**************************************/
(function() {
if (typeof(document.documentElement.clientWidth) != 'undefined') {
    var $w = document.getElementById('w'),
    $h = document.getElementById('h'),
    $ua = document.getElementById('ua');
    $w.innerHTML = document.documentElement.clientWidth;
    $h.innerHTML = ' × ' + document.documentElement.clientHeight;
    window.onresize = function(event) {
        $w.innerHTML = document.documentElement.clientWidth;
        $h.innerHTML = ' × ' + document.documentElement.clientHeight;
    };
    /*$ua.innerHTML = navigator.userAgent;*/
}
})();
Arriba ... ⇑

Mostrar Contraseña con función Javascript 16/03/2023

Ejemplo:


Ver Contraseña
<input id="inputContrasena" type="password" name="txtPassword" maxlength="20" placeholder="Contraseña" required="required"/><br>
<input type="checkbox" onclick="mostrarPassword()">Ver Contraseña<br>
<script>
function mostrarPassword(){
    var x = document.getElementById("inputContrasena");
    if (x.type==="password") {
        x.type="text";
    } else {
        x.type="password";
    }
}
</script>
Arriba ... ⇑