You had unexpected behavior on line document.querySelector('.end_text').innerHTML = end_novo;
because this command returns only the first element that matches to (in this case the first row of the table). To do what you want (apply some styles with javascript to all rows) you need to use the querySelectorAll function that as expected returns all elements that match the searched selector (and can be traversed with a for loop).
Moving on to the solution. I took the liberty of modifying your logic a little. Instead of getting the first 120 letters of <div class="end_text">
and replacing it inside the div itself (remove the previous contents and put only the first 120 letters), I created a new div called abstract, and it was placed the 120 letters (without content of <div class="end_text">
). Your <td class="end">
looks like this:
<td class="end">
<div class="end_text">
É um fato conhecido de todos que um leitor
se distrairá com o conteúdo de texto legível de uma página quando estiver
examinando sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma
distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo
aqui", fazendo com que ele tenha uma aparência similar a de um texto
legível. Muitos softwares de publicação e editores de páginas na internet
agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por '
lorem ipsum' mostra vários websites ainda em sua fase de construção. Várias
versões novas surgiram ao longo dos anos, eventualmente por acidente, e às
vezes de propósito (injetando humor, e coisas do gênero).
</div>
<div class="resumo">
</div>
<div class="icone" style="position: absolute;left: 250px; top: 50px; display: none; cursor: pointer;">
<i onclick="fechareabrir(this)" class="glyphicon glyphicon-chevron-down"></i>
</div>
<div class="icone2" style="position: absolute;left: 250px; bottom: 5px; display: none; cursor: pointer;">
<i onclick="fechareabrir(this)" class="glyphicon glyphicon-chevron-up"></i>
</div>
</td>
The summary div was added to avoid having to store the old content of the div end_text with javascript. This is a very simple way to do this, but I'm not sure how to do this, but I'm not sure how to do this. with this it identifies the clicked object, or rather, in this case the element that calls the fechareabrir(this)
function). The JavaScript to populate the summary div and hide the end_text div is as follows (few changes from yours!):
//retorna todos os elementos com a classe .end_text
var ends = document.querySelectorAll('.end_text');
var end = 0;
for(var i = 0; i < ends.length; i++){
//pega o conteudo de cada div com a classe .end_text
end = ends[i].textContent;
if(end.length > 120){
var end_novo = end.substring(0,120);
ends[i].parentElement.querySelector('.icone').style.display = "block";
//oculta a div com a classe .end_text
ends[i].style.display = "none";
//coloca parte do texto da div com a classe .end_text na div resumo
ends[i].parentElement.querySelector('.resumo').innerHTML = end_novo;
ends[i].parentElement.querySelector('.resumo').style.display = "block";
}
}
The main change over your code was the use of the fecharabrir()
property used to return the parent of an (immediately above in the DOM).
The functions parentElement
, fecharabrir
and abrir
have undergone some changes (commented in the code):
function fechareabrir(elemento){
//a variavel this representa o item clicado (argumento de fecharabrir).
//E tambem não é necessario alterar o conteudo da div .end_text
//é complicado controlar o estado de varias linhas com
//a variavel fechado, é melhor checar o display da div resumo
//a variavel elemento representa o elemento clicado
//então devemos subir (acessar elementos pais) até chegar na div .end_text
//após isso a variável elemento representa a td que possui .end_text, .resumo, .icone
elemento = elemento.parentElement.parentElement;
if(elemento.parentElement.querySelector(".resumo").style.display == "block"){
abrir(elemento);
}else{
fechar(elemento);
}
}
function abrir(elemento){
//volta a exibir a div .end_text
elemento.querySelector(".end_text").style.display = "block";
//oculta a div .resumo
elemento.querySelector(".resumo").style.display = "none";
elemento.querySelector('.icone').style.display = "none";
elemento.querySelector('.icone2').style.display = "block";
}
function fechar(elemento){
//volta a exibir a div .resumo
elemento.querySelector(".resumo").style.display = "block";
//oculta a div .end_text
elemento.querySelector(".end_text").style.display = "none";
elemento.querySelector('.icone').style.display = "block";
elemento.querySelector('.icone2').style.display = "none";
}
Below the full code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-
theme.min.css" integrity="sha384-
rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<body>
<style>
.table thead tr th {
text-align: center;
}
.table tbody tr td{
text-align: center;
vertical-align: middle;
}
.table tbody tr td.end{
position: relative;
width: 300px !important;
}
</style>
<div class="container">
<div class="col-md-10">
<table class="table table-striped table-bordered ">
<thead>
<tr>
<th>Status</th>
<th>Cliente</th>
<th>Localidade Cliente</th>
<th>Cidade/UF</th>
<th>Endereço</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ativo</td>
<td >Fulano de tal</td>
<td>Uberlandia</td>
<td >Uberlandia GO</td>
<td class="end">
<div class="end_text">
É um fato conhecido de todos que um leitor
se distrairá com o conteúdo de texto legível de uma página quando estiver
examinando sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma
distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo
aqui", fazendo com que ele tenha uma aparência similar a de um texto
legível. Muitos softwares de publicação e editores de páginas na internet
agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por '
lorem ipsum' mostra vários websites ainda em sua fase de construção. Várias
versões novas surgiram ao longo dos anos, eventualmente por acidente, e às
vezes de propósito (injetando humor, e coisas do gênero).
</div>
<div class="resumo">
</div>
<div class="icone" style="position:
absolute;left: 250px; top: 50px; display: none; cursor: pointer;">
<i onclick="fechareabrir(this)" class="glyphicon
glyphicon-chevron-down"></i>
</div>
<div class="icone2" style="position:
absolute;left: 250px; bottom: 5px; display: none; cursor: pointer;">
<i onclick="fechareabrir(this)" class="glyphicon
glyphicon-chevron-up"></i>
</div>
</td>
</tr>
<tr>
<td>Ativo</td>
<td >Fulano de tal</td>
<td>Uberlandia</td>
<td >Uberlandia GO</td>
<td class="end">
<div class="end_text">
É um fato conhecido de todos que um leitor
se distrairá com o conteúdo de texto legível de uma página quando
estiver examinando sua diagramação. A vantagem de usar Lorem Ipsum é
que ele tem uma
distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo
aqui", fazendo com que ele tenha uma aparência similar a de um texto
legível. Muitos softwares de publicação e editores de páginas na internet
agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por
'lorem ipsum' mostra vários websites ainda em sua fase de construção. Várias
versões novas surgiram ao longo dos anos, eventualmente por acidente, e às
vezes de propósito (injetando humor, e coisas do gênero).
</div>
<div class="resumo">
</div>
<div class="icone" style="position:
absolute;left: 250px; top: 50px; display: none; cursor: pointer;">
<i onclick="fechareabrir(this)" class="glyphicon
glyphicon-chevron-down"></i>
</div>
<div class="icone2" style="position:
absolute;left: 250px; bottom: 5px; display: none; cursor: pointer;">
<i onclick="fechareabrir(this)" class="glyphicon
glyphicon-chevron-up"></i>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
//retorna todos os elementos com a classe .end_text
var ends = document.querySelectorAll('.end_text');
var fechado = true;
var end = 0;
for(var i = 0; i < ends.length; i++){
//pega o conteudo de cada div com a classe .end_text
end = ends[i].textContent;
if(end.length > 120){
var end_novo = end.substring(0,120);
ends[i].parentElement.querySelector('.icone').style.display = "block";
//oculta a div com a classe .end_text
ends[i].style.display = "none";
//coloca parte do texto da div com a classe .end_text na div resumo
ends[i].parentElement.querySelector('.resumo').innerHTML = end_novo;
ends[i].parentElement.querySelector('.resumo').style.display = "block";
}
}
function fechareabrir(elemento){
//a variavel this representa o item clicado (argunmento de fecharabrir).
//E tambem não é necessario alterar o conteudo da div .end_text
//é complicado controlar o estado de varias linhas com
//a variavel fechado, é melhor checar o display da div resumo
//a variavel elemento representa o elemento clicado
//então devemos subir (acessar elementos pais) até chegar na div .end_text
//após isso a variável elemento representa a td que possui .end_text, .resumo, .icone
elemento = elemento.parentElement.parentElement;
if(elemento.parentElement.querySelector(".resumo").style.display == "block"){
abrir(elemento);
}else{
fechar(elemento);
}
}
function abrir(elemento){
//volta a exibir a div .end_text
elemento.querySelector(".end_text").style.display = "block";
//oculta a div .resumo
elemento.querySelector(".resumo").style.display = "none";
elemento.querySelector('.icone').style.display = "none";
elemento.querySelector('.icone2').style.display = "block";
}
function fechar(elemento){
//volta a exibir a div .resumo
elemento.querySelector(".resumo").style.display = "block";
//oculta a div .end_text
elemento.querySelector(".end_text").style.display = "none";
elemento.querySelector('.icone').style.display = "block";
elemento.querySelector('.icone2').style.display = "none";
}
</script>
<!-- Latest compiled and minified JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</body>
</html>
Generating the following output:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-
theme.min.css" integrity="sha384-
rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<body>
<style>
.table thead tr th {
text-align: center;
}
.table tbody tr td{
text-align: center;
vertical-align: middle;
}
.table tbody tr td.end{
position: relative;
width: 300px !important;
}
</style>
<div class="container">
<div class="col-md-10">
<table class="table table-striped table-bordered ">
<thead>
<tr>
<th>Status</th>
<th>Cliente</th>
<th>Localidade Cliente</th>
<th>Cidade/UF</th>
<th>Endereço</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ativo</td>
<td >Fulano de tal</td>
<td>Uberlandia</td>
<td >Uberlandia GO</td>
<td class="end">
<div class="end_text">
É um fato conhecido de todos que um leitor
se distrairá com o conteúdo de texto legível de uma página quando estiver
examinando sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma
distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo
aqui", fazendo com que ele tenha uma aparência similar a de um texto
legível. Muitos softwares de publicação e editores de páginas na internet
agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por '
lorem ipsum' mostra vários websites ainda em sua fase de construção. Várias
versões novas surgiram ao longo dos anos, eventualmente por acidente, e às
vezes de propósito (injetando humor, e coisas do gênero).
</div>
<div class="resumo">
</div>
<div class="icone" style="position:
absolute;left: 250px; top: 50px; display: none; cursor: pointer;">
<i onclick="fechareabrir(this)" class="glyphicon
glyphicon-chevron-down"></i>
</div>
<div class="icone2" style="position:
absolute;left: 250px; bottom: 5px; display: none; cursor: pointer;">
<i onclick="fechareabrir(this)" class="glyphicon
glyphicon-chevron-up"></i>
</div>
</td>
</tr>
<tr>
<td>Ativo</td>
<td >Fulano de tal</td>
<td>Uberlandia</td>
<td >Uberlandia GO</td>
<td class="end">
<div class="end_text">
É um fato conhecido de todos que um leitor
se distrairá com o conteúdo de texto legível de uma página quando
estiver examinando sua diagramação. A vantagem de usar Lorem Ipsum é
que ele tem uma
distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo
aqui", fazendo com que ele tenha uma aparência similar a de um texto
legível. Muitos softwares de publicação e editores de páginas na internet
agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por
'lorem ipsum' mostra vários websites ainda em sua fase de construção. Várias
versões novas surgiram ao longo dos anos, eventualmente por acidente, e às
vezes de propósito (injetando humor, e coisas do gênero).
</div>
<div class="resumo">
</div>
<div class="icone" style="position:
absolute;left: 250px; top: 50px; display: none; cursor: pointer;">
<i onclick="fechareabrir(this)" class="glyphicon
glyphicon-chevron-down"></i>
</div>
<div class="icone2" style="position:
absolute;left: 250px; bottom: 5px; display: none; cursor: pointer;">
<i onclick="fechareabrir(this)" class="glyphicon
glyphicon-chevron-up"></i>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
//retorna todos os elementos com a classe .end_text
var ends = document.querySelectorAll('.end_text');
var end = 0;
for(var i = 0; i < ends.length; i++){
//pega o conteudo de cada div com a classe .end_text
end = ends[i].textContent;
if(end.length > 120){
var end_novo = end.substring(0,120);
ends[i].parentElement.querySelector('.icone').style.display = "block";
//oculta a div com a classe .end_text
ends[i].style.display = "none";
//coloca parte do texto da div com a classe .end_text na div resumo
ends[i].parentElement.querySelector('.resumo').innerHTML = end_novo;
ends[i].parentElement.querySelector('.resumo').style.display = "block";
}
}
function fechareabrir(elemento){
//a variavel this representa o item clicado (argunmento de fecharabrir).
//E tambem não é necessario alterar o conteudo da div .end_text
//é complicado controlar o estado de varias linhas com
//a variavel fechado, é melhor checar o display da div resumo
//a variavel elemento representao elemento clicado
//então devemos subir (acessar elementos pais) até chegar na div .end_text
//após isso a varivel elemento representa a td que possui .end_text, .resumo, .icone
elemento = elemento.parentElement.parentElement;
if(elemento.parentElement.querySelector(".resumo").style.display == "block"){
abrir(elemento);
}else{
fechar(elemento);
}
}
function abrir(elemento){
//volta a exibir a div .end_text
elemento.querySelector(".end_text").style.display = "block";
//oculta a div .resumo
elemento.querySelector(".resumo").style.display = "none";
elemento.querySelector('.icone').style.display = "none";
elemento.querySelector('.icone2').style.display = "block";
}
function fechar(elemento){
//volta a exibir a div .resumo
elemento.querySelector(".resumo").style.display = "block";
//oculta a div .end_text
elemento.querySelector(".end_text").style.display = "none";
elemento.querySelector('.icone').style.display = "block";
elemento.querySelector('.icone2').style.display = "none";
}
</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</body>
</html>
One last thing, bootstrap.js file needs jquery.js to be included before (even though you will not use it). The snippet has the include (to avoid the absence-related error message).