2016-12-05 60 views
-1

我正在使用JavaScript來添加/刪除/編輯行。該行包含2個文本框和複選框。當我點擊編輯時,我可以改變文本框的值,但對於複選框,我無法做到這一點,甚至點擊保存複選框的值沒有正確存儲。你能幫我找到腳本中的錯誤嗎?JavaScript - 使用複選框添加/刪除/編輯行

下面是HTML

<div id="wrapper5"> 
    <table align='center' cellspacing=2 cellpadding=5 id="data_table5" border=1> 

    <tr> 
    <th>Assessment Code</th>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
    <th>Description</th> 
    <th>Is Exam?<th> 
    </tr> 

    <tr> 
    <td><input type="text" id="new_ascode"></td> 
    <td><input type="text" id="new_asname"></td> 
    <td><input type="checkbox" id="new_asexam"></td> 
    <td><input type="button" class="add" onclick="asadd_row();" value="Add Row"></td> 
    </tr> 

    </table> 
</div> 

下面是JavaScript的:

function asedit_row(no) 
{ 
document.getElementById("asedit_button"+no).style.display="none"; 
document.getElementById("assave_button"+no).style.display="block"; 

var ascode=document.getElementById("ascode_row"+no); 
var asname=document.getElementById("asname_row"+no); 
var asexam=document.getElementById("asexam_row"+no); 

var ascode_data=ascode.innerHTML; 
var asname_data=asname.innerHTML; 
var asexam_data=asexam.innerHTML; 


ascode.innerHTML="<input type='text' id='ffcode_text"+no+"' value='"+ascode_data+"'>"; 
asname.innerHTML="<input type='text' id='ffname_text"+no+"' value='"+asname_data+"'>"; 
asexam.innerHTML="<input type='checkbox' id='asexam_text"+no+"' value='"+asexam_data+"'>"; 
} 

function assave_row(no) 
{ 
var ascode_val=document.getElementById("ascode_text"+no).value; 
var asname_val=document.getElementById("asname_text"+no).value; 
var asexam_val=document.getElementById("asexam_text"+no).value; 

document.getElementById("ascode_row"+no).innerHTML=ascode_val; 
document.getElementById("asname_row"+no).innerHTML=asname_val; 
document.getElementById("asexam_row"+no).innerHTML=asexam_val; 

document.getElementById("asedit_button"+no).style.display="block"; 
document.getElementById("assave_button"+no).style.display="none"; 
} 

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

function asadd_row() 
{ 
var new_ascode=document.getElementById("new_ascode").value; 
var new_asname=document.getElementById("new_asname").value; 
var new_asexam=document.getElementById("new_asexam").value; 


var table=document.getElementById("data_table5"); 
var table_len=(table.rows.length)-1; 
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='ascode_row"+table_len+"'>"+new_ascode+"</td><td id='asname_row"+table_len+"'>"+new_asname+"</td><td id='asexam_row"+table_len+"'>"+new_asexam+"</td><td><input type='button' id='asedit_button"+table_len+"' value='Edit' class='edit' onclick='asedit_row("+table_len+")'> <input type='button' id='assave_button"+table_len+"' value='Save' class='save' onclick='assave_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='asdelete_row("+table_len+")'></td></tr>"; 

document.getElementById("new_ascode").value=""; 
document.getElementById("new_asname").value=""; 
document.getElementById("new_asexam").value=""; 
} 
+0

我的眼睛... **請使用數組!** – ixpl0

+0

...和** camelCase ** ...和'for'循環... – ixpl0

回答

1
new_asexam=document.getElementById("new_asexam").value 

應改爲:

new_asexam=document.getElementById("new_asexam").checked 

然後你會得到兩種truefalse存儲在new_asexam,可與每個您需要的邏輯繼續。

Here is a working example

+0

謝謝@Alon_A ...保存功能仍然不行工作... –

+0

@JignaJain你在'assave_row'函數中有錯誤的ID。現在檢查我的例子,我已經更新它,並保存也工作。 –

0

你正試圖從複選框獲取屬性value,但that is not how it works。這是一個選中的複選框:

<input name="name" id="id" type="checkbox" checked="checked">