JavaScript - Add/delete/edit rows with checkbox

Question

I am using JavaScript to add/delete/edit rows. The row includes 2 textbox and checkbox. When I click on edit I am able to change the value of textbox but for checkbox I am not able to do it and also even on clicking Save the value of checkbox is not stored correctly. Can you please help me finding the error in script ?

Below is 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>

Below is 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="";
}

my eyes... **Use arrays please!** – ixpl0 Dec 05 '16 at 11:24 — ixpl0, Dec 05 '16 at 11:24
...and **camelCase**... and `for` cycle... – ixpl0 Dec 05 '16 at 11:28 — ixpl0, Dec 05 '16 at 11:28

score 1 · Accepted Answer · answered Dec 05 '16 at 11:41

1

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

Should be changed to:

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

Then you will get either true or false stored in new_asexam and can continue with the logic per your needs.

Here is a working example.

answered Dec 05 '16 at 11:41

Alon Adler

3,984
4
32
44

@JignaJain You had wrong ids in `assave_row` function. Check my example now, i've updated it and save is also working. – Alon Adler Dec 05 '16 at 13:27

score 0 · Answer 2 · edited May 23 '17 at 12:08

0

You are trying to get the attribute value from the checkbox, but that is not how it works. This is a checked checkbox:

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

edited May 23 '17 at 12:08

Community

1
1

answered Dec 05 '16 at 11:33

Pablo Lozano

10,122
2
38
59

JavaScript - Add/delete/edit rows with checkbox

2 Answers2