複数の選択オプションで行を追加/編集/削除する - Javascript

Question

JavaScriptを使用して行を追加/削除/編集しています。行には4つのテキストボックスと2つの選択ボックスが含まれます。スクリプトは1つの選択ボックスでのみ動作しますが、同時に両方では動作しません。スクリプトでエラーを見つけてもらえますか？以下は

HTML

<table style="text-align: left; width: 1115px; height: 228px;" border="1" id="data_table" cellpadding="2" cellspacing="2"> 
    <tr> 
    <th>Fee Code</th> 
    <th>Fee Name</th> 
    <th>Fee Category</th> 
    <th>Fee Type</th> 
    <th>Payment Frequency</th> 
    <th>Fee Amount (in Rs)</th> 
    <th>Due Date</th> 

    </tr> 

    <tr id="row1"> 
    <td id="ffcode_row1">AF</td> 
    <td id="ffname_row1">Annual Fees</td> 
    <td id="ffcategory_row1">Admission</td> 
    <td id="fftype_row1">Fixed Fee</td> 
    <td id="fffrequency_row1">Yearly</td> 
    <td id="ffamount_row1" class="ffeetotal">1000</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="ffcategory_row2">Medical</td> 
    <td id="fftype_row2">Fixed Fee</td> 
    <td id="fffrequency_row2">Quarterly</td> 
    <td id="ffamount_row2" class="ffeetotal">2000</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="ffcategory_row3">General</td> 
    <td id="fftype_row3">Fixed Fee</td> 
    <td id="fffrequency_row1">Quarterly</td> 
    <td id="ffamount_row3" class="ffeetotal">3000</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><input type="text" id="new_ffcategory"></td> 
    <td> 
    <select name="fftype" id="new_fftype"> 
     <option value="">-select-</option> 
     <option value="Fixed">Fixed Fee</option> 
     <option value="Refundable">Refundable Fee</option> 
     <option value="NonRefundable">Non Refundable Fee</option> 
     </select> 
    </td> 
    <td> 
    <select name="fffrequency" id="new_fffrequency"> 
     <option value="">-select-</option> 
     <option value="Daily">Daily</option> 
     <option value="Weekly">Weekly</option> 
     <option value="Monthly">Quarterly</option> 
     <option value="Quarterly">Quarterly</option> 
     <option value="Yearly">Quarterly</option> 
     <option value="One-off">One-off</option> 
     </select> 
    </td> 
    <td><input type="number" id="new_ffamount" class="ffeetotal"></td> 
    <td><input type="date" id="new_ffdate"></td> 
    <td><input type="button" class="add" onclick="add_row();" value="Add Row"></td> 
    </tr> 
    </table> 

私が書かれているjavasciptです：

function edit_row(no) 
{ 
document.getElementById("edit_button"+no).style.display="none"; 
document.getElementById("save_button"+no).style.display="block"; 

var ffcode=document.getElementById("ffcode_row"+no); 
var ffname=document.getElementById("ffname_row"+no); 
var ffcategory=document.getElementById("ffcategory_row"+no); 
var fftype=document.getElementById("fftype_row"+no); 
var fffrequency=document.getElementById("fffrequency_row"+no); 
var ffamount=document.getElementById("ffamount_row"+no); 
var ffdate=document.getElementById("ffdate_row"+no); 

var ffcode_data=ffcode.innerHTML; 
var ffname_data=ffname.innerHTML; 
var ffcategory_data=ffcategory.innerHTML; 
var fftype_data=fftype.innerHTML; 
var fffrequency_data=fftype.innerHTML; 
var ffamount_data=ffamount.innerHTML; 
var ffdate_data=ffdate.innerHTML; 

ffcode.innerHTML="<input type='text' id='ffcode_text"+no+"' value='"+ffcode_data+"'>"; 
ffname.innerHTML="<input type='text' id='ffname_text"+no+"' value='"+ffname_data+"'>"; 
ffcategory.innerHTML="<input type='text' id='ffcategory_text"+no+"' value='"+ffcategory_data+"'>"; 
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>"; 
fffrequency.innerHTML="<select id='fffrequency_text"+no+"' value='"+fffrequency_data+"'><option value="">-select-</option><option value='Daily'>Daily</option><option value='Weekly'>Weekly</option><option value='Monthly'>Monthly</option><option value='Quarterly'>Quarterly</option><option value='Yearly'>Yearly</option><option value=,One-off'>One-off</option></select>"; 
ffamount.innerHTML="<input type='number' class='ffeetotal' id='ffamount_text"+no+"' value='"+ffamount_data+"'>"; 
ffdate.innerHTML="<input type='date' id='ffdate_text"+no+"' value='"+ffdate_data+"'>"; 
} 

function save_row(no) 
{ 
var ffcode_val=document.getElementById("ffcode_text"+no).value; 
var ffname_val=document.getElementById("ffname_text"+no).value; 
var ffcategory_val=document.getElementById("ffcategory_text"+no).value; 
var e =document.getElementById("fftype_text"+no); 
var fftype_val=e.options[e.selectedIndex].text; 
var f =document.getElementById("fffrequency_text"+no); 
var fffrequency_val=f.options[f.selectedIndex].text; 
var ffamount_val=document.getElementById("ffamount_text"+no).value; 
var ffdate_val=document.getElementById("ffdate_text"+no).value; 

document.getElementById("ffcode_row"+no).innerHTML=ffcode_val; 
document.getElementById("ffname_row"+no).innerHTML=ffname_val; 
document.getElementById("ffcategory_row"+no).innerHTML=ffcategory_val; 
document.getElementById("fftype_row"+no).innerHTML=fftype_val; 
document.getElementById("fffrequency_row"+no).innerHTML=fffrequency_val; 
document.getElementById("ffamount_row"+no).innerHTML=ffamount_val; 
document.getElementById("ffdate_row"+no).innerHTML=ffdate_val; 

document.getElementById("edit_button"+no).style.display="block"; 
document.getElementById("save_button"+no).style.display="none"; 
} 

function delete_row(no) 
{ 
document.getElementById("row"+no+"").outerHTML=""; 
} 

function add_row() 
{ 
var new_ffcode=document.getElementById("new_ffcode").value; 
var new_ffname=document.getElementById("new_ffname").value; 
var new_ffcategory=document.getElementById("new_ffcategory").value; 
var new_fftype=document.getElementById("new_fftype").value; 
var new_fffrequency=document.getElementById("new_fffrequency").value; 
var new_ffamount=document.getElementById("new_ffamount").value; 
var new_ffdate=document.getElementById("new_ffdate").value; 

var table=document.getElementById("data_table"); 
var table_len=(table.rows.length)-1; 
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='ffcode_row"+table_len+"'>"+new_ffcode+"</td><td id='ffname_row"+table_len+"'>"+new_ffname+"</td><td id='ffcategory_row"+table_len+"'>"+new_ffcategory+"</td><td id='fftype_row"+table_len+"'>"+new_fftype+"</td><td id='fffrequency_row"+table_len+"'>"+new_fffrequency+"</td><td class='ffeetotal' id='ffamount_row"+table_len+"'>"+new_ffamount+"</td><td id='ffdate_row"+table_len+"'>"+new_ffdate+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>"; 

document.getElementById("new_ffcode").value=""; 
document.getElementById("new_ffname").value=""; 
document.getElementById("new_ffcategory").value=""; 
document.getElementById("new_fftype").value=""; 
document.getElementById("new_fffrequency").value=""; 
document.getElementById("new_ffamount").value=""; 
document.getElementById("new_ffdate").value=""; 
} 

Answer 1

は解決策を見つけた...問題が見つかりました。オプションの1