CODEWITHSUNDEEP
javascripthtml
opelhatza
opelhatza

Reputation: 242

How to find out which row was clicked?

Hello i generate a Table with javascript and now i wont to find out which row and column the user has clicked?

Here are my function for the table:

function doNextSteps() {

    removeAustriaFromCountries();

    //insert table
    var table = document.createElement("table");
    table.setAttribute('id', 'matrixTable');
    table.setAttribute('class', 'jbiTable');

    // insert MATRIX row
    var matrixRow = table.insertRow();
    var cell = matrixRow.insertCell(); // left column for countries
    cell.setAttribute('class', 'jbiMatrixCell');
    cell.setAttribute('colSpan', departments.length + 1);
    cell.appendChild(document.createTextNode("MATRIX"));

    // insert departments row
    var departmentsRow = table.insertRow();
    var cell = departmentsRow.insertCell(); // left column for countries
    cell.setAttribute('class', 'jbiBlankCell');

    for (var i = 0; i < departments.length; i++) {
        var cell = departmentsRow.insertCell();
        cell.appendChild(document.createTextNode(departments[i].name));
        cell.setAttribute('class', 'jbiDepartmentCell');
    }

    for (var i = 0; i < countries.length; i++) {
        var countryRow = table.insertRow();
        var cell = countryRow.insertCell(); // left country column
        //cell.appendChild(document.createTextNode(countries[i].name)); 
        var img = document.createElement('img');
        img.src = "example.com + flags[i].name";
        cell.appendChild(img);
        cell.setAttribute('class', 'jbiCountryCell');
        for (var j = 0; j < departments.length; j++) {
            var cell = countryRow.insertCell();
            var img = document.createElement('img');
            img.src = "https://intranet.windkraft.at/OrganisationManual/Documents/Kreis.jpg";
            img.onclick = function () {
                window.location.href = "example.com" + pdfFiles[i].name;
            };
            cell.appendChild(img);
            cell.setAttribute('class', 'jbiCircleCell');
        }
    }


    $("#divTable").append(table);

}

The table gets generated and now i want to know in which header and in which column the user has clicked. With that information i want to make a new query to get files dynamically displayed in the Table. Any help would be great. And thanks for your Help.

Upvotes: 0

Views: 50

Answers (2)

brk
brk

Reputation: 50291

You can use parentNode.rowIndex & cellIndex to get the cell & rowIndex

document.getElementsByTagName('table')[0].addEventListener('click', function(e) {
  console.log(e.target.parentNode.rowIndex,' ',e.target.cellIndex);
 }, false);

Check this jsFiddle

Upvotes: 0

PitaJ
PitaJ

Reputation: 15012

To get the index of the row, you can use this code in your event listener function:

function onClick() {
  var cell = this;
  var row = cell.parentNode;
  var cellIndex = Array.prototype.indexOf.call(row.children, cell);
  var rowIndex = Array.prototype.indexOf.call(row.parentNode.children, row);

  // do stuff with rowIndex, cellIndex
  // rowIndex is the row number starting with row 0
  // cellIndex is the column number starting with column 0
}

Upvotes: 1

Related Questions