Change a function to disregard clicks initiated within the last cell of every row within a table

Currently, I have a JavaScript function in place that operates in the following manner. Upon clicking any row within the table, it leads to a new page at the link indicated on line 6. (The ID# from column 0 is appended to the end of the link). While this function works flawlessly, I am now looking for it to disregard clicks made in the last cell of each row. My goal is to insert another link in that final cell, and even with this function active, have it redirect to the link on line 6 while ignoring the link in the last cell of the row. The count starts at 2 due to the presence of the table header. How can I adjust the function so that it does not react to clicks in the last cell of every row?

function adjustedRowHandlers(){
        var rows = document.getElementById("mytable").rows;
        for (i = 2; i < rows.length; i++){
            rows[i].onclick = function(){return function(){
                var id = this.cells[0].innerHTML; 
                window.open("https://sitelink/" + id + ";", "Details", "top=150, left=500,height=757, width=900");  
            };}(rows[i]);}}
        window.onload = adjustedRowHandlers();

Answer №1

Apologies for the misunderstanding earlier. My suggestion is to apply the onclick event directly to each cell instead of the entire row. Here is how you can achieve this:

function attachCellClickEvents(){
    var cells = document.getElementById("mytable").getElementsByTagName("td");
    for (var i = 0; i < cells.length; i++) {
        cells[i].onclick = function(){
            var id = this.parentNode.cells[0].innerHTML;
            window.open("https://siteurl/"+id, "Details", "top=150,left=500,height=757,width=900");   
        };
    }
}

window.onload = attachCellClickEvents();

Answer №2

To easily identify and handle the last cells of each row, consider adding a common class name to them. This way, you can avoid using the window.open function for cells with that specific class name. Please see the updated code snippet below:

for (i = 2; i < rows.length; i++) {
    rows[i].onclick = function() {
        for(var j = 0 ; j<=this.cells.length; j++) {
            if(!this.cells[j].classList.contains('your className of last cell for each row')) { 
                var id = this.cells[0].innerHTML; 
                window.open("https://site url/"+id+";", "Details", "top=150, left=500,height=757, width=900");
            }
        }   
    }
}
window.onload = addRowHandlers();`

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can a JavaScript function be used to check a tag's status?

I currently have two select tags on my webpage. I want to ensure that only one option can be selected at a time from these two tags. If the user tries to select options from both tags, an error message should be displayed instructing them to choose only on ...

Resetting the positions of images can be done by following these

I'm currently in the process of developing a game and need assistance with implementing a game end function. Can you provide guidance on how to reset all images back to their original positions? ...

Syntax error: Unexpected character encountered in JavaScript code

Although this question has been asked numerous times before, I have not been able to find a solution that applies to my specific situation. I am currently working on a chat system that involves sending and receiving messages. Here is my PHP code: < ...

Error message: A state has not been defined within the onload function

I'm facing an issue where I am attempting to assign a data URL of an image to a state in Vue.js, but it is not getting assigned properly. After converting a blob URL to a data URL, the state does not contain the correct data URL. While the imgSrc doe ...

Turning On and Off Hover Effects in AngularJS

I am looking to implement a feature that enables and disables the hover state on an element based on certain conditions. As a newcomer to Angular, I am unsure of how to approach this and haven't been able to find a solution online. Here is a sample o ...

Node.js Mongoose MongoDB causing issues with bodyparser

Combining two different applications - an authentication app and a to-do app where users input data and the app displays it. Both apps work fine separately, but after merging them, there is a parse error in the second app. The issue seems to be related to ...

Issue arises as Protractor's custom locator is unable to find the desired element

I decided to enhance the identification and interaction process in Protractor by adding a custom data attribute called data-test-id to specific elements. To achieve this, I created a custom locator within the onPrepare callback function in my conf.js file. ...

What is the most effective way to programmatically recreate scope in AngularJS?

Currently, I am working on implementing UI-router to handle state changes in my application. My initial belief was that switching states on a dynamic route would result in the current scope getting destroyed and a new scope being created for the template w ...

What steps should be taken to set up the datatable to sort records in descending order based on the creation date?

In my Rails application, I am utilizing the Datatable plugin to display data on the User index page. The first column in the index page is the created_at field, which displays dates like Mon, 17-Oct-16. I want to sort this column in descending order base ...

Tips for clearing a textbox value in JQuery after a 5-second delay

I attempted the following: <script type="text/javascript"> $(function() { $("#button").click( function() { alert('button clicked'); // this is executed setTimeout(function() ...

Advancing in the world of three.js

var leftKey = 72; var rightKey = 74; document.onkeydown = checkKey; function checkKey(e){ e = e || window.event; if(e.keyCode === leftKey){ car.position.z = car.position.z -10; } if(e.keyCode === rightKey){ ...

Efficiently making JQuery Ajax requests using HTTP Basic Authentication

I am currently experiencing challenges with implementing HTTP Basic Authentication in JQuery when communicating with a REST-based server. This server provides responses in both XML and JSON formats, but I have chosen to work with JSON format. Our authoriz ...

What is the best way to selectively delete elements in d3.js?

I am faced with the task of manipulating a graph. I begin by opening and processing a file to extract the necessary modifications for the graph. These modifications are essentially node names stored within the text field of each node. My challenge lies in ...

What is the best way to sort through received JSON information?

I am attempting to create a simple command that retrieves information from imgur, locates the images, and then randomly selects which photo to display. The issue I am encountering is my inability to filter the responses based on specific criteria. Below is ...

Microphone Malfunction: Abrupt End of Input Detected

I have been experimenting with SpeechRecognition to incorporate microphone functionality into one of my projects. However, when I check the Chrome Console, it displays the error message: Unexpected end of input const speechRecognition = window.webkitS ...

Exporting JSON data to CSV or XLS does not result in a saved file when using Internet Explorer

Presented below is the service I offer: angular.module('LBTable').service('exportTable', function () { function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel, fileName) { //If JSONData isn't an object, parse the ...

Is it Possible for Angular Layout Components to Render Content Correctly even with Deeply Nested ng-container Elements?

Within my Angular application, I have designed a layout component featuring two columns using CSS. Within this setup, placeholders for the aside and main content are defined utilizing ng-content. The data for both the aside and main sections is fetched fr ...

Spacing issues with inline-block elements when dealing with a large quantity of items

Currently, I am tackling the JS/jQuery Project for The Odin Project and I am confident that my solution is working exceptionally well. However, the issue I am facing is that when dealing with larger amounts of elements (around 40-45 in JSFiddle and 50-52 ...

Remove the ID, class, and other attributes from an HTML string using JavaScript for sanitization purposes

Can someone help me with sanitizing HTML text provided by a user? The HTML code in question is as follows: var htmlStr = `<p id="test" class="mydemo">TEhis is test</p> <pre class="css"> &lt;html> &lt;body cl ...

Passing scope data to JSON in AngularJS involves converting the data from the

Hello, what is the best way to transfer $scope data to JSON during initialization? For example, I have a scope with users: $scope.users = [ { name: "Camila Gilson" }, { name: "Chloe Creighton" }, { name: "Zoey White" } ]; I am interested in storin ...