I can not sort table rows

2

I created a whole stylization for the table I did everything in the first row of the table was ok, but when I was duplicating this line I noticed that only the first one was the stylization, I'm starting in the area, / p>

<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="icone" style="position: 
absolute;left: 250px; top: 50px; display: none; cursor: pointer;">
                                <i onclick="fechareabrir()" class="glyphicon 
glyphicon-chevron-down"></i>    
                            </div>    
                            <div class="icone2" style="position: 
absolute;left: 250px; bottom: 5px; display: none; cursor: pointer;">
                                <i onclick="fechareabrir()" 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="icone" style="position: 
absolute;left: 250px; top: 50px; display: none; cursor: pointer;">
                                <i onclick="fechareabrir()" class="glyphicon 
glyphicon-chevron-down"></i>    
                            </div>    
                            <div class="icone2" style="position: 
absolute;left: 250px; bottom: 5px; display: none; cursor: pointer;">
                                <i onclick="fechareabrir()" class="glyphicon 
glyphicon-chevron-up"></i>    
                            </div>
                    </td>
                </tr>

            </tbody>

        </table>
    </div>    


    </div>


<script type="text/javascript">    

    var end = document.querySelector('.end_text').textContent;            
    var fechado = true;        

    if(end.length > 120){        
        var end_novo = end.substring(0,120);        
         document.querySelector('.end_text').innerHTML = end_novo;
         document.querySelector('.icone').style.display = "block";
     }

    function fechareabrir(){
        if(fechado){
            abrir();
        }else{
            fechar();
        }
    }

    function abrir(){
        document.querySelector('.end_text').innerHTML = end;
        document.querySelector('.icone').style.display = "none";            
        document.querySelector('.icone2').style.display = "block";
        fechado = false;        
    }

    function fechar(){        
            var end_novo = end.substring(0,120);        
            document.querySelector('.end_text').innerHTML = end_novo;
            document.querySelector('.icone').style.display = "block";
            document.querySelector('.icone2').style.display = "none";
            fechado = true;        
    }


</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>
    
asked by anonymous 05.11.2017 / 01:11

1 answer

2

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).

    
06.11.2017 / 02:05