Get TD value by clicking on table

Asked

Viewed 642 times

1

I have a table HTML horizontal, where I want to get the value of TD(time) when clicking on the line. Follow an image to try to illustrate better.

inserir a descrição da imagem aqui

By clicking on the line of 07:00 hours for example, open a modal to register the event in the clicked time.

I built my table as follows: 

<table class="tg">
  <tr>
    <th class="tg-031e">Horarios</th>
    <th class="tg-031e">Nome do paciente</th>
    <th class="tg-031e">Convênio</th>
    <th class="tg-031e">Data do agendamento</th>
    <th class="tg-yw4l">Usuário do Agendamento</th>
  </tr>

  <tr>
    <td class="tg-031e">07:00</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>...

How do I do that?

javascript jquery html css

2 answers

2

You need to make him find where the click was

Dry suggestion:

$("tr").on('click',function() {
        var horario;
         var tableData = $(this).children("td").map(function()         {
         return $(this).text();
         }).get();
         horario =    $.trim(tableData[0]);
         $('p.text').text(horario+' selecionado');
         $('#modal-texto').modal('show');
    });
    
    $('.btn-salvar').on('click',function(){
      alert('Salvo');
       $('#modal-texto').modal('hide');
    });
    
    
<html>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<head>
 
</head>
<body>
<div class="modal fade" id="modal-texto">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Hor&aacute;rio Selecionado</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p class="text">Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary btn-salvar">Salvar</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>
<table>
 <tr>
    <th class="tg-031e">Horarios</th>
    <th class="tg-031e">Nome do paciente</th>
    <th class="tg-031e">Convênio</th>
    <th class="tg-031e">Data do agendamento</th>
    <th class="tg-yw4l">Usuário do Agendamento</th>
  </tr>

  <tr>
    <td class="tg-031e">07:00</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-031e">08:00</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-yw4l"></td>
  </tr>
  
</table>

</body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>

1

To know the value of the first column of each row you can use something like this:

$("tbody tr").on('click', function() {
  var hora = this.firstElementChild.textContent;
  console.log(hora);
});

Then to use it in a modal you can do like this:

$("tbody tr").on('click', function() {
  var hora = this.firstElementChild.textContent;
  console.log(hora);
  $('#myModal p').text('A hora escolhida foi ' + hora);
  $('#myModal').modal('show');
});
table {
  border-collapse: collapse;
}

table tr td {
  padding: 5px;
}

tbody tr:hover {
  cursor: pointer;
  background-color: #ddf;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table>
  <thead>
    <tr>
      <th class="tg-031e">Horarios</th>
      <th class="tg-031e">Nome do paciente</th>
      <th class="tg-031e">Convênio</th>
      <th class="tg-031e">Data do agendamento</th>
      <th class="tg-yw4l">Usuário do Agendamento</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tg-031e">07:00</td>
      <td class="tg-031e"></td>
      <td class="tg-031e"></td>
      <td class="tg-031e"></td>
      <td class="tg-yw4l"></td>
    </tr>
    <tr>
      <td class="tg-031e">08:00</td>
      <td class="tg-031e"></td>
      <td class="tg-031e"></td>
      <td class="tg-031e"></td>
      <td class="tg-yw4l"></td>
    </tr>
  </tbody>
</table>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Marcação:</h4>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Browser other questions tagged javascript jquery html css

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