0
JavaScriptを使用して行を動的に追加/削除/編集します。スクリプトは正常に機能しますが、編集ボタンをクリックすると、保存と削除のボタンが上下に表示されます。これはIE/Edgeでのみ発生し、Chromeでうまく動作します。なぜ...？ダイナミックテーブルセルのサイジングが正しくないIE/Edge
Javascriptを
function aedit_row(no)
{
document.getElementById("aedit_button"+no).style.display="none";
document.getElementById("asave_button"+no).style.display="table-cell";
var acode=document.getElementById("acode_row"+no);
var aname=document.getElementById("aname_row"+no);
var acode_data=acode.innerHTML;
var aname_data=aname.innerHTML;
acode.innerHTML="<input type='text' id='acode_text"+no+"' value='"+acode_data+"'>";
aname.innerHTML="<input type='text' id='aname_text"+no+"' value='"+aname_data+"'>";
}
function asave_row(no)
{
var acode_val=document.getElementById("acode_text"+no).value;
var aname_val=document.getElementById("aname_text"+no).value;
document.getElementById("acode_row"+no).innerHTML=acode_val;
document.getElementById("aname_row"+no).innerHTML=aname_val;
document.getElementById("aedit_button"+no).style.display="table-cell";
document.getElementById("asave_button"+no).style.display="none";
}
function adelete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function aadd_row()
{
var new_acode=document.getElementById("new_acode").value;
var new_aname=document.getElementById("new_aname").value;
var table=document.getElementById("data_table1");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='acode_row"+table_len+"'>"+new_acode+"</td><td id='aname_row"+table_len+"'>"+new_aname+"</td><td><input type='button' id='aedit_button"+table_len+"' value='Edit' class='edit' onclick='aedit_row("+table_len+")'> <input type='button' id='asave_button"+table_len+"' value='Save' class='save' onclick='asave_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='adelete_row("+table_len+")'></td></tr>";
document.getElementById("new_acode").value="";
document.getElementById("new_aname").value="";
}
HTMLコード
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>acad_code</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="css/pages.css">
<script type="text/javascript" src="js/acad_code.js"></script>
</head>
<body>
<br>
<div id="wrapper1">
<table id="data_table1" style="margin-left:100px ;border-radius:10px"; border="1" cellspacing= "2" cellpadding="0">
<tbody>
<tr>
<th>Academic Code</th>
<th>Description</th>
</tr>
<tr>
<td><input type="text" id="new_acode"></td>
<td><input type="text" id="new_aname"></td>
<td><input type="button" class="add" onclick="aadd_row();" value="Add Row"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
は、コンソール上にエラーがありませんか？ –