我想要一个HTML表格，我只能选择一个单元格并检索它的值，以便我可以在我的应用程序的其他操作中使用。问题是我不知道如何以一种只能选择一个单元格，所选单元格改变它的颜色等方式构造表格。这是一个例子，所以你们可以想象我的想法。
这是我的应用程序的硬编码模型：
<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 » 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 </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>
我在第一个截图中需要基本相同的东西。如果有人可以在一些帮助下启发我，我会很感激。提前谢谢。
答案 0 :(得分：0)
给出一个id并使用getElementById（）来选择单元格。不要使用中心标签，将其展开。我假设你想使用javascript
答案 1 :(得分：0)
试试这样。我正在警惕地给予价值。您可以在变量中指定值并在应用中使用。 html表是你的一个，我只是在表中添加了一个id。和一个css课程“活跃”＃39;高亮点击点击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>
答案 2 :(得分：0)
如果你有
<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语法来绑定到浏览器事件 - 可能值得一读它的基础知识。
答案 3 :(得分：0)
这个答案假设您希望通过单击表格单元格从表格中获取值。
对于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。
答案 4 :(得分：0)
$("#cell1").click(function(){
$(this).css("background-color", "#ccc");
});