Get TD value when clicking table

Question

Get TD value when clicking table

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

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

Byclickingonthe07:00hourlineforexample,openamodaltoregistertheeventatthetimeyouclicked.

Ibuiltmytableasfollows:

<tableclass="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 this?

javascript html jquery css

asked by anonymous 10.07.2017 / 01:35

2 answers

How to read Console strings? Authenticating users through a form with a connection to a database is secure in relation to crackers?

score 2 · Answer 1

You need to get it to 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><linkhref="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>

score 1 · Answer 2

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

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

Then to use this in a modal you can do 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><scriptsrc="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>