How to change text of an html table according to the result

Question

I am making a table in html and wanted to change all texts according to a result.

For example: If in the table it appears as 1 it means that it is in use, then make the change and replace the number 1 and put it into use, and if it appears as 0 it is available.

The live code

$(document).ready(function(){

$("td.select:contains('1')").css("background","red");
$("td.select:contains('0')").css("border-bottom","1px solid green");

$("td.select:contains('0')").css("background","green");
$("td.select:contains('0')").css("border-bottom","1px solid green");

});

body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.25;
}

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
			<tbody><tr style="height: 45px; display: table-row;">
				<th width="50">ID</th>
				<th>E-mail</th>
				<th>Senha</th>
				<th>Chave</th>
				<th>Pergunta Secreta</th>
				<th style="width:100px;">Quant. Usuários</th>
				<th width="100">Editar</th>
			</tr>

			
			<tr style="display: table-row;">
				<td>1697</td>
				<td>[email protected]</td>
				<td>0798RD7Fdg</td>
				<td>V6BH9-NBJGJ-PP9RM-WJ</td>
				<td>dGBD7der6FV</td>
				<td class="select">0</td>
				<td>
					<div class="btn-group">
						<a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
							Editar
							<span class="caret"></span>
						</a>
						<ul class="dropdown-menu">
							<li>
								<a href="editar.php?codusuario=1697"><i class="icon-pencil"></i> Editar</a>
								<a class="remover" href="remover.php?codusuario=1697"><i class="icon-trash"></i> Remover</a>
							</li>
						</ul>
					</div>
				</td>
			</tr><tr style="display: table-row;">
				<td>1698</td>
				<td>[email protected]</td>
				<td>gadygsadysadsa</td>
				<td>Ativada</td>
				<td>lol</td>
				<td class="select">0</td>
				<td>
					<div class="btn-group">
						<a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
							Editar
							<span class="caret"></span>
						</a>
						<ul class="dropdown-menu">
							<li>
								<a href="editar.php?codusuario=1698"><i class="icon-pencil"></i> Editar</a>
								<a class="remover" href="remover.php?codusuario=1698"><i class="icon-trash"></i> Remover</a>
							</li>
						</ul>
					</div>
				</td>
			</tr><tr style="display: table-row;">
				<td>1699</td>
				<td>[email protected]</td>
				<td>comprador</td>
				<td>Ativada</td>
				<td>ha9d7293dsas</td>
				<td class="select">0</td>
				<td>
					<div class="btn-group">
						<a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
							Editar
							<span class="caret"></span>
						</a>
						<ul class="dropdown-menu">
							<li>
								<a href="editar.php?codusuario=1699"><i class="icon-pencil"></i> Editar</a>
								<a class="remover" href="remover.php?codusuario=1699"><i class="icon-trash"></i> Remover</a>
							</li>
						</ul>
					</div>
				</td>
			</tr><tr style="display: table-row;">
				<td>1700</td>
				<td>[email protected]</td>
				<td>comprador</td>
				<td>6997438036</td>
				<td>comprador</td>
				<td class="select">0</td>
				<td>
					<div class="btn-group">
						<a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
							Editar
							<span class="caret"></span>
						</a>
						<ul class="dropdown-menu">
							<li>
								<a href="editar.php?codusuario=1700"><i class="icon-pencil"></i> Editar</a>
								<a class="remover" href="remover.php?codusuario=1700"><i class="icon-trash"></i> Remover</a>
							</li>
						</ul>
					</div>
				</td>
			</tr><tr style="display: table-row;">
				<td>1701</td>
				<td>[email protected]</td>
				<td>comprador</td>
				<td>7311697876</td>
				<td>07U90J0DJ0msds</td>
				<td class="select">0</td>
				<td>
					<div class="btn-group">
						<a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
							Editar
							<span class="caret"></span>
						</a>
						<ul class="dropdown-menu">
							<li>
								<a href="editar.php?codusuario=1701"><i class="icon-pencil"></i> Editar</a>
								<a class="remover" href="remover.php?codusuario=1701"><i class="icon-trash"></i> Remover</a>
							</li>
						</ul>
					</div>
				</td>
			</tr><tr style="display: table-row;">
				<td>1702</td>
				<td>[email protected]</td>
				<td>9u2j907syua0d823</td>
				<td>B6J9-G4Q7-R7R7</td>
				<td>203uj0dsa8023</td>
				<td class="select">0</td>
				<td>
					<div class="btn-group">
						<a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
							Editar
							<span class="caret"></span>
						</a>
						<ul class="dropdown-menu">
							<li>
								<a href="editar.php?codusuario=1702"><i class="icon-pencil"></i> Editar</a>
								<a class="remover" href="remover.php?codusuario=1702"><i class="icon-trash"></i> Remover</a>
							</li>
						</ul>
					</div>
				</td>
			</tr><tr style="display: table-row;">
				<td>1703</td>
				<td>[email protected]</td>
				<td>0u2j08dsad0923</td>
				<td>B9B9-J3B9-M7C8</td>
				<td>923hda7sd923</td>
				<td class="select">0</td>
				<td>
					<div class="btn-group">
						<a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
							Editar
							<span class="caret"></span>
						</a>
						<ul class="dropdown-menu">
							<li>
								<a href="editar.php?codusuario=1703"><i class="icon-pencil"></i> Editar</a>
								<a class="remover" href="remover.php?codusuario=1703"><i class="icon-trash"></i> Remover</a>
							</li>
						</ul>
					</div>
				</td>
			</tr><tr style="display: table-row;">
				<td>1696</td>
				<td>[email protected]</td>
				<td>i9kI8SUhnd7gtBS</td>
				<td>N64RC-4F927-6YY6K-T9</td>
				<td>0U99hy9dysdh9sn</td>
				<td class="select">1</td>
				<td>
					<div class="btn-group">
						<a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
							Editar
							<span class="caret"></span>
						</a>
						<ul class="dropdown-menu">
							<li>
								<a href="editar.php?codusuario=1696"><i class="icon-pencil"></i> Editar</a>
								<a class="remover" href="remover.php?codusuario=1696"><i class="icon-trash"></i> Remover</a>
							</li>
						</ul>
					</div>
				</td>
			</tr>		</tbody></table>

Answer 1

You can use the .html() on the same selector:

$(document).ready(function() {

  $("td.select:contains('1')").css("background", "red");
  $("td.select:contains('0')").css("border-bottom", "1px solid green");

  $("td.select:contains('0')").css("background", "green");
  $("td.select:contains('0')").css("border-bottom", "1px solid green");

  $("td.select:contains('1')").html('Ativa');
  $("td.select:contains('0')").html('Inativa');
});

body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.25;
}

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table caption {
    font-size: 1.3em;
  }
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  table td:last-child {
    border-bottom: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr style="height: 45px; display: table-row;">
      <th width="50">ID</th>
      <th>E-mail</th>
      <th>Senha</th>
      <th>Chave</th>
      <th>Pergunta Secreta</th>
      <th style="width:100px;">Quant. Usuários</th>
      <th width="100">Editar</th>
    </tr>
    <tr style="display: table-row;">
      <td>1697</td>
      <td>[email protected]</td>
      <td>0798RD7Fdg</td>
      <td>V6BH9-NBJGJ-PP9RM-WJ</td>
      <td>dGBD7der6FV</td>
      <td class="select">0</td>
      <td>
        <div class="btn-group">
          <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
							Editar
							<span class="caret"></span>
						</a>
          <ul class="dropdown-menu">
            <li>
              <a href="editar.php?codusuario=1697"><i class="icon-pencil"></i> Editar</a>
              <a class="remover" href="remover.php?codusuario=1697"><i class="icon-trash"></i> Remover</a>
            </li>
          </ul>
        </div>
      </td>
    </tr>
    <tr style="display: table-row;">
      <td>1698</td>
      <td>[email protected]</td>
      <td>gadygsadysadsa</td>
      <td>Ativada</td>
      <td>lol</td>
      <td class="select">0</td>
      <td>
        <div class="btn-group">
          <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
							Editar
							<span class="caret"></span>
						</a>
          <ul class="dropdown-menu">
            <li>
              <a href="editar.php?codusuario=1698"><i class="icon-pencil"></i> Editar</a>
              <a class="remover" href="remover.php?codusuario=1698"><i class="icon-trash"></i> Remover</a>
            </li>
          </ul>
        </div>
      </td>
    </tr>
    <tr style="display: table-row;">
      <td>1699</td>
      <td>[email protected]</td>
      <td>comprador</td>
      <td>Ativada</td>
      <td>ha9d7293dsas</td>
      <td class="select">0</td>
      <td>
        <div class="btn-group">
          <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
							Editar
							<span class="caret"></span>
						</a>
          <ul class="dropdown-menu">
            <li>
              <a href="editar.php?codusuario=1699"><i class="icon-pencil"></i> Editar</a>
              <a class="remover" href="remover.php?codusuario=1699"><i class="icon-trash"></i> Remover</a>
            </li>
          </ul>
        </div>
      </td>
    </tr>
    <tr style="display: table-row;">
      <td>1700</td>
      <td>[email protected]</td>
      <td>comprador</td>
      <td>6997438036</td>
      <td>comprador</td>
      <td class="select">0</td>
      <td>
        <div class="btn-group">
          <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
							Editar
							<span class="caret"></span>
						</a>
          <ul class="dropdown-menu">
            <li>
              <a href="editar.php?codusuario=1700"><i class="icon-pencil"></i> Editar</a>
              <a class="remover" href="remover.php?codusuario=1700"><i class="icon-trash"></i> Remover</a>
            </li>
          </ul>
        </div>
      </td>
    </tr>
    <tr style="display: table-row;">
      <td>1701</td>
      <td>[email protected]</td>
      <td>comprador</td>
      <td>7311697876</td>
      <td>07U90J0DJ0msds</td>
      <td class="select">0</td>
      <td>
        <div class="btn-group">
          <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
							Editar
							<span class="caret"></span>
						</a>
          <ul class="dropdown-menu">
            <li>
              <a href="editar.php?codusuario=1701"><i class="icon-pencil"></i> Editar</a>
              <a class="remover" href="remover.php?codusuario=1701"><i class="icon-trash"></i> Remover</a>
            </li>
          </ul>
        </div>
      </td>
    </tr>
    <tr style="display: table-row;">
      <td>1702</td>
      <td>[email protected]</td>
      <td>9u2j907syua0d823</td>
      <td>B6J9-G4Q7-R7R7</td>
      <td>203uj0dsa8023</td>
      <td class="select">0</td>
      <td>
        <div class="btn-group">
          <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
							Editar
							<span class="caret"></span>
						</a>
          <ul class="dropdown-menu">
            <li>
              <a href="editar.php?codusuario=1702"><i class="icon-pencil"></i> Editar</a>
              <a class="remover" href="remover.php?codusuario=1702"><i class="icon-trash"></i> Remover</a>
            </li>
          </ul>
        </div>
      </td>
    </tr>
    <tr style="display: table-row;">
      <td>1703</td>
      <td>[email protected]</td>
      <td>0u2j08dsad0923</td>
      <td>B9B9-J3B9-M7C8</td>
      <td>923hda7sd923</td>
      <td class="select">0</td>
      <td>
        <div class="btn-group">
          <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
							Editar
							<span class="caret"></span>
						</a>
          <ul class="dropdown-menu">
            <li>
              <a href="editar.php?codusuario=1703"><i class="icon-pencil"></i> Editar</a>
              <a class="remover" href="remover.php?codusuario=1703"><i class="icon-trash"></i> Remover</a>
            </li>
          </ul>
        </div>
      </td>
    </tr>
    <tr style="display: table-row;">
      <td>1696</td>
      <td>[email protected]</td>
      <td>i9kI8SUhnd7gtBS</td>
      <td>N64RC-4F927-6YY6K-T9</td>
      <td>0U99hy9dysdh9sn</td>
      <td class="select">1</td>
      <td>
        <div class="btn-group">
          <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
							Editar
							<span class="caret"></span>
						</a>
          <ul class="dropdown-menu">
            <li>
              <a href="editar.php?codusuario=1696"><i class="icon-pencil"></i> Editar</a>
              <a class="remover" href="remover.php?codusuario=1696"><i class="icon-trash"></i> Remover</a>
            </li>
          </ul>
        </div>
      </td>
    </tr>
  </tbody>
</table>