DOM追加時に表示されるが自動削除(?)される
まず、初心者な質問すみません。
現在、Monacaを利用してAndroid/iPhone/iPad用のアプリを作成しています。
仕様として動的セレクトボックスで名称とLvを選択後、
押下時に画面下の一覧テーブルに行を追加する追加ボタンを作成しようとしています。
そこでDOMでテーブルの最終行に行追加を行い、セルの1つ目、2つ目、3つ目についてセル追加及び、内容の編集を行い、処理を確定させています。しかし、プレビューやAndroid版デバッガ等で確認すると、画面上で一瞬一覧テーブルに追加された後、更新の様なものがかかり、テーブルが元のヘッダーしかない状態になります。
この更新の様なものの発生を止める方法、
更新の様なものが必ず発生するのであればテーブルの情報が消えてしまうのを回避する方法、
について教えていただきたく。
--本文----
<head>
<meta charset="shift-JIS">
<script src="plugins/plugin-loader.js"></script>
<link rel="stylesheet" href="plugins/plugin-loader.css">
<script>
// Set virtual screen width size to 320 pixels
monaca.viewport({width: 320});
</script>
<script type="text/javascript" language="JavaScript">
<!--
var abbility_Kind = new Array("all", "1", "2");
var abbility_Name = new Array();
abbility_Name["all"] = new Array("a","b","c","d");
abbility_Name["1"] = new Array("a","c","d");
abbility_Name["2"] = new Array("b");
var abbility_Lv = new Array();
abbility_Lv["a"] = new Array(1,2,3,4,5,6,7);
abbility_Lv["b"] = new Array(1,2,3,4,5,6,7);
abbility_Lv["c"] = new Array(1,2,3,4,5);
abbility_Lv["d"] = new Array(1,2,3,4,5,6);
function addSelOption(selObj, myValue, myText){
selObj.length++;
selObj.options[ selObj.length - 1].value = myValue ;
selObj.options[ selObj.length - 1].text = myText;
}
function createSelection(selObj, midashi, aryValue, aryText){
selObj.length = 0;
addSelOption(selObj, midashi, midashi);
for(var i=0; i < aryValue.length; i++){
addSelOption (selObj , aryValue[i], aryText[i]);
}
}
function selectkind(obj){
createSelection(hoge.elements['name'], "",
abbility_Name[obj.value], abbility_Name[obj.value]);
}
function selectname(obj){
createSelection(hoge.elements['level'], "",
abbility_Lv[obj.value], abbility_Lv[obj.value]);
}
var i = 1;
var maxAbbility = 10;
function add(){
i++;
var table1 = document.getElementById("needBody");
var row1 = table1.insertRow(-1);
var cell1 = row1.insertCell(0);
var cell2 = row1.insertCell(1);
var cell3 = row1.insertCell(2);
cell1.setAttribute("class","chk");
cell2.setAttribute("class","num");
cell3.setAttribute("class","name");
cell1.className = 'chk';
cell2.className = 'num';
cell3.className = 'name';
var HTML1 = '<input type="checkbox" name="chk' + i + '" value="' + i + '">';
cell1.innerHTML = HTML1;
cell2.appendChild(document.createTextNode(new String(i)));
cell3.appendChild(document.createTextNode(new String(hoge.elements['name'].value + hoge.elements['level'].value)));
}
-->
</script>
</head>
<body>
<font size="4px">構成</font>
<form name="hoge">
<table>
<tr><td>種類</td>
<td></td>
<td><select name="kind" onChange="selectkind(this)">
<option value="all">all</option>
<option value="1">1</option>
<option value="2">2</option>
</select></td>
</tr>
<tr><td>名称</td>
<td><font color="red">(※)</font></td>
<td><select name="name" onChange="selectname(this)">
<option value=""></option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select></td>
</tr>
<tr><td>Lv</td>
<td><font color="red">(※)</font></td>
<td><select name="level"></select></td>
</tr>
</table>
<button type="submit" name="btnAdd" onClick="add()">追加</button>
<font>一覧</font>
<table border="1px">
<tbody id="needBody">
<tr>
<th> </th>
<th>＃</th>
<th>解放スキル</th>
</tr>
</tbody>
</table>
</form>
</body>
----------
お礼
有難うございます。試してみたいと思います。