Click the icon to introduce a fresh row into the table

I have embedded a table with a "plus" font awesome icon.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<table class="table table-bordered w-auto">
  <thead>
    <tr>
      <th>Column_1</th>
      <th>Column_2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="form-group" style="position: relative">
        <input type="Column_1" class="form-control" id="clmn1" placeholder="Enter the name">
        <div class="justify-content-center" style="position: absolute; width: 100%; left: 50%;">
            <a class="fa fa-plus-circle" href="#"></a>
          </div>
      </td>
    </tr>
  </tbody>
</table>

How can I implement adding a new row when clicking on that "plus" symbol?

htmlcsstwitter-bootstrap

Answer №1

If you need to add another row to a table without using JavaScript or jQuery, here's a simple solution:

function addrow(){
        var row = "<tr><td class='form-group' style='position: relative'><input type='Column_1' class='form-control' id='clmn1' placeholder='Enter the name'></td></tr>";
  
        document.getElementById("myList").insertAdjacentHTML('beforeend', row);
      }
<!DOCTYPE html>
        <html>
        
          <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width initial-scale=1.0">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
          </head>
          
          <body>
            <table class="table table-bordered w-auto">
              <thead>
                <tr>
                  <th>Column_1</th>
                  <th>Column_2</th>
                </tr>
              </thead>
              
              <tbody id="myList">
                <tr >
                  <td class="form-group" style="position: relative">
                    <input type="Column_1" class="form-control" id="clmn1" placeholder="Enter the name">
                  </td>
                </tr>
              </tbody>
              
              <tfoot> <tr><td><a onclick="addrow()" class="fa fa-plus-circle" href="#"></a></tfoot></td></tr>
            </table>
          </body>
        </html>

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

Issue "The only acceptable numeric escape in strict mode is '' for styled elements in Material-UI (MUI)"

Attempting to utilize the numeric quote for quotation marks, I encountered an issue: 'The sole legitimate numeric escape in strict mode is '\0` The snippet of code causing the problem can be seen below: export const Title = styled(Typogra ...

javascriptcssreactjsmaterial-ui

Don't forget to strip off the height attribute once the transform is

Utilizing the transform property: .parent { display: inline-flex; flex-direction: column; align-items: center; } .first { height: 100px; } .second { height: 100px; transform: translateY(-50%); } <div class="parent"> <div ...

htmlcsstransform

Guide on obtaining an obscure style guideline in MS Edge using JavaScript

If you are looking to utilize the object-fit CSS rule, keep in mind that it is not supported in MSIE and MS Edge Browsers. While there are polyfills available for IE, none of them seem to work in Edge from my experience. For instance, the polyfill fitie b ...

javascriptcssmicrosoft-edgeobject-fit

Having trouble with CSS and javascript files not resolving after moving app to a new Windows 7 development machine

I have recently migrated my ASP.Net 3.5 web site from my old XP sp3 machine to a new Win 7 64-bit dev machine. The web application utilizes Master Pages, App_Themes with style sheets and images, as well as an image folder located off the main root. Additio ...

asp.netjavascriptcss

Insert item at the end of the box and move all elements upwards

Hello! I'm experimenting with creating something using javascript's createElement method. My goal is to achieve an effect similar to this image: https://i.stack.imgur.com/itKUK.gif Currently, my code is functional, but the animation goes from to ...

javascripthtmlcss

Utilizing jQuery to retrieve data attributes from an HTML Select element, and incorporating an SQL query to dynamically populate additional HTML input fields within Classic ASP

From the title, you can probably gather a bit about the issue I'm facing. I have limited experience with classic ASP, but it's still used at my workplace. They've asked me to make some edits that involve adding validation for input fields. S ...

jqueryhtmlsql-serverasp-classic

What are some ways to ensure that text can adapt to the size of a

I am looking to create dynamic text that adjusts based on the size of its parent container. As the parent container's size changes, I want the text to automatically adjust accordingly. Specifically, I want the text in a widget to resize when the widg ...

javascriptjqueryhtmlcssfrontend

Guide to positioning a div at the bottom of a Drawer while maintaining the same width as the Drawer in React Material UI

Creating a Drawer on the right-hand side using <Drawer/>, I am trying to make a <div> stick to the bottom of the <Drawer />. The width of this <div> should match the width of the <Drawer />. Desired Outcome: To achieve the d ...

htmlcssreactjsmaterial-ui

The user uploads an image to the server, which is then assigned as the background-image for a div element

I am in search of a straightforward method to allow users to upload an image to my server and then use that uploaded image as the background-image for a div element. I need the image to be actually uploaded to the server rather than just displaying a local ...

htmlajaximagebackgroundupload

I am experiencing issues with my PHP quiz application; it is malfunctioning when I try

In my PHP MySQL quiz application, I have developed two sections: one for students and another for admins. In the admin area, there is an "addquestion" page where the code is as follows: <form class="form-horizontal " action="addquestion.php" method=" ...

phphtmlcssmysql

Tips for integrating ng2-dragula into an Angular 2 project

How can ng2-dragula be implemented in Angular 2? Here's the code snippet, ****viewer.component.ts**** import { Component, Input, Output, EventEmitter } from '@angular/core'; import { Injectable } from '@angular/core'; import { ...

htmlangular

jQuery's show/hide functionality allows for the dynamic resizing of images,

I am experiencing an issue with a Joomla template that has a custom jQuery menu. When I hover over the map with my mouse, the overlay appears slightly larger than expected. This problem seems to be occurring in Firefox and IE 11, leading me to believe it ...

javascriptjqueryhtmlcss

Display the scrollbar on a flexbox container instead of the entire browser window

I'm curious about how to implement a scroll-bar on a div using flexbox CSS. To better illustrate the issue, I've provided an example below: * { box-sizing: border-box; } .flex-display { display: flex; align-items: stretch; height: 100 ...

htmlcssflexbox

Latest versions of Bootstrap are facing issues with the functionality of the Carousel feature

I'm struggling to create a basic carousel, but for some reason, it's not functioning properly. I attempted to use the sample code provided by Bootstrap's documentation, but it doesn't behave as expected (slides won't transition and ...

javascripthtmlbootstrap-4carouselbootstrap-5

Tips for downsizing a large image to fit into a smaller area

I am working on a page layout that features a small circular navigation element. However, I am facing an issue with fitting a large picture within the boundaries of this small circle without it overflowing and causing alignment problems. Does anyone have ...

javascriptjqueryhtmlcss

Is there a way to retrieve the content of a WordPress page minus the HTML tags?

$content = fetch_content(); var_dump($content); <figure class="wp-block-gallery columns-1 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="http://www ...

phphtmlwordpresstags

Display an image with HTML

My current project involves creating a chrome extension that will display a box over an image when hovered, while also zooming the image to 1.5 times its original size. In my research, I came across a similar example. .zoomin img { height: 200px; wi ...

javascriptjquerycsshtml

Deciphering HTML encoding for text fields

As I transition from the Microsoft stack, specifically WPF, to HTML5, I apologize for any beginner-level questions. Today's topic is HTML encoding and decoding. Imagine an HTML5 application making AJAX calls to a C# backend using HTTP. The server al ...

javascriptjqueryhtmlencodingtextbox

What is the best way to utilize Selenium with Python for choosing an item from a dropdown menu when the choices are contained within non-interactable <div> elements?

I am currently working on a program that navigates through the well-known website using selenium automation. However, I have encountered an obstacle on the second page where there is a dropdown menu prompting users to select a top-level domain. The dropdo ...

pythonhtmlseleniumweb-scraping

The functionality to generate forms on the click of a button appears to be malfunctioning

I am currently attempting to dynamically create Bootstrap Panels using an `onclick` function. However, I want each Panel to generate multiple forms when the button is clicked. In my current code, the first Panel successfully creates forms when the button i ...

javascriptjquerytwitter-bootstrap