從HTML表格中獲取價值單元格

我想要一個HTML表格，以便我只能選擇一個單元格並檢索它的值，以便可以在我的應用程序的其他操作中使用它。問題是我不知道如何構建表格，只能選擇一個單元格，選定的單元格將其更改爲顏色等等。這裏有一個例子，所以你們可以想象我腦海中的想法。從HTML表格中獲取價值單元格

Table selection

這裏是我的應用程序的硬編碼模型：

<body> 
    <!-- NAVBAR INÍCIO --> 
    <nav id="barra_navegacao"class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="jogos.html" title="Início"> 
        <i class="fa fa-home"></i> 
       </a> 

       <a class="navbar-brand" href="jogos.html" title="Início"> 
        <i class="fa fa-bluetooth"></i> 
       </a> 

       <a class="navbar-brand" href="jogos.html" title="Início"> 
        <i class="fa fa-print"></i> 
       </a> 

       <a class="navbar-brand" href="jogos.html" title="Início"> 
        <i class="fa fa-whatsapp"></i> 
       </a> 

      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 

       <!--<ul class="nav navbar-nav"> 
        <li><a href=""><span class="fa glyphicon-log-out"></span> <small>SAIR</small></a></li> 
       </ul> 
       <ul class="nav navbar-nav"> 
        <li><a style="color: red;" href="../config/encerra_acesso.php"><span class="glyphicon glyphicon-log-out"></span> <small>SAIR</small></a></li> 
       </ul> /-->     

      </div> 
     </div> 
    </nav> 
    <!-- NAVBAR FIM--> 



    <!-- PAINEL APOSTAS INÍCIO --> 
    <div id="painel_aposta" class="painel-aposta row"> 
     <div class="col-xs-6"> 
      <div class="input-group"> 
       <span class="input-group-addon" id="add-on">R$</span> 
       <input style="width: 90px;" type="text" class="form-control" placeholder="5.00" aria-describedby="add-on"> 
      </div> 
      Retorno(R$): <b>0.00</b><br> 
      Qtd. Jogos: <b>0</b><br> 
     </div> 
     <div class="pull-right"> 
      <button id="finalizar_aposta" type="button" class="btn btn-info btn-sm" onclick=""> 
       <i class="fa fa-refresh"></i> 
       Atualizar 
      </button> 

      <button id="finalizar_aposta" class="btn btn-success btn-sm" 
       onclick="submitForm('form_apostas')"> 
      <i class="fa fa-check"></i> 
      Finalizar 
      </button> 
     </div> 
    </div> 
    <!-- PAINEL APOSTAS FIM --> 




    <!-- COTAÇÕES INÍCIO --> 
    <div id="painel_partidas" class="panel panel-primary panel-heading-margin"> 
     <div class="panel-heading"> 
      <center> 
       <b>Brasil &raquo; Série A</b> 
       <button data-toggle="collapse" data-target="#partida" class="btn btn-default btn-xs pull-right"><i class="fa fa-compress"></i></button> 
      </center> 
     </div> 

     <div id="partida" class="panel-heading-margin"> 


      <table class="w3-table-all w3-card-4" style="width: 100%"> 
       <tr class="w3-dark-grey"> 
        <td> 
         <small>TALLERES ESCALADA x EXCURSIONISTAS</small> 
         <span class="pull-right"><small>08/10 18:00 &nbsp; </small> <button class="btn btn-danger btn-xs pull-right"><span class="fa fa-close"></span></button></span> 
        </td> 
       </tr> 
      </table> 

      <table class="w3-table-all w3-card-4" style="width: 100%"> 

       <tbody> 
        <tr> 
         <td> 
          <center> 
           Casa<br> 
           <strong>2.00</strong> 
          </center> 
         </td> 
         <td> 
          <center> 
           Casa<br> 
           <strong>2.00</strong> 
          </center> 
         </td> 
         <td> 
          <center> 
           Casa<br> 
           <strong>2.00</strong> 
          </center> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <center> 
           Casa<br> 
           <strong>2.00</strong> 
          </center> 
         </td> 
         <td> 
          <center> 
           Casa<br> 
           <strong>2.00</strong> 
          </center> 
         </td> 
         <td> 
          <center> 
           Casa<br> 
           <strong>2.00</strong> 
          </center> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <center> 
           Casa<br> 
           <strong>2.00</strong> 
          </center> 
         </td> 
         <td> 
          <center> 
           Casa<br> 
           <strong>2.00</strong> 
          </center> 
         </td> 
         <td> 
          <center> 
           Casa<br> 
           <strong>2.00</strong> 
          </center> 
         </td> 
        </tr> 
       </tbody> 

      </table> 

      <div id="resultado"></div> 

       <!--COTAÇÕES AQUI--> 

     </div> 

    </div> 
    <!-- COTAÇÕES FIM --> 


    <script type="text/javascript" src="cordova.js"></script> 
    <script type="text/javascript" src="assets/js/webservice.js"></script> 
    <script type="text/javascript" src="assets/js/index.js"></script> 
    <script type="text/javascript" src="assets/pace/pace.min.js"></script> 
    <script type="text/javascript" src="assets/js/jquery-2.2.4.min.js"></script> 
    <script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"></script> 
    <!--<script type="text/javascript">listaCampeonatos();</script>--> 
    <!--<script type="text/javascript" src="assets/materialize/js/materialize.min.js"></script>--> 

</body>

My app

我需要基本的拳頭截圖同樣的事情。如果有人可以用我的一些幫助來啓發我，我會很感激。提前致謝。

來源

2016-10-10 Guilherme Ramalho

，您可以使用ID或HTML5 – mohade

數據 - 屬性，你試過這樣說 - 在各個小區'onclick'添加類？ –

好的，但關於使代碼可以選擇細胞..你能幫助我嗎？ –

嘗試這樣。我正在給予警覺的價值。你可以只分配一個變量的值並在你的應用中使用。的HTML表是完整的你的一個，我只是在表中添加了一個ID。和一個CSS類'主動'來點擊點擊div。（你需要在你頁面的jQuery腳本）

$(document).ready(function(){ 
 
    $(document).on('click','.mytable tbody tr td',function(){ 
 
    $(this).addClass('active'); 
 
    $(this).parents('tbody').find('td').not(this).removeClass('active'); 
 
    alert($(this).find('strong').html()); 
 
    }); 
 
});

.active{ 
 
    background: #999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="" border='1' class="mytable w3-table-all w3-card-4" style="width: 100%"> 
 

 
       <tbody> 
 
        <tr> 
 
         <td> 
 
          <center> 
 
           Casa<br> 
 
           <strong>2.00</strong> 
 
          </center> 
 
         </td> 
 
         <td> 
 
          <center> 
 
           Casa<br> 
 
           <strong>2.00</strong> 
 
          </center> 
 
         </td> 
 
         <td> 
 
          <center> 
 
           Casa<br> 
 
           <strong>2.00</strong> 
 
          </center> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td> 
 
          <center> 
 
           Casa<br> 
 
           <strong>2.00</strong> 
 
          </center> 
 
         </td> 
 
         <td> 
 
          <center> 
 
           Casa<br> 
 
           <strong>2.00</strong> 
 
          </center> 
 
         </td> 
 
         <td> 
 
          <center> 
 
           Casa<br> 
 
           <strong>2.00</strong> 
 
          </center> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td> 
 
          <center> 
 
           Casa<br> 
 
           <strong>2.00</strong> 
 
          </center> 
 
         </td> 
 
         <td> 
 
          <center> 
 
           Casa<br> 
 
           <strong>2.00</strong> 
 
          </center> 
 
         </td> 
 
         <td> 
 
          <center> 
 
           Casa<br> 
 
           <strong>2.00</strong> 
 
          </center> 
 
         </td> 
 
        </tr> 
 
       </tbody> 
 

 
      </table>

來源

2016-10-10 16:23:36

謝謝！這對我幫助很大！在這種情況下，我僅提供了一個表格，但在實際應用中，銀行中每個返回的行都會產生更多的表格。那麼，我怎樣才能爲每個生成的表調用一次你所做的js函數呢？ –

@GuilhermeRamalho：對不起，晚了。檢查我編輯的答案。它將適用於所有動態創建的表，但是您需要爲所有表提供類「mytable」。 –

給出一個id並使用getElementById（）來選擇單元格。不要使用中心標記，它的標記。我假設你想要使用javascript

來源

2016-10-10 16:22:07 Twista

我想這基本上是這裏發生的事情：[link]（http://artilheiro.me/），但因爲我是初學者，所以我實際上並不知道如何去做。我非常感謝任何幫助。 –

如果你有

<td id="cell1"></td>

然後在jQuery的

$(function() { //this wrapper just tells the script not to run until the whole page is rendered 
    $("#cell1").click(function(event) { //this bit handles any user clicks on cell1 
    console.log("clicked cell 1"); 
    }); 
});

將記錄到瀏覽器控制檯，每當用戶點擊它。

如果您想要爲多個單元格運行相同的事件，請爲它們提供一個班級，然後選擇相應的班級（例如<td class="myGroup">和$(".myGroup").click(...）。

這一切都使用標準的jQuery語法來綁定瀏覽器事件 - 可能值得關於這方面的基礎知識。

來源

2016-10-10 16:23:56 ADyson

這個答案假設您希望通過點擊表格單元格從表格中獲取值。

對於jQuery，我會使用委託方法向表中的所有單元格添加單擊處理函數。通過使用delegated方法，您可以將更少的點擊處理程序附加到頁面上，並且如果您稍後動態地將單元格添加到表格（即Ajax），它也可以工作。

單擊代碼片段中的表格單元格可將其值複製到綠色框中。

var $display = $('.display'); 
 

 
$('.my-table').on('click', 'td', function(e) { 
 
    $display.text(this.innerHTML); 
 
});

.display { 
 
    width: 200px; 
 
    margin: 1rem 0; 
 
    padding: 0.5rem 1rem; 
 
    border: 1px solid green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="my-table"> 
 
    <tr> 
 
    <th>First Name</th> 
 
    <th>Last Name</th> 
 
    <th>Age</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Aaron</td> 
 
    <td>Anderson</td> 
 
    <td>1</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Beth</td> 
 
    <td>Black</td> 
 
    <td>2</td> 
 
    </tr> 
 
</table> 
 

 
<div class="display"></div>

注：正如其他人所指出的那樣，<center> tag is depreciated。改爲使用text-align。

來源

2016-10-10 16:34:23 hungerstar

$("#cell1").click(function(){ 
$(this).css("background-color", "#ccc"); 
});

來源

2016-10-10 21:58:09 Twista

從HTML表格中獲取價值單元格

回答

相關問題