使用td标记中的value字段作为html表中的隐藏字段

时间:2016-04-01 04:03:38

标签: javascript html 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中测试了它,它似乎有效。它不必在移动设备上工作。

1 个答案:

答案 0 :(得分:1)

HTML5能够使用数据属性来完成此类操作。它们允许您在任何HTML标记中存储您可能想要的任何数据,以便以后根据需要访问它,只需访问相关DOM元素的.dataset.myData属性即可。 (在你的情况下,这将是cell.dataset.whatever。)虽然你现在拥有的东西可能会起作用,但它也可能随时停止工作,因为它不是HTML5的官方标准。关于数据属性的MDN页面非常好:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

顺便提一下,数据属性可以与JQuery一起使用,但是像大多数事情一样,你可以使用常规JS,而不必加载整个JQuery库。