Question

使用JavaScript动态添加/检测/编辑行。该脚本工作正常，但单击编辑按钮时，保存和删除按钮会出现在另一个下面。这似乎只发生在IE / Edge中，并且在Chrome中运行良好。不知道为什么......？

的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>

Answer 1

尝试为按钮width设置特定td。

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 = "";

}

<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 style="width: 200px;"><input type="button" class="add" onclick="aadd_row();" value="Add Row"></td>
      </tr>

    </tbody>
  </table>
</div>

动态表格单元格未正确调整IE / Edge的大小

1 个答案: