Using value field in td tag as hidden field in html table
<p>I need to store some data linked to a cell in a HTML table. </p>

<p>Is there any reason <em>not</em> to use the value attribute in the td tag, like this? Is there maybe a better way to do this?</p>

<p><a href="https://jsfiddle.net/uj36cxoL/1/" rel="nofollow">https://jsfiddle.net/uj36cxoL/1/</a></p>

<pre><code>&lt;table width="100%" border="0"&gt;
  &lt;tr&gt;
    &lt;td id="c00"&gt;00&lt;/td&gt;
    &lt;td id="c01"&gt;01&lt;/td&gt;
    &lt;td id="c02"&gt;02&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td id="c10"&gt;10&lt;/td&gt;  
    &lt;td id="c11"&gt;11&lt;/td&gt;
    &lt;td id="c12"&gt;12&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
Col:
&lt;select id="col"&gt;
    &lt;option value="0"&gt;0&lt;/option&gt;
    &lt;option value="1"&gt;1&lt;/option&gt;
    &lt;option value="2"&gt;2&lt;/option&gt;
&lt;/select&gt;
Row:
&lt;select id="row"&gt;
    &lt;option value="0"&gt;0&lt;/option&gt;
    &lt;option value="1"&gt;1&lt;/option&gt;
    &lt;option value="2"&gt;2&lt;/option&gt;
&lt;/select&gt;
&lt;button id="getValue"&gt;Get value&lt;/button&gt;
&lt;script&gt;
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 );
};
&lt;/script&gt;

&lt;script&gt;
var count = 1;
for( var col = 0; col &lt; 3; col++ )
{
    for( var row = 0; row &lt; 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 + ")";
    }
}
&lt;/script&gt;
</code></pre>

<p>I have tested this in IE, FF, Chrome and Opera on Windows, and it seems to work. It does not have to work on mobile devices.</p>