Style sheet in input

Question

Style sheet in input

Asked 4 years, 10 months ago

Viewed 31 times

-2

I have a table with several columns and rows I want to put a red border indicating where the user can type in case the limit would be age. I have been able to count how many times the header class appears, but I want to take this number and pass in the class "line1" only to put the edge to where the age is

$(".nome").on("keyup", function () {
       var i = $('.nome).index(this);
         if ($(".codigo").eq(i).val().length > 0) {
           var j = i + 1;
           var linha = '.linha' + j;

           $(linha).each(function () {
             $(linha).addClass('bordavermelha');
           });

        } else {
          var j = i + 1;
          var linha = '.linha' + j;

          $(linha).each(function () {
              $(linha).removeClass('bordavermelha');
          });
        }
    });

<table>
      <tr>
        <td class="cabecalho">Id</td>
        <td class="cabecalho">Nome</td>
        <td class="cabecalho">Idade</td>        
        <td class="cabecalho">Função</td>
        <td class="cabecalho">tempo</td>
      </tr>
      <tr>
        <td>1</td>
        <td><input class='nome' id="nome" value=""></td>
        <td><input class='linha1' id="idade" value=""></td>
        <td><input class='linha1' id="funcao" value=""></td>
        <td><input class='linha1' id="tempo" value=""></td>
      </tr>
      <tr>
        <td>2</td>
        <td><input class='nome' id="nome" value=""></td>
        <td><input class='linha2' id="idade" value=""></td>
        <td><input class='linha2' id="funcao" value=""></td>
        <td><input class='linha2' id="tempo" value=""></td>
      </tr>
      <tr>
        <td>3</td>
        <td><input class='nome' id="nome" value=""></td>
        <td><input class='linha3' id="idade" value=""></td>
        <td><input class='linha3' id="funcao" value=""></td>
        <td><input class='linha3' id="tempo" value=""></td>
      </tr>
    </table>

found what I needed https://api.jquery.com/each/ &#Xa

– cahm

2019/12/30 at 15:15

1 answer

Browser other questions tagged jquery

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

by Pedro Costa • **503** points · Answer 1 · 2019-12-30T13:48:46+00:00

You weren’t very clear in your question, I don’t know if I understood, but see if this is it:

CSS and HTML:

	table {
	  border-collapse: collapse;
	}

	tr:hover {
	  border: 2px solid blue;
	}

	.borda-vermelha {
	  border: 2px solid red;
	}

	td:hover {
	  border: 2px solid gray;
	}

<!DOCTYPE html>
<html>

  <head>
    <title>Teste</title>
  </head>

  <body>

    <table class="linhavermelha">
      <tr>
        <td class="cabecalho">Id</td>
        <td class="cabecalho">Nome</td>
        <td class="cabecalho">Idade</td>
        <td class="cabecalho">Função</td>
        <td class="cabecalho">tempo</td>
      </tr>

      <tr>
        <td>1</td>
        <td><input class='nome borda-vermelha' id="nome" value=""></td>
        <td><input class="linha1 borda-vermelha" id="idade" value=""></td>
        <td><input class='linha1' id="funcao" value=""></td>
        <td><input class='linha1' id="tempo" value=""></td>
      </tr>
      <tr>
        <td>2</td>
        <td><input class='nome' id="nome" value=""></td>
        <td><input class='linha2' id="idade" value=""></td>
        <td><input class='linha2' id="funcao" value=""></td>
        <td><input class='linha2' id="tempo" value=""></td>
      </tr>
      <tr>
        <td>3</td>
        <td><input class='nome' id="nome" value=""></td>
        <td><input class='linha3' id="idade" value=""></td>
        <td><input class='linha3' id="funcao" value=""></td>
        <td><input class='linha3' id="tempo" value=""></td>
      </tr>
    </table>

  </body>

</html>

Not related to question, but you have several elements where you have the same "id":

<td><input class='linha1' **id="idade"** value=""></td>
<td><input class='linha2' **id="idade"** value=""></td>
<td><input class='linha3' **id="idade"** value=""></td>