Как распечатать массив отдельных элементов массива в таблице?

Question

число имеет тип массива, который хранит некоторые числа при вызове функции addNumber и отображает этот массив в другой таблице, в которой строка с идентификатором имеет значение «output». Теперь в моем единственном элементе таблицы td все элементы массиванапечатано, но мне нужно напечатать один элемент массива в один элемент TD.Как мне этого добиться?

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;
}

Answer 1

Вам нужно добавить каждый результат в 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>

Answer 2

Попробуйте, это будет полезно для больших таблиц и динамических данных

$(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>

Answer 3

Вам необходимо присвоить идентификатор своему tr и при каждом клике добавлять к нему td.Кроме того, значение для td будет num, а не number, который является массивом.

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>