從HTML表單元獲取價值
[英]Get value from HTML Table Cell
問題描述
我希望以這樣一種方式使用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>
我需要拳頭屏幕截圖中的基本相同的內容。 如果有人可以通過一些幫助啟發我，我將不勝感激。 提前致謝。
5 個解決方案
解決方案1
0 2016-10-10 16:22:07
提供一個ID並使用getElementById（）選擇單元格。 不要使用中心標簽，因為它是分散的。 我假設您想使用javascript
解決方案2
0 已采納 2016-10-10 16:23:36
嘗試這樣。 我給警報的價值。 您只需在變量中分配值即可在您的應用中使用。 html表已經滿了，我剛剛在表中添加了一個id。 以及一個CSS類“有效”以突出顯示click 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>
解決方案3
0 2016-10-10 16:23:56
如果你有
<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語法綁定到瀏覽器事件-可能值得一讀。
解決方案4
0 2016-10-10 16:34:23
該答案假設您正在尋找通過單擊表格單元格從表格中獲取值的方法。
對於jQuery，我將使用委派的方法向表的所有單元格添加點擊處理程序。 通過使用委托方法，您可以在頁面上附加較少的單擊處理程序，並且如果以后再向表中動態添加單元格（例如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>標簽已棄用 。 請改用text-align 。
解決方案5
0 2016-10-10 21:58:09
$("#cell1").click(function(){
$(this).css("background-color", "#ccc");
});
如何使用JavaScript從HTML表格中獲取特定單元格的值
[英]How to get value from specific cell from a HTML table with JavaScript
如何從 html 和 javascript 中的 HTML 表（用戶輸入）打印或獲取單元格值
[英]How to print or get the cell value from HTML TABLE(User Input) in html and javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.