テーブルのカラムごとにAjaxで値を取得して反映する

Ajaxで値を取ってテーブルに値をいれる自分の中でのテンプレ。

例えばこんなHTMLがあったとして

  <table>
    <tr>
      <td class="targetHogehoge">
        <div>Loading...</div>
        <input type="hidden" name="param1" value="p1" />
        <input type="hidden" name="param2" value="p2" />
        <input type="hidden" name="param3" value="p3" />
      </td>
    </tr>
    <tr>
      <td class="targetHogehoge">
        <div>Loading...</div>
        <input type="hidden" name="param1" value="pp1" />
        <input type="hidden" name="param2" value="pp2" />
        <input type="hidden" name="param3" value="pp3" />
      </td>
    </tr>
    <tr>
      <td class="targetHogehoge">
        <div>Loading...</div>
        <input type="hidden" name="param1" value="ppp1" />
        <input type="hidden" name="param2" value="ppp2" />
        <input type="hidden" name="param3" value="ppp3" />
      </td>
    </tr>
  </table>

Loading...にAjaxで取った値を表示されるようにするには。

スクリプト書くとこんな感じ

$(function($){
  getHogeHogeData();
});

function getHogeHogeData() {
  var targetColumn = $(".targetHogehoge:first");
  if (targetColumn.length == 0) {
    return;
  }
  var param1 = targetColumn.children("input[name='param1']").val();
  var param2 = targetColumn.children("input[name='param2']").val();
  var param3 = targetColumn.children("input[name='param3']").val();
  var hash = new Date().getTime();
  $.ajax({
      type : "get",
      url :  "hhh/ooo/ggg/eee",
      dataType : "html",
      data : {
        "parameter1" : param1,
        "parameter2" : param2,
        "parameter3" : param3,
        "hash" : hash
      },
      error : function(XMLHttpRequest, status) {
        targetColumn.children("div").html(status);
        targetColumn.removeClass("targetHogehoge");
        getHogeHogeData();
      },
      success : function(data) {
        targetColumn.children("div").html(data);
        targetColumn.removeClass("targetHogehoge");
        getHogeHogeData();
      }
  });
}