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

时间:2016-12-05 23:09:05

标签: javascript jquery html select

我使用JavaScript添加/删除/编辑行。该行包括4个文本框和两个选择框。该脚本仅适用于一个选择框,但不能同时使用这两个选择框。你能帮我找一下脚本中的错误吗?

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

1 个答案:

答案 0 :(得分:0)

找到了解决方案......问题在于其中一个选项

中包含双引号