Append Table Array Value To Another Array

January 31, 2023 Post a Comment

I have this code below that popups the cell value whenever the user clicks a specific cell. What I'm currently trying to do is when the user clicks a cell i want that cell value to

Solution 1:

Restructure your code to have a method to redraw UI and to enable event listeners:

function redraw (obj) {

  var $header = $('<tr>'),
    cols = 0,
    bodyString = ''

  $.each(obj, function (key, values) {
    cols = Math.max(cols, values.length) // find the longest
    $header.append($('<th/>').text(key + ': ' + values.length))
  })
  for (var i = 0; i < cols; i++) { // or use .map, but this is more undertandable for beginners
    bodyString += '<tr>'
    $.each(obj, function (key, values) {
      bodyString += '<td>' +
        (values[i] ? values[i] : '') + // ternary - instead of using if/else
        '</td>'
    })
    bodyString += '</tr>'
  }
  $('.fruitsTableClass thead').html($header)
  $('.fruitsTableClass tbody').html(bodyString)
}

function listener (obj) {
  tbl = document.getElementById('fruitsTable')
  if (tbl != null) {
    for (var i = 0; i < tbl.rows.length; i++) {
      for (var j = 0; j < tbl.rows[i].cells.length; j++)
        tbl.rows[i].cells[j].onclick = function () {
          getval(this)
          obj[key2].push(this.innerHTML)
          redraw(obj)
          listener(obj)
        };
    }
  }
}

function getval (cel) {
  alert(cel.innerHTML)
}

redraw(obj)
listener(obj)

JSFiddle - https://jsfiddle.net/gnm8wv5f/

Solution 2:

To add rows or cells to a table, you should use the methods insertRow() and insertCell().

Example, if you want to add a cell at the beginning of a row (from w3schools):

var row = document.getElementById("myRow");
var x = row.insertCell(0);
x.innerHTML = "New cell";

Or, to insert at the end:

var x = row.insertCell(row.cells.length);

Using cells.length you can find the number of cells in a particluar row, in that way you could know where to insert the new cell.

More info in: w3 | MDN

Solution 3:

Try this code.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var daraArray=[];   
$(document).ready(function(){
    $(".classTd").click(function(){
       //console.log($(this).html());
       daraArray.push($(this).html());
       console.log(daraArray);
    });
});
</script>

<style type="text/css">
    .classTd{
        text-align: center;
    }
</style>
</head>


<table id="fruitsTable" class="fruitstableroni skillsTable class" border="1">
    <thead></thead>
    <tbody>
        <tr>
            <td class="classTd" width="10%">1</td>
            <td class="classTd" width="10%">2</td>
            <td class="classTd" width="10%">3</td>
        </tr>

        <tr>
            <td class="classTd" width="10%">4</td>
            <td class="classTd" width="10%">5</td>
            <td class="classTd" width="10%">6</td>
        </tr>

        <tr>
            <td class="classTd" width="10%">7</td>
            <td class="classTd" width="10%">8</td>
            <td class="classTd" width="10%">9</td>
        </tr>
    </tbody>
</table>
</html>

Solution 4:

The other answers here are good but you should definitely try AngularJs. The ng-repeat tag will easily cater your functionality.

Html5 Library

Append Table Array Value To Another Array

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Append Table Array Value To Another Array"