[英]Grab Data on the Fly from Table HTML
This might be a little difficult to explain, but I am displaying a grid that is 2 x 2. When you click on the text of a cell (say 0,1) it will bring up a pop-up box and store those coordinates in hidden values.这可能有点难以解释,但我正在显示一个 2 x 2 的网格。当您单击单元格的文本(例如 0,1)时,它会弹出一个弹出框并将这些坐标存储在隐藏的价值观。 Those hidden values will be then submitted to a form via POST.
然后这些隐藏的值将通过 POST 提交到表单。
Here is some sample code I have written to hopefully clarify what I am trying to do: https://jsfiddle.net/v08bzm9k/1/这是我编写的一些示例代码,希望能阐明我正在尝试做的事情: https : //jsfiddle.net/v08bzm9k/1/
<table border=1>
<tr>
<td class='grid-cells'><a href='#myPopup' data-rel='popup'>1</a></td>
<td class='grid-cells'><a href='#myPopup' data-rel='popup'>2</a></td>
</tr>
<tr>
<td class='grid-cells'><a href='#myPopup' data-rel='popup'>3</a></td>
<td class='grid-cells'><a href='#myPopup' data-rel='popup'>4</a></td>
</tr>
</table>
<div data-role="popup" id="myPopup" class="ui-content" style="min-width:250px;">
<form method="post" action="save-square.php">
<div>
<h3>Pick This Square:</h3>
<label for="name" class="ui-hidden-accessible">Name:</label>
<input type="text" name="name" id="name" placeholder="Name">
<label for="email" class="ui-hidden-accessible">Email:</label>
<input type="text" name="email" id="email" placeholder="Email">
<input type="submit" data-inline="true" value="Submit">
<div id='row'></div>
<div id='col'></div>
</div>
</form>
</div>
Would I store the values of the cell I click into hidden fields via JavaScript?我会通过 JavaScript 将我单击的单元格的值存储到隐藏字段中吗?
I updated https://jsfiddle.net/v08bzm9k/2/我更新了https://jsfiddle.net/v08bzm9k/2/
Yes you can use hidden fields.是的,您可以使用隐藏字段。 In your form add this:
在您的表单中添加:
<input type="hidden" name="coords" id="coords" value="">
Add this JS to your page:将此JS添加到您的页面:
function setCoords(newCoords) {
$('#coords').val(newCoords);
}
And in your links, add an onClick:在您的链接中,添加一个 onClick:
<a href='#myPopup' data-rel='popup' onclick="setCoords('1,1');">1</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.