テーブル（表）のセル(TH,TD)をJavaScriptで書き換え

tableタグ内のセル「THタグ」「TDタグ」をJavaScriptで書き換えるサンプルです。

tableタグ全体を書き換えるのではなく、行(row)と列(col)を指定して書き換えするため、Excelのようにセル内容を変更できます。
また、サンプルJavaScriptでは、指定された行(row)と列(col)の値を取得する機能も含まれています。

テーブル（表）の行と列を選んで、セルの書き換え内容を入力してください。リアルタイムに書き換えるJavascriptでサンプルを作成しています。

<div id="rewriteInArea">
  <select id="rewriteRow" onchange="RowColChange()">
    <option value="0">0行</option>
    <option value="1">1行</option>
    <option value="2" selected>2行</option>
    <option value="3">3行</option>
    <option value="4">4行</option>
  </select>
  <select id="rewriteCol" onchange="RowColChange()">
    <option value="0">0列</option>
    <option value="1">1列</option>
    <option value="2">2列</option>
    <option value="3" selected>3列</option>
    <option value="4">4列</option>
  </select>
  <input type="text" id="rewriteText" oninput="goRewrite()" value="行2列3">
</div>
<table id="tableArea">
  <tr><th>0</th><th>列1</th><th>列2</th><th>列3</th><th>列4</th></tr>
  <tr><th>行1</td><td>行1列1</td><td>行1列2</td><td>行1列3</td><td>行1列4</td></tr>
  <tr><th>行2</td><td>行2列1</td><td>行2列2</td><td>行2列3</td><td>行2列4</td></tr>
  <tr><th>行3</td><td>行3列1</td><td>行3列2</td><td>行3列3</td><td>行3列4</td></tr>
  <tr><th>行4</td><td>行4列1</td><td>行4列2</td><td>行4列3</td><td>行4列4</td></tr>
</table>

<script type="text/javascript">
function goRewrite() {
 // ====================================================
 //  選択された行と列の値を取得し入力域に設定する
 // ====================================================
  var objInRow  = document.getElementById('rewriteRow');
  var objInCol  = document.getElementById('rewriteCol');
  var objInText = document.getElementById('rewriteText');
  var objTable  = document.getElementById('tableArea');
  var wRow = objInRow.options[objInRow.selectedIndex].value;
  var wCol = objInCol.options[objInCol.selectedIndex].value;
  objInText.value = objTable.rows[wRow].cells[wCol].innerHTML;
  objInText.focus();
  objInText.select();
}
function goRewrite() {
 // ====================================================
 //  指定されたセルを書き換える
 // ====================================================
  var objInRow  = document.getElementById('rewriteRow');
  var objInCol  = document.getElementById('rewriteCol');
  var objInText = document.getElementById('rewriteText');
  var objTable  = document.getElementById('tableArea');
  var wRow = objInRow.options[objInRow.selectedIndex].value;
  var wCol = objInCol.options[objInCol.selectedIndex].value;
  objTable.rows[wRow].cells[wCol].innerHTML = objInText.value;
}
</script>