web-dev-qa-db-fra.com

Insérer un lien avec CSS

Je suis maintenue à la main un document HTML et je cherche un moyen d'insérer automatiquement un lien autour du texte dans une table. Laissez-moi illustrer:

<table><tr><td class="case">123456</td></tr></table>

Je voudrais effectuer automatiquement chaque texte dans un TD avec la classe "case" un lien vers ce cas dans notre système de suivi de bogues (qui, incidemment, est Fogbugz).

Je voudrais donc que "123456" soit changé en un lien de ce formulaire:

<a href="http://bugs.example.com/fogbugz/default.php?123456">123456</a>

Est-ce possible? J'ai joué avec les: avant et: après pseudo-éléments, mais il ne semble pas y avoir un moyen de répéter le numéro de cause.

htmlhyperlinkfogbugz
15
Schof

Pas de manière à travailler sur les navigateurs. Vous pourriez cependant faire cela avec un javascript relativement trivial ..

function makeCasesClickable(){
    var cells = document.getElementsByTagName('td')
    for (var i = 0, cell; cell = cells[i]; i++){
        if (cell.className != 'case') continue
        var caseId = cell.innerHTML
        cell.innerHTML = ''
        var link = document.createElement('a')
        link.href = 'http://bugs.example.com/fogbugz/default.php?' + caseId
        link.appendChild(document.createTextNode(caseId))
        cell.appendChild(link)
    }
}

Vous pouvez l'appliquer avec quelque chose comme onload = makeCasesClickable, ou simplement l'inclure juste à la fin de la page.

13
Dan

voici une solution jQuery Solution spécifique à votre HTML affiché:

$('.case').each(function() {
  var link = $(this).html();
  $(this).contents().wrap('<a href="example.com/script.php?id='+link+'"></a>');
});

en substance, sur chaque élément .Case, prendra le contenu de l'élément et les jeter dans un lien enroulé autour de lui.

10
Owen

Pas possible avec CSS, plus ce n'est pas ce que CSS est pour une autre manière. JavaScript ou côté serveur côté client (insérer la langue de choix) est la voie à suivre.

4
da5id

Je ne pense pas que ce soit possible avec CSS. CSS n'est censé affecter que les looks et la mise en page de votre contenu.

Cela semble être un travail pour A PHP script (ou une autre langue). Vous n'avez pas donné suffisamment d'informations pour que je sache la meilleure façon de le faire, mais peut-être quelque chose comme ça:

function case_link($id) {
    return '<a href="http://bugs.example.com/fogbuz/default.php?' . $id . '">' . $id . '</a>';
}

Puis plus tard dans votre document:

<table><tr><td class="case"><?php echo case_link('123456'); ?></td></tr></table>

Et si vous souhaitez un fichier .html, exécutez simplement le script de la ligne de commande et rediriger la sortie sur un fichier .html.

1
Jeremy Ruten

Vous pourriez avoir quelque chose comme ça (en utilisant JavaScript). À l'intérieur <head>, ont

<script type="text/javascript" language="javascript">
  function getElementsByClass (className) {
    var all = document.all ? document.all :
      document.getElementsByTagName('*');
    var elements = new Array();
    for (var i = 0; i < all.length; i++)
      if (all[i].className == className)
        elements[elements.length] = all[i];
    return elements;
  }

  function makeLinks(className, url) {
    nodes = getElementsByClass(className);
    for(var i = 0; i < nodes.length; i++) {
      node = nodes[i];
      text = node.innerHTML
      node.innerHTML = '<a href="' + url + text + '">' + text + '</a>';
    }
  }
</script>

Et puis à la fin de <body>

<script type="text/javascript" language="javascript">
  makeLinks("case", "http://bugs.example.com/fogbugz/default.php?");
</script>

Je l'ai testé et ça marche bien.

0
Vincent McNabb