JavaScript - 使用复选框添加/删除/编辑行

时间:2016-12-05 11:21:11

标签: javascript jquery html5 checkbox

我使用JavaScript添加/删除/编辑行。该行包括2个文本框和复选框。当我点击编辑时,我可以更改文本框的值,但是对于复选框,我无法执行此操作,甚至单击“保存”复选框的值也未正确存储。你能帮我找一下脚本中的错误吗?

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

2 个答案:

答案 0 :(得分:1)

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

应改为:

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

然后,您将truefalse存储在new_asexam中,并可根据您的需要继续使用逻辑。

Here is a working example

答案 1 :(得分:0)

您正尝试从复选框中获取属性value,但that is not how it works。这是一个选中的复选框:

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