There appears to be an issue with the addrow() function in JavaScript

function addNewRow() {

    var medication = document.getElementById("medicinename");
    var timeOfDay = document.getElementById("time");
    var treatmentDuration = document.getElementById("duration");
    var timing = document.getElementById("when");
    var tableData = document.getElementById("myTableData");

    var currentRowCount = tableData.rows.length;
    var newRow = tableData.insertRow(currentRowCount);

    newRow.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
    newRow.insertCell(1).innerHTML= medication.value;
    newRow.insertCell(2).innerHTML= timeOfDay.value;
    newRow.insertCell(3).innerHTML= treatmentDuration.value;
    newRow.insertCell(4).innerHTML= timing.value;

    var cellToUpdate=newRow.insertCell(1);
    var inputElement =document.createElement("input");
    inputElement.type = "text"; 
    inputElement.setAttribute("name", "productDynamic");
    var medName=medication.value;
    inputElement.value = medName;
    cellToUpdate.appendChild(inputElement);
}

In this code snippet, an onclick function is used in JavaScript to insert values into a table. There are 5 columns in the table, and a delete button is inserted in the first column. However, there seems to be an issue with var cel2=row.insertcell(1), as it ends up displaying 6 columns instead of 5. If anyone familiar with JavaScript could provide assistance regarding this problem, it would be greatly appreciated. Additionally, when passing a value through a textfield, everything works correctly. Yet, using a select field with option values causes the value not to be captured, even after implementing

element2.setattribute("name","productDynamic");
. Any suggestions on how to resolve this issue?

Answer №1

The function row.insertCell is used to insert a new cell into a row at a specified index.

When the index provided is -1 or equal to the number of cells, the new cell will be added as the last cell in the row. If the index exceeds the number of cells, an IndexSizeError exception will be thrown. If no index is provided, it defaults to -1. Link

In my understanding, when you insert a new cell at an existing index, it will be appended. If you wish to replace the cell, simply retrieve it using row.cells[index] and assign it a new value.

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

Reset the tabulator with updated data and a revised column setup on the existing DOM element

Currently, I am utilizing the tabulator jQuery plugin for a project. My goal is to re-initialize the tabulator on the same div element but with a different column configuration and dynamic data. I have provided a sample div and script below that shows wh ...

How can we use React.js to redirect upon submitting a form?

Hello everyone. I've created an app where users can create posts. As the owner of a post, you have the ability to delete it by clicking on a delete button, which triggers a modal to confirm deletion. However, I'm facing an issue with redirecting ...

What strategies can be implemented to minimize the use of if-else statements?

Is there a more efficient way to simplify this if-else statement? This code dynamically changes the picture based on integers retrieved from the database. I am looking for ways to optimize this code. if (val["soil_h"] < 21){ $("#ground").att ...

The content at “http://localhost:3000/script.js” could not be accessed because of a MIME type mismatch with the X-Content-Type-Options set to nosniff

I encountered an issue while attempting to transfer all the JavaScript to a separate js file and then adding that js file to the html per usual. The console displayed the following error message: The resource from “http://localhost:3000/public/main.js” ...

Unable to locate the source of the array index out-of-bounds exception

for(int index = array.length-1; index >= 0; index--){ if(array[index] != index+1){ try{ if(((index-1)>=0) & (array[index-1] == (index+1))){ steps++; array[index-1] = arr ...

Fixing 500 (Internal Server Error) in Vue.js and Laravel: The Ultimate Guide

Working on a university project using Vue.js and Laravel, I need assistance with sending information to the API. I'm trying to use axios for the POST request, but it's giving me an error: 500 (Internal Server Error). I can't seem to identif ...

Leverage ngFor to loop through a "highly intricate" data structure

In my project, I have stored data in a JSON file structured as follows: { "name": { "source1": ____, "source2": ____, "source3": ____ }, "xcoord": { "source1": ____, "source2": ____, "source3": _ ...

Generate a Customized Modal for a Memo Capturer Program

I am currently developing a basic note-taking application using vanilla JavaScript. I want the program to add notes with a modal that displays the text when clicked. However, my current implementation adds the note below the input box and includes the moda ...

Leveraging a combination of AngularJS directives within a single div element

Why can't I use multiple directives in the same div tag in AngularJS? The product names from the module are not displayed with the following HTML code: <!DOCTYPE html> <html ng-app="gemStore"> <head> <title></ti ...

Modify the size of images retrieved from the Twitch API

I have a request to the Twitch API to retrieve a list of top games and show their box art, but I'm facing an issue where the image will only display if I adjust the width and height values in the provided link. Is there a way to modify these values wi ...

Is a directive necessary for a search element in this component?

I am currently learning angularJS and although it would be simpler to use JQuery for this task, I am determined to do it the right way. Essentially, I want to create a text input field where users can type in a search term, press a search button, and then ...

Reveal Password Feature in Angular After User Click

I am working on an inventory page that includes a password field. My goal is to initially hide the password and display it as points (****) instead. I would like the password to be revealed either when clicked or through a pop-up. JS var retrieveCert ...

Unable to access model content in multiple AngularJS controllers

My question is clear and straightforward. Let me explain in detail: 1. I have created a module. var ang = angular.module('myApp', []); I have a controller named controller1, which includes the 'campaign' factory. //controllero ...

External API data is shown in the browser console but appears as undefined on the page

Can you please lend me a helping hand? I am facing a critical issue while attempting to retrieve data from an external API using axios in NextJS (Reactjs)/TypeScript through getServerSideProps. The data fetching is successful, and the JSON is returned on t ...

Issue with Jest: Mocked function not found by Vue Component

I am currently in the process of mocking an ES6 class that is being utilized within my Vue Component: export default class DataUploadApi { // Get uploaded files static async getUploadedFiles() : Promise<Object> { return WebapiBase.ge ...

Converting a multi-dimensional array to a single array in JavaScript: the ultimate guide!

I have encountered a scenario in my application where there is an array with multiple arrays nested inside: https://i.sstatic.net/3uHP9.png I am looking to transform this structure: [ { "tag": [ { "key": "asda ...

Searching with Sequelize for an indirect relationship: How can it be done?

Within my database, there exists a relationship between Users and Roles. A User can have multiple Roles assigned to them. These Roles are connected to Activities in such a way that they can be associated with many different activities. This association all ...

Using a React component to import a module for publishing on NPM

Creating my first React component for NPM publication has been quite the learning experience. I decided to use the react-webpack-component package from Yeoman to kickstart my project. However, upon installing and importing my component into a React app, I ...

What causes a delay in the start of a child process in Node.js?

I am in the process of developing a global node command line program that can execute any console command I provide it with in a new console window, whether on a Windows or Unix system. The goal is for the program to exit after it spawns its process so tha ...

What is the best way to create an automated scroll that stays fixed in the middle of the screen?

Is there a way to create a text input field with the same automatic scrolling feature as shown in this video? I chose to share a brief video through a private YouTube link because I believe it will be easier for you to grasp the concept visually rather th ...