今日もJavacriptの調査

今日も、JavaScript の使い方を確認中。
会社のシステムで、配分費を登録する画面があり、エントリーするテーブルが、ボタン操作で指定の行数に増やせる機能がついているのを見つけた。同じ画面でテーブルだけ書き換えているようなのだが、JavaScript を中途半端に使っていて、わかり難い。
そこで、コードを全面見直しできないか、検討中。

今日は、その検討で JavaScript を調べているところ。
対象のエントリー行は、DBのデータをそのまま書き込んだ数１００行という selectタグを使っており、これを新規に作るのはバカバカしいので、１行目だけサーバー側で作って、２行目以降を　JavaScript でやりたい。

テーブルを構成する tr タグを作成し、td タグの内容を既存のかｒコピーするやりかた、こんな感じで作ってみました。

function addSelecter() {

  var select_obj = document.getElementsByName("sel1").item(0);

  var text1_obj = document.getElementsByName("tex1").item(0);

  var text2_obj = document.getElementsByName("tex2").item(0);

 

  var tr_tag = document.createElement("tr");

  var td_tag1 =  document.createElement("td");

  var td_tag2 =  document.createElement("td");

  var td_tag3 =  document.createElement("td");

  var td_tag4 =  document.createElement("td");
  var tbody_obj = document.getElementById("tbody_tag");

  var ncount = tbody_obj.childNodes.length -1;

  tbody_obj.appendChild(tr_tag);

  tr_tag.appendChild(td_tag1);

  td_tag1.innerHTML = "" + ncount;

  tr_tag.appendChild(td_tag2);

  td_tag2.appendChild(select_obj.cloneNode(true));

  tr_tag.appendChild(td_tag3);

  td_tag3.appendChild(text1_obj.cloneNode(true));

  tr_tag.appendChild(td_tag4);

  td_tag4.appendChild(text2_obj.cloneNode(true));
}

この JavaScript のコードで、 tbody_obj.childNodes.length -1 で行数が出る仕組みは未確認。こうすると、行数と一致するのでいいかな。

次に、JavaScript で作った行をすべて削除して、指定した数値に合わせた数に調整する仕組みを作成しようとしたところ、うまくいかない。
エレメントの item()で、配列指定した数値のものを削除しようとするのだが、なぜか画面に残ってしまう。
１行だけは残しておかないと、コピーできないので、丸ごと消すわけにいかないしで、困った状況。
いろいろ試して、テキストで画面のどこかに保存することにした。
ためしに作ったJavaScriptは、こんなの。

function haibun_Select() {

  var tbody_obj = document.getElementById("tbody_tag");

  var now_haibun = tbody_obj.childNodes.length -2;

  var test_pr  = document.getElementById("selected_no").value;

  var new_haibun = document.getElementById("haibun_sel").selectedIndex + 1;
  var tr_tag = document.createElement("tr");

  var td_tag1 =  document.createElement("td");

  var td_tag2 =  document.createElement("td");

  var td_tag3 =  document.createElement("td");

  var td_tag4 =  document.createElement("td");
  messages = "select: "+now_haibun+" :"+new_haibun +"; --> " + test_pr;

  alert(messages);
//  for(i in tbody_obj.childNodes) {

  for(i=1; i 2 ) {

//      tbody_obj.removeChild(tbody_obj.childNodes.item(i));

      tbody_obj.removeChild(tbody_obj.lastChild);

//    }

  }
  alert(" pause");
  for(i=1;i

これだと、なんとか、予定どおりの動作をする。