dポイントプレゼントキャンペーン実施中！

DOM追加時に表示されるが自動削除(?)される

解決済

  • 質問者：keiki4203
  • 質問日時：
  • 回答数：1件

まず、初心者な質問すみません。
現在、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>
----------

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： Ogre7077
  • 回答日時：

要素 <button type=submit> が押されたならば、


ブラウザの挙動は以下の様になります。

1. 属性 onclick の値を、イベント関数の中身と看做して実行
2. イベント関数の戻り値が false でないので、処理続行
3. button を囲む要素 form に、イベント submit が発生する
4. form の挙動として、現在のページを再度読み込む
5. 再読込されたので、DOM内容も初期化される

というわけで、ご質問の回答としては
<button type=submit>
→ <button type=button> # スクリプト以外のイベントが発生しないボタン

または
onclick="add()"
→ onclick="add();return false" # 戻り値を付けて後続の処理中断
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

記憶をたどりながらのコーディングでしたので、
初歩的なミスをやってしまいました。。。

教えていただき感謝です。

通報する
お礼日時：2014/06/19 22:40

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報