Use greasemonkey para agregar HTML antes de la tabla

Estoy usando greasemonkey para editar una página. Necesito agregar mi propia tabla entre las dos tablas que ya están en la página y luego eliminar la segunda tabla. No hay nada que realmente distinga las dos tablas existentes, por lo que tengo problemas con la función para insertBefore.

<h3>Table 1</h3>
<table class="details" border="1" cellpadding="0" cellspacing="0">
<tbody><tr>
<th>1</th>
<td>2</td>
</tr> 
</tbody></table>

<h3>Table 2</h3>
<table class="details" border="1">
<tbody><tr>
<th>1</th>
<td>2</td>
</tr><tr>
<th>3</th>
<td>4</td>
</tr> 
</tbody></table>

He encontrado útil el siguiente código para eliminar la tabla 2, pero primero necesito agregar mi propia tabla antes de la tabla 2:

// find second <table> on this page 
var xpathResult = document.evaluate('(//table[@class="details"])[2]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
var node=xpathResult.singleNodeValue;

// now hide it :)
node.style.display='none'; 

preguntado el 08 de enero de 11 a las 23:01

1 Respuestas

Esta es una buena oportunidad para presentar jQuery. jQuery será muy útil para las otras cosas que hará su script GM, además, es robusto y compatible con varios navegadores (para reutilizar su código).

(1) Agregue esta línea a la sección de metadatos Greasemonkey, después de // @include directiva (s):

// @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

(Tenga en cuenta que es posible que deba desinstalar y luego volver a instalar el script para copiar jQuery).

(2) Luego puede usar este código para agregar su tabla y eliminar la anterior:

//--- Get the 2nd table with class "details".
var jSecondTable    = $("table.details:eq(1)");

//--- Insert my table before it.
jSecondTable.before 
(
    '<table id="myTable">'
  + '    <tr>'
  + '        <th></th>'
  + '        <th></th>'
  + '    </tr>'
  + '    <tr>'
  + '        <td></td>'
  + '        <td></td>'
  + '    </tr>'
  + '</table>'
);

//--- Delete the undesired table.
jSecondTable.remove ();

/*--- Alternately, just hide the undesired table.
jSecondTable.hide ();
*/


Puede ver una versión de este código, en acción, en jsFiddle.


Método alternativo para agregar su tabla: menos sencillo pero no requiere todas las comillas:

jSecondTable.before ( (<><![CDATA[
    <table id="myTable">
        <tr>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
    ]]></>).toString ()
);

Respondido el 09 de enero de 11 a las 04:01

Eso es brillante. El segundo método lo hace muy fácil. ¡Muchas gracias! - JB

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.