Foros del Web - Ver Mensaje Individual

Jesijames · #4 (**permalink**) 25/09/2010, 12:19

Cita:

Iniciado por Adler

Hola

Este es de @panino

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script>
String.prototype.preg_quote=function(){
    p= /([:.\+*?[^\]$(){}=!<>|:)])/g;
    return this.replace(p,"\\$1");
}
function buscar(cadena){
       resetear();
    if(!cadena.length)return;
    var info3;
    cadena=cadena.preg_quote();
    var patron=new RegExp(cadena+'(?!\}\})','gim');
    var espacio=/^\s$/;
    var el=document.getElementById('tabla').getElementsByTagName('*');
   for(var ii=0;ii<el.length;ii++){
        if(el[ii].hasChildNodes && el[ii].nodeName.toLowerCase()!='title' && el[ii].nodeName.toLowerCase()!='script' && el[ii].nodeName.toLowerCase()!='meta' && el[ii].nodeName.toLowerCase()!='link' && el[ii].nodeName.toLowerCase()!='style'){
            var tt=el[ii].childNodes;
            for(var jj in tt){
                if(tt[jj].nodeType==3 && !espacio.test(tt[jj].nodeValue)){
                    patron.lastIndex = 0;
                    if(info3=patron.exec(tt[jj].nodeValue)){
                        tt[jj].nodeValue=tt[jj].nodeValue.replace(patron,'{{'+tt[jj].nodeValue.substr(info3['index'],cadena.length)+'}}');
                
                    }
                }
 
            }        
        }
    }
   document.getElementById('tabla').innerHTML=document.getElementById('tabla').innerHTML.split('}}').join('</span>').split('{{').join('<span style="background-color: yellow">');
    
}
function resetear(){
    document.getElementById('tabla').innerHTML=original;
}
window.onload=function(){
    original=document.getElementById('tabla').innerHTML;
}
</script>
</head>
 
<body>
<form id="form1" name="form1" method="post" action="">
  <input name="key" type="text" id="key" onkeyup="buscar(this.value)" />
  <br />
  <div id="tabla">
  <table width="300" border="1" cellpadding="1" >
    
    <tr>
      <td>Pepe</td>
      <td>López</td>
    </tr>
    <tr>
      <td>José</td>
      <td>San Martín </td>
    </tr>
  </table>
  </div>
</form>
</body>
</html>

y este otro es mio

Código Javascript:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
<head>
<meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
<script type="text/javascript">
var cadena = '';
var largo_cadena = 0;
 
window.onload = function() {cadena = document.getElementById('texto').innerHTML; largo_cadena = cadena.length;};
 
function Resaltar(cadABuskar) {
var caracteresInput = cadABuskar.length;
 
    if (caracteresInput == 2) {
        document.getElementById('texto').innerHTML = cadena;
        document.getElementById('terminos').style.border = '';
 
    } else if (caracteresInput >= 3) {
 
var rgEx = new RegExp(cadABuskar, 'g\i');
 
        if (rgEx.test(cadena.substr(0,parseInt(largo_cadena)))) {
                var marca = cadena.substr(0,parseInt(largo_cadena)).replace(rgEx, function(coincidencia){return '<span style=\"background-color:#9ACD32;color:#FFF;\">' + coincidencia + '</span>';}); 
                    document.getElementById('texto').innerHTML =  marca;
            document.getElementById('terminos').style.border = 'solid #9ACD32 1px';
            } else {
            document.getElementById('texto').innerHTML = cadena;
            document.getElementById('terminos').style.border = 'solid #FF0000 1px';
        }
    }
}
</script>
</head>
<body>
<form method="post" action="" name="" autocomplete="off">
Buscar Terminos: <input type="text" value="" id="terminos" onkeyup="Resaltar(this.value);" />
</form>
<div id="texto">
<table width="300" border="1" cellpadding="1" >
    
    <tr>
      <td>Pepe</td>
      <td>López</td>
    </tr>
    <tr>
      <td>José</td>
      <td>San Martín </td>
    </tr>
  </table>
</div>
</body>
</html>

Suerte

En la <table> que pusiste yo cambié los contenidos y puse 2 radiobuttons: ¿Como puedo hacer para que dentro de las opciones de busqueda aparezca una busqueda distinta en función de la opcion que se elija de cualquiera de los 2 fadiobuttons ?