0

I have added add/edit/delete function for my table below. I managed to develop the add_row function in JavaScript. The text inputs seem to work when I click on the Add Row button but not the radio buttons. When I select either Yes/No and click on the Add Row button, the selection does not display at the new row created.

I will really appreciate if I could get some guidance in solving this problem.

function add_row() {
  var new_name = document.getElementById("new_name").value;
  var new_value = document.getElementById("new_value").value;
  var new_yes = document.getElementById("new_yes").value;
  var new_no = document.getElementById("new_no").value;

  var table = document.getElementById("data_table");
  var len = (table.rows.length) - 1;
  var table_len = (document.querySelectorAll('.data_row').length) + 1;
  var row = table.insertRow(len).outerHTML = '<tr class="data_row" id="row' + table_len + '">' +
    '<td id="name_row' + table_len + '">' + new_name + '</td>' +
    '<td id="qty' + table_len + '">' + new_value + '</td>' +
    '<td><input type="radio" id="yes"' + table_len + '"checked></td>' +
    '<td><input type="radio" id="no"' + table_len + '"></td>' +
    '<td><input type="button" id="edit_button' + table_len + '" value="Edit" class="edit" onclick="edit_row(' + table_len + ')"> <input type="button" value="Delete" class="delete" onclick="delete_row(' + table_len + ')"></td>' +
    "</tr>";

  document.getElementById("new_name").value = "";
  document.getElementById("new_value").value = "";
  document.getElementById("new_yes").value = "";
  document.getElementById("new_no").value = "";
}
<table style="width:80% table-layout:fixed" align="center">

  <table class="table1" style="width:70%" align="center" id="data_table" cellspacing=2 cellspacing=5>

    <tr>
      <td></td>
      <td class="cent"><b>Value</b></td>
      <td class="cent"><b>Yes</b></td>
      <td class="cent"><b>No</b></td>
      <td></td>
    </tr>

    <tr class="data_row" id="row1">
      <label id="group1"> <!--label is used to control the respective group of radio buttons-->
    <td id="name_row1">Initial</td>
 <!--The input box in the 'Value' column is set as below-->
    <td class="cent"><input type="number" value="<%=initial%>" align="center" name="Initial" id="qty1" maxlength="4" size="4"/></td>
 <!--The check boxes of 'Yes' and 'No' is created as below-->
    <td class="cent"><input type="radio" name="group1" value="Yes" id="yes('1')"></td>
    <td class="cent"><input type="radio" name="group1" value="No" id="no('1')"></td>
 <td>
  <input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
  
  <input type="button" value="Delete" class="delete" onclick="delete_row('1')">
 </td>
  </label>
    </tr>


    <tr class="data_row" id="row2">
      <label id="group2">
    <td id="name_row2">Drop Test</td>
    <td class="cent"><input type="number" value="<%=droptest%>" align="center" name="Drop Test" id="qty2" maxlength="4" size="4"/></td>
    <td class="cent"><input type="radio" name="group2" value="Yes" id="yes('2')"></td>
    <td class="cent"><input type="radio" name="group2" value="No" id="no('2')"></td>
 <td>
  <input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
  
  <input type="button" value="Delete" class="delete" onclick="delete_row('2')">
 </td>
  </label>
    </tr>

    <tr class="data_row" id="row3">
      <label id="group3">
    <td id="name_row3">Power Up</td>
    <td class="cent"><input type="number" value="<%=powerup%>" align="center" name="Power Up" id="qty3" maxlength="4" size="4"/></td>
    <td class="cent"><input type="radio" name="group3" value="Yes" id="yes('3')"></td>
    <td class="cent"><input type="radio" name="group3" value="No" id="no('3')"></td>
 <td>
  <input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')">
  
  <input type="button" value="Delete" class="delete" onclick="delete_row('3')">
 </td>
  </label>
    </tr>

    <tr>
      <td><input type="text" id="new_name"></td>
      <td class="cent"><input type="text" id="new_value"></td>
      <td class="cent"><input type="radio" name="group28" id="new_yes"></td>
      <td class="cent"><input type="radio" name="group28" id="new_no"></td>
      <td class="cent"><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
    </tr>

  </table>
  </table>
xerxes39
  • 35
  • 1
  • 2
  • 7

1 Answers1

0

Sorry if you didn't want me to, but I've rewritten your code on my purpose, since it's quite messy and there were some inappropriate ways of coding.

var divButtons = document.querySelector('.buttons');
var divBoard   = document.querySelector('.board');

var inputFir = divButtons.children[0];
var inputSec = divButtons.children[1];
var radioYes = divButtons.children[2];
var radioNo  = divButtons.children[3];
var submit   = divButtons.children[4];
var radioCount = 1;

submit.addEventListener('click', function(e){
  e.stopPropagation();
  var div    = document.createElement('div');
  var input1 = document.createElement('input');
  var input2 = document.createElement('input');
  var radio1 = document.createElement('input');
  var radio2 = document.createElement('input');
  
  radio1.type  = 'radio';
  radio2.type  = 'radio';
  radio1.name  = radioCount;
  radio2.name  = radioCount;
  radioCount++;
  
  input1.value = inputFir.value;
  input2.value = inputSec.value;
  
  if(!radioYes.checked && !radioNo.checked){
    radio1.checked = true;
  }else if(radioYes.checked){
    radio1.checked = true;
  }else if(radioNo.checked){
    radio2.checked = true;
  }
  
  div.append(input1, input2, radio1, radio2);
  divBoard.append(div);
});
<div class="board">

</div>
<div class="buttons">
  <input type="text" id="input1"/>
  <input type="text" id="input2"/>
  <input type="radio" name="radio0" id="radioY"/>
  <input type="radio" name="radio0" id="radioN"/>
  <input type="button" id="submit" value="Add Row"/>
</div>

First of all, you better not to approach the DOM element too much, retrieving any DOM elements costs you 'time'. So, the best way to optimize it is to access the DOM just once or as least as you can and save its address to your variable. Even though you might think you should search for the child elements, like 

divButtons.children[0]

however, this is lot faster.

Second, creating DOM using innerHTML is not always the best choice. You can also use createElement method, like I did. If you're interested and wondering why, check this link out. enter link description here

And also, if you use innerHTML, that means you will risk of sql injection attack. Check this out too. enter link description here


Thrid, you can stop bubbling event by putting e.stopPropagation(), when the listener event has been fired. To know more about what it is, click here. enter link description here

moon
  • 640
  • 6
  • 14
  • Of course, there're also some points that better be fixed, it's your part of practice :) Good luck – moon Nov 28 '17 at 04:01
  • Thank you so so much for the idea. It seems to work but whenever I enter values and click on the button, the input for the new row remains the same as the first one. May I know how to resolve this? – xerxes39 Nov 28 '17 at 06:23
  • @xerxes Happy to know it helped you :) Please select my answer ! – moon Nov 28 '17 at 06:23
  • @xerxes well, it's basically because I didn't make that fucntion, lol. But, if you want to know, you can simply initialize the input value when all the tasks are done! – moon Nov 28 '17 at 06:24
  • @xerxes I wouldn't tell you easily since it won't help you practice by yourself, but, I can give you a hint. Look at my code and look for the part in which I've approach to the value of inputs :) – moon Nov 28 '17 at 06:27