0
私は簡単なことをしようとしています。私は上のボタンとその下の空のhtmlテーブルを持つ1ページを持っています。ボタンをクリックするとモーダルがポップアップし、追加のテキストボックスが表示され、さらに2つのボタン、[キャンセル]と[保存]が表示されます。 Saveボタンをクリックすると、テキストボックスからデータを表示し、テーブルの新しい行としてドロップします。 しかし、何も実際には起こりません。モーダルは消えますが、新しい行はテーブルに追加されません。 これをデバッグしようとすると、すべてが正しいと思われ、例外は見つかりませんでした。すべての値が正しく追加されましたが、何もありません。 私は問題がモーダルによって引き起こされたと思いますが、誰かがこれを修正する方法を知っていますか？悪いjavaScriptでモーダルを閉じた後にテーブルの新しい行が追加されない
<html>
<head>
<title>Battery Test App</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button id="btnAddNew">Add new</button>
<br>
<br>
<table id="results" width="360">
<thead>
<tr>
<th scope="col" width="120">Date Created</th>
<th scope="col" width="120">Name</th>
<th scope="col" width="120">Tests</th>
</tr>
</thead>
</table>
<div id="modalAddNewTest" class="modal">
<div class="modal-content">
<span class="close">x</span>
<form name="formTestInfo" method="post">
Name:<br>
<input type="text" id="tbName" name="tbName">
<p id="nameVal"></p>
Test:<br>
<select id="ddlTest">
<option value="belbin">Belbin</option>
<option value="raven">Raven</option>
<option value="ppa">PPA</option>
<option value="ppaPlus">PPA+</option>
<option value="basicKnowledge">Basic Knowledge</option>
<option value="pct">PCT</option>
</select>
<br>
<br>
<button id="btnCancel">Cancel</button>
<button id="btnSave" onclick="validateForm(return false;);">Save</button>
</form>
</div>
</div>
<script type="text/javascript">
var nameValidation;
var modal = document.getElementById('modalAddNewTest');
var btn = document.getElementById("btnAddNew");
var btnSave = document.getElementById("btnSave");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
function validateForm() {
var x = document.forms["formTestInfo"]["tbName"].value;
if (x == null || x == "") {
nameValidation = "Name must be filled out";
document.getElementById("nameVal").innerHTML = nameValidation;
}
else
{
var table = document.getElementById("results");
var name = document.getElementById("tbName").value;
var e = document.getElementById("ddlTest");
var selectedTest = e.options[e.selectedIndex].value;
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
if(dd<10) {
dd='0'+dd
}
if(mm<10) {
mm='0'+mm
}
today = mm+'/'+dd+'/'+yyyy;
//In the first step using InsertRow function you are creating a first row i.e tr
var row = table.insertRow(table.rows.length);
//In the second step you create a cell i.e td dynamically
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
// Here in step 3 you can add data to your cells from the modal popup inputs(According to your logic)
cell1.innerHTML = today;
cell2.innerHTML = name;
cell3.innerHTML = selectedTest;
}
}
</script>
</body>
</html>
ボタンをボタンのように動作させる場合、falseを返す必要はありません。いくつかの古いブラウザでは、フォームの中に入れ子になっているときにサブミット入力のようなボタンを扱います。経験に基づいて。 –