Question 244196 in Html Question posted in
Some basic documentation can be found here.

Html – I want to add input box and name attribute in input tag using javascript while inside table row while creating using javascript on the run time

I was trying to add the new table row using javascript when the user clicks on the add button. I have successfully created the logic for it. Further I am adding input box within the <td> tag and name attribute inside the <input> tag, but my code is only adding input box either in the first td of tr tag or at the end.

My code follows :-

srno = 1

function CreateTables() {
  var inputbox = document.createElement('input')
  inputbox.classList.add('textbox')

  const tables = document.querySelector('table')

  const NewRow = tables.insertRow(-1)

  let cell1 = NewRow.insertCell(0)
  cell1.innerHTML = (srno += 1)

  let cell2 = NewRow.insertCell(1)
  cell2.appendChild(inputbox)

  let cell3 = NewRow.insertCell(2)
  cell3.appendChild(inputbox)

  let cell4 = NewRow.insertCell(3)
  cell4.appendChild(inputbox)

  let cell5 = NewRow.insertCell(4)
  cell5.appendChild(inputbox)
}

let add = document.querySelector('.Addbutton')
add.addEventListener('click', function() {
  CreateTables()
});
<form method='post' action='/analyzer'>
  <div class='Mainbox'>
    <div class='mytable'>
      <table class="table">
        <thead>
          <tr>
            <th scope="col">Sr no.</th>
            <th scope="col">Name of Appliances</th>
            <th scope="col">Watts (w)</th>
            <th scope="col">Number</th>
            <th scope="col">No. of Hours</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td scope="row" class='srno'>1</td>
            <td><input class='textbox' type='text' name='nameofapp'></td>
            <td><input class='textbox' type='number' name='watts'></td>
            <td><input class='textbox' type='number' name='no'></td>
            <td><input class='textbox' type='number' name='hours'></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class='submit'>
    <button class='Submitbutton' type='submit'>Submit</button>
  </div>
</form>
<div class='add'>
  <button type='submit' class='Addbutton'>Add</button>
</div>

Pls help me adding <input> tag in all <td> tags of new table row generated. Also how can I add the name attribute within the <input> tag

Tags:

3

Answers


  1. 0

    Appending an element doesn’t make a copy of it. Every time you do cellN.appendChild(inputbox) you move the input box from the previous cell to the current cell.

    You can use inputbox.cloneNode() to make a copy of it.

    srno = 1

function CreateTables() {
  var inputbox = document.createElement('input')
  inputbox.classList.add('textbox')

  const tables = document.querySelector('table')

  const NewRow = tables.insertRow(-1)

  let cell1 = NewRow.insertCell(0)
  cell1.innerHTML = (srno += 1)

  let cell2 = NewRow.insertCell(1)
  cell2.appendChild(inputbox)

  let cell3 = NewRow.insertCell(2)
  cell3.appendChild(inputbox.cloneNode())

  let cell4 = NewRow.insertCell(3)
  cell4.appendChild(inputbox.cloneNode())

  let cell5 = NewRow.insertCell(4)
  cell5.appendChild(inputbox.cloneNode())
}

let add = document.querySelector('.Addbutton')
add.addEventListener('click', function() {
  CreateTables()
});
    <form method='post' action='/analyzer'>
  <div class='Mainbox'>
    <div class='mytable'>
      <table class="table">
        <thead>
          <tr>
            <th scope="col">Sr no.</th>
            <th scope="col">Name of Appliances</th>
            <th scope="col">Watts (w)</th>
            <th scope="col">Number</th>
            <th scope="col">No. of Hours</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td scope="row" class='srno'>1</td>
            <td><input class='textbox' type='text' name='nameofapp'></td>
            <td><input class='textbox' type='number' name='watts'></td>
            <td><input class='textbox' type='number' name='no'></td>
            <td><input class='textbox' type='number' name='hours'></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class='submit'>
    <button class='Submitbutton' type='submit'>Submit</button>
  </div>
</form>
<div class='add'>
  <button type='submit' class='Addbutton'>Add</button>
</div>
    Login or Signup to reply.
  2. 0

    You may make use of innerHTML property on cells.

        const NewRow = tables.insertRow(-1)

    let cell1 = NewRow.insertCell(0)
    cell1.innerHTML = (srno += 1)

    let cell2 = NewRow.insertCell(1)
    cell2.innerHTML = "<input name='nameOfApp'>";


    let cell3 = NewRow.insertCell(2)
    cell3.innerHTML = "<input name='watts'>";

    let cell4 = NewRow.insertCell(3)
    cell4.innerHTML = "<input name='number'>";

    let cell5 = NewRow.insertCell(4)
    cell5.innerHTML = "<input name='noOfHours'>";
    Login or Signup to reply.
  3. 0 
    function CreateTables() {        
        const tables = document.querySelector('table');
        let tbody = tables.getElementsByTagName("tbody")[0];
        let tr_clone = tbody.children[0].cloneNode(true);
        tr.children[0].innerHTML = (srno += 1);            
        const NewRow = tables.insertRow(-1);
        NewRow.innerHTML = tr.innerHTML;
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search