Question

我使用JavaScript添加/删除/编辑行。该行包括4个文本框和一个选择框。当我点击编辑时，我可以更改文本框的值，但是对于选择框，因为选项不显示我无法做到，甚至单击保存复选框的值未正确存储（它会使值不存在说明）。你能帮我找一下脚本中的错误吗？

下面是html

10.0.14393.0

正在使用的Javascript

<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <link rel="stylesheet" href="masterfees.css" />
    <title>feemaster</title>
    <script type="text/javascript" src="feesmain.js"></script>
  </head>
  <body>
    <h2>Fee Code Maintenance</h2>
    <div id="wrapper">
      <table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
        <tr>
          <th>Fee Code</th>
          <th>Fee Name</th>
          <th>Fee Type</th>
          <th>Due Date</th>
        </tr>

        <tr id="row1">
          <td id="ffcode_row1">AF</td>
          <td id="ffname_row1">Annual Fees</td>
          <td id="fftype_row1">Fixed Fee</td>
          <td id="ffdate_row1">2016-12-21</td>
          <td>
            <input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
            <input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
            <input type="button" value="Delete" class="delete" onclick="delete_row('1')">
          </td>
        </tr>
        <tr id="row2">
          <td id="ffcode_row2">MF</td>
          <td id="ffname_row2">Medical Fees</td>
          <td id="fftype_row2">Fixed Fee</td>
          <td id="ffdate_row2">2016-12-11</td>
          <td>
            <input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
            <input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
            <input type="button" value="Delete" class="delete" onclick="delete_row('2')">
          </td>
        </tr>

        <tr id="row3">
          <td id="ffcode_row3">TF</td>
          <td id="ffname_row3">Tution Fees</td>
          <td id="fftype_row3">Fixed Fee</td>
          <td id="ffdate_row3">2016-11-11</td>
          <td>
            <input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')">
            <input type="button" id="save_button3" value="Save" class="save" onclick="save_row('3')">
            <input type="button" value="Delete" class="delete" onclick="delete_row('3')">
          </td>
        </tr>

        <tr>
          <td><input type="text" id="new_ffcode"></td>
          <td><input type="text" id="new_ffname"></td>
          <td>
            <select name="fftype" id="new_fftype">
              <option value="">-select-</option>
              <option value="FF">Fixed Fee</option>
              <option value="RF">Refundable Fee</option>
              <option value="PF">Penalty Fee</option>
              <option value="DF">Discounts</option>
            </select>
          </td>
          <td><input type="date" id="new_ffdate"></td>
          <td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
        </tr>
      </table>
    </div>
  </body>
</html>

Answer 1

您的function edit_row()未向您的select dropdown附加相应的table-cell。尝试在edit_row中更改这些行：

fftype.innerHTML="<select id='fftype_text"+no+"' value='"+fftype_data+"'>
<option value>-select-</option>
<option value='FF'>Fixed Fee</option>
<option value='RF'>Refundable Fee</option>
<option value='PF'>Penalty Fee</option>
<option value='DF'>Discounts</option>
</select>";

和save_row()：

var e =document.getElementById("fftype_text"+no);
var fftype_val=e.options[e.selectedIndex].text;

这是Code Snipet

使用选择选项添加/编辑/删除行 - Javascript

1 个答案: