从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表格中获取价值单元格

回答

相关问题