How to modify the values of a table td if it has a specific character?

Asked

Viewed 51 times

0

I have a table that presents dynamic data, some of them are emails, how do I modify their value by adding the tag <kbd> and </kbd> between the value of each using javascript only?

Example: [email protected]
Expected: <kbd>[email protected]</kbd>

Thus, any value that contains a @ enters the modification rule, until semdomain@config....

Dynamic table code:

<div class="tablebg">
    <table id="sortabletbl0" class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
        <tbody>
            <tr>
                <th width="20">
                    <input type="checkbox" id="checkall0">
                </th>
                <th><a href="/admin/services?orderby=id">ID</a> </th>
                <th><a href="/admin/services?orderby=product">Produto/Serviço</a></th>
                <th><a href="/admin/services?orderby=domain">Domínio</a></th>
                <th><a href="/admin/services?orderby=clientname">Nome do Cliente</a></th>
                <th><a href="/admin/services?orderby=amount">Preço</a></th>
                <th><a href="/admin/services?orderby=billingcycle">Ciclo de Pagamento</a></th>
                <th><a href="/admin/services?orderby=nextduedate">Próximo Vencimento</a></th>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="selectedclients[]" value="5" class="checkall">
                </td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=5">5</a></td>
                <td>Conta Serviço A <span class="label pending">Pending</span></td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=5">(Nenhum Domínio)</a></td>
                <td><a href="/admin/clientssummary.php?userid=1">Teste Teste</a></td>
                <td>R$0.00 BRL</td>
                <td>Gratuito</td>
                <td>-</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="selectedclients[]" value="4" class="checkall">
                </td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=4">4</a></td>
                <td>Conta Serviço A <span class="label active">Active</span></td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=4">[email protected]</a></td>
                <td><a href="/admin/clientssummary.php?userid=1">Teste Teste</a></td>
                <td>R$0.00 BRL</td>
                <td>Gratuito</td>
                <td>-</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="selectedclients[]" value="3" class="checkall">
                </td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=3">3</a></td>
                <td>Conta Serviço A <span class="label active">Active</span></td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=3">semdomain@config...</a></td>
                <td><a href="/admin/clientssummary.php?userid=1">Teste Teste</a></td>
                <td>R$0.00 BRL</td>
                <td>Gratuito</td>
                <td>-</td>
            </tr>
        </tbody>
    </table>
</div>

How could I do this, so that the result would be the same as shown below?

<div class="tablebg">
    <table id="sortabletbl0" class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
        <tbody>
            <tr>
                <th width="20">
                    <input type="checkbox" id="checkall0">
                </th>
                <th><a href="/admin/services?orderby=id">ID</a> </th>
                <th><a href="/admin/services?orderby=product">Produto/Serviço</a></th>
                <th><a href="/admin/services?orderby=domain">Domínio</a></th>
                <th><a href="/admin/services?orderby=clientname">Nome do Cliente</a></th>
                <th><a href="/admin/services?orderby=amount">Preço</a></th>
                <th><a href="/admin/services?orderby=billingcycle">Ciclo de Pagamento</a></th>
                <th><a href="/admin/services?orderby=nextduedate">Próximo Vencimento</a></th>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="selectedclients[]" value="5" class="checkall">
                </td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=5">5</a></td>
                <td>Conta Serviço A <span class="label pending">Pending</span></td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=5">(Nenhum Domínio)</a></td>
                <td><a href="/admin/clientssummary.php?userid=1">Teste Teste</a></td>
                <td>R$0.00 BRL</td>
                <td>Gratuito</td>
                <td>-</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="selectedclients[]" value="4" class="checkall">
                </td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=4">4</a></td>
                <td>Conta Serviço A <span class="label active">Active</span></td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=4"><kbd>[email protected]</kbd></a></td>
                <td><a href="/admin/clientssummary.php?userid=1">Teste Teste</a></td>
                <td>R$0.00 BRL</td>
                <td>Gratuito</td>
                <td>-</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="selectedclients[]" value="3" class="checkall">
                </td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=3">3</a></td>
                <td>Conta Serviço A <span class="label active">Active</span></td>
                <td><a href="/admin/clientsservices.php?userid=1&amp;id=3"><kbd>semdomain@config...</kbd></a></td>
                <td><a href="/admin/clientssummary.php?userid=1">Teste Teste</a></td>
                <td>R$0.00 BRL</td>
                <td>Gratuito</td>
                <td>-</td>
            </tr>
        </tbody>
    </table>
</div>
javascript html jquery

  • Dynamic table code: https://jsfiddle.net/FloridaStream/391vumzg/1/

  • 1

    I would like to understand the reason of -1, so that I can improve the issue, an explanation would be welcome, grateful.

1 answer

1


What you can do is something like this. It is to work in this case too(semdomain@config...)?

In this case this code only takes the validated emails.

$(function(){
    $("td a").each(function(){
      var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      var content = $(this).html();
      //console.log(content);
      if(re.test(String(content).toLowerCase())){
        $(this).html("<kbd>"+content+"</kbd>"); 
      }
  })

 });

  • Yeah, it’s supposed to work with @config..., because in this case there is no domain configured yet.

  • I added |(config...) the regular expression, this perfectly meets the question proposed here, I am marking as answered. If others also wish to respond, please feel free to demonstrate other means. :)

  • 1

    I’m sorry, I walked into a meeting here and I couldn’t change the code for you. I’m glad it worked out!

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.