[英]Using value field in td tag as hidden field in html table
我需要在HTML表中存儲一些鏈接到單元格的數據。
有什么理由不使用td標簽中的value屬性? 有沒有更好的方法可以做到這一點?
https://jsfiddle.net/uj36cxoL/1/
<table width="100%" border="0">
<tr>
<td id="c00">00</td>
<td id="c01">01</td>
<td id="c02">02</td>
</tr>
<tr>
<td id="c10">10</td>
<td id="c11">11</td>
<td id="c12">12</td>
</tr>
</table>
Col:
<select id="col">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
Row:
<select id="row">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<button id="getValue">Get value</button>
<script>
document.getElementById( "getValue" ).onclick = function()
{
var col = document.getElementById( "col" ).value;
var row = document.getElementById( "row" ).value;
var cellId = "c" + col + row; //generate id of cell (e.g. c01)
var cell = document.getElementById( cellId );
alert( "The value of cell c" + col + row + "is: " + cell.value );
};
</script>
<script>
var count = 1;
for( var col = 0; col < 3; col++ )
{
for( var row = 0; row < 6; row++ )
{
var cellId = "c" + col + row; //generate id of cell (e.g. c01)
var cell = document.getElementById( cellId );
cell.value = count++;
cell.innerHTML = cell.innerHTML + " (value = " + cell.value + ")";
}
}
</script>
我已經在Windows的IE,FF,Chrome和Opera中對其進行了測試,它似乎可以正常工作。 它不必在移動設備上工作。
HTML5能夠執行這種帶有數據屬性的操作 。 它們允許您通過訪問所涉及的DOM元素的.dataset.myData屬性,將所需的任何數據存儲在任何HTML標記中,以便以后根據需要訪問它們。 (對於您來說,這將是cell.dataset.whatever。)盡管您現在擁有的東西可能會工作,但由於它不是HTML5的正式標准,因此它也隨時可能停止工作。 關於數據屬性的MDN頁面非常好: https : //developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
順便說一句,數據屬性確實可以與JQuery一起使用,但是就像您可以使用JQuery進行的大多數操作一樣,您也可以使用常規JS來進行處理,而不必加載整個JQuery庫。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.