How to print an array single elements of an array in a table?

Question

number is of type array which stores some numbers when called addNumber function and displays that array in another table which has a row with id as "output".Right now in my single td element of table all the elements of the array are printed but i need to print single array element to single td element. How can I achieve this?

Html

   <table>
<tr>
<td id="output"></td> // I want every element of the array to print in single //td element.right now all elements of the array are printing in first td element.
<td></td>
<td></td>
... and do on 
</tr>
    </table>

<table>
  <tr>

    <td onClick="addNumber(1)">1</td>
    <td onClick="addNumber(2)">2</td>
    <td onClick="addNumber(3)">3</td>

  </tr>
  <tr>

    <td>4</td>
    <td>5</td>
    <td>6</td>

  </tr>
</table>

javascript

let number = [];

function addNumber( num) {      
   number.push(num);
   console.log( number );
   document.getElementById("output").innerHTML = number;
}

Nikhil Aggarwal · Accepted Answer · 2018-06-13 09:38:02Z

2

You need to give id to your tr and on every click append a td to it. Also, the value for td will be the num and not the number which is an array.

let number = [];

function addNumber(num) {
  number.push(num);
  document.getElementById("output").innerHTML += "<td>" + num + "</td>";
}

function deleteNumber() {
  number.pop();
  var output = document.getElementById('output');
   output.removeChild(output.lastChild);
}

<table>
  <tr id="output"></tr>
</table>
<table>
  <tr>
    <td onClick="addNumber(1)">1</td>
    <td onClick="addNumber(2)">2</td>
    <td onClick="addNumber(3)">3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>
<a onClick="deleteNumber()">Delete</a>

edited Jun 13, 2018 at 9:38

answered Jun 13, 2018 at 9:18

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Aditya Over a year ago

document.getElementById("output").innerHTML += "<td>" + num + "</td>"; this line adds a td what if I have to remove a td ?

Nikhil Aggarwal Over a year ago

What is the operation that triggers the delete?

Aditya Over a year ago

press key which is left of " 0 " in the keypad. if u visit the above url

Aditya Over a year ago

function deleteNumber() { number.pop(); document.getElementById("number").innerHTML = number; console.log('number', number); }

Nikhil Aggarwal Over a year ago

@Aditya - That url is your system url which is not accessible over net. Please update your question and add the html and the complete requirement there

|

Akhil Aravind · Accepted Answer · 2018-06-13 09:23:03Z

0

You need to append each result to tr; :D

let number = [];

function addNumber( num) {      
   number.push(num);
   dislpayArray(number)
}

function dislpayArray(number){
    var el= document.getElementById("output");
    var output;
    number.forEach(function (item){
      output = '<td>'+item+'</td>';
   })
   el.innerHTML += output; 
}

<table>
  <tr id="output">
    
  </tr>
</table>
<table>
  <tr>
    <td onClick="addNumber(1)">1</td>
    <td onClick="addNumber(2)">2</td>
    <td onClick="addNumber(3)">3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

answered Jun 13, 2018 at 9:23

Akhil Aravind

6,0451 gold badge18 silver badges37 bronze badges

Comments

Harish Karthick · Accepted Answer · 2018-06-13 09:41:41Z

0

Try this it would be helpful for the large table and dynamic data's

$(document).ready(function(){
let number = [];
	$('#clickble td').on('click',function(){
		var value = $(this).html();
		addNumber(value);
	});
	function addNumber(num) {
  number.push(num);
		$('#output').append("<td>" +num+"</td>");
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="output"></tr>
</table>
<table>
  <tr id="clickble">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

answered Jun 13, 2018 at 9:41

Harish Karthick

7202 gold badges14 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to print an array single elements of an array in a table?

3 Answers 3

13 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

13 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related