How to add a dynamic row on click of button in a table?

How to add a dynamic row on click of button in a table?

dynamically add/remove rows in html table using javascript
add row to table on button click in javascript
dynamically add rows to table in jsp
how to add data in html table dynamically using javascript
jquery add row to table dynamically example
how to get dynamic table row value in javascript
how to add textbox dynamically in table using javascript
adding table rows and columns in javascript

I am new to the react Js as well front end. Here, I have a table which is like

<div className="col-xs-12 " id="scrollableTable">
                        <Table striped condensed hover id="jobData">
                            <thead style={backgrounColour}>
                            <tr>
                                <th className='serial-column'>Sr.No.</th>
                                <th className='company-column'>Company Name</th>
                                <th className='technology-column'>Technology</th>
                                <th className='job-column'>Job Title</th>
                                <th className='total-score-column'>Total Score</th>
                                <th className='average-score-column'>Average Score</th>
                            </tr>
                            </thead>
                            <tbody>{this.props.jobData.map(function (item, key) {
                                return (
                                    <tr key={key}>
                                        <td><b style={compName}>{item.id}</b></td>
                                        <td><b style={compName}>{item.attributes.companyName}</b></td>
                                        <td>Xamarian Developer</td>
                                        <td>{item.attributes.name}</td>
                                        <td><b style={compName}>30</b></td>
                                        <td><b style={compName}>30</b></td>
                                    </tr>
                                )
                            })}</tbody>
                        </Table>
                    </div>

I do have one button which is like

<button className = "btn btn-default">Add Row </button>

It looks like

Now, What I want to have is that on click of this button,

This should get added as a first row in this table.

Actually, I want to have an idea how can I do this? I tried by adding a static row in this but It did not work. So, I am asking this question.

Any help will be great for me.


FOR SINGLE EDITABLE ROW
  1. Create separate component holding the row you would like to add, after clicking the button.
  2. Add state property that will be used to define if your 'edition row' is visible.
  3. It should have default state false (as it should not be visible at initial render) this.state = { isRowAddingEditorVisible: false }

When "Add row" button is clicked, set state of that above property, to true this.setState({ isRowAddingEditorVisible: true }); And in your component that holds whole table implement it like this:

<tbody>
{this.state.isRowAddingEditorVisible && <RowAddingEditor />}     // <--- HERE
{this.props.jobData.map(function (item, key) {
     return (
       <JobTableRow key={key} data={item}>
     )
 })}
</tbody>

This way you dont need to modify original data that forms the table.

And JobTableRow would hold everything you have as row currently. It provides better separation, readability and your closer to SRP (Single Responsibility Princple - code/method/component doing one thing only)

Check this fiddle to get the idea: https://jsfiddle.net/n5u2wwjg/167786/

Also {this.state.isRowAddingEditorVisible && <RowAddingEditor />} - this is called short circuting. Am using the fact that $booleanValue && <ReactComponent/> will evaluate to <ReactComponent> when $booleanValue is true and will evaluate to nothing (visually speaking) when $booleanValue is false

FOR MULTIPLE EDITABLE ROWS

https://jsfiddle.net/n5u2wwjg/173218/

Hint 1: I used Math.random() to get unique IDs for rows. It is just simple, fast, example solution and in that form should not be used in production code. Usually unique IDs generators are based on Math.random(), but randomized bit more with some additional code.

Hint 2: Remember that when POSTing row to server, you also need to remove its ID from state.

Hint 3: Usually when you have method starting with get and returning some DOM elements you use in render method, it is signal that contents of this method should be moved to separate React component.

Hint 4: In above example I use ES6 syntax. Learn it if you don't know it yet, it's your friend :). Search "ES6 features tutorial".

  1. spread operator - ...
  2. arrow function - => (anonymous also - not stored anywhere or named)

Dynamically Add or Remove Table Rows in JavaScript and Save , To remove rows in the table, I'll add dynamically created buttons (using <p> <​input type="button" id="addRow" value="Add New Row" onclick="addRow()"  On a button click, I’d like to get the particular cell value of that row. E.g.: If I click on the age in the first row, then the value I have to get is 50. And if I click on the button in second


First you have to keep the this.props.jobData in state, Then OnClick of the button you have to update this.state.jobData

add a field in item to identify if it's an editable row or non editable. Let's say isEditable

The code will be:

<tbody>{this.state.jobData.map(function (item, key) {
                           if (!item.isEditable) {
                                return (
                                    <tr key={key}>
                                        <td><b style={compName}>{item.id}</b></td>
                                        <td><b style={compName}>{item.attributes.companyName}</b></td>
                                        <td>Xamarian Developer</td>
                                        <td>{item.attributes.name}</td>
                                        <td><b style={compName}>30</b></td>
                                        <td><b style={compName}>30</b></td>
                                    </tr>
                                )
                           } else {
                                return (
                                   //Add your editable row here
                                )
                           }

                            })}</tbody>

How to Add / Remove Table Rows Dynamically Using jQuery, How to add or remove rows inside a table dynamically using jQuery use the jQuery .append() method to append or add rows inside a HTML table. $(".add-​row").click(function(){ <input type="button" class="add-row" value="Add Row"> To remove rows in the table, I’ll add dynamically created buttons (using JavaScript) in each row of the table. For data entry, I’ll create and add textboxes in each cell, dynamically. The second button will submit the data in the table.


@azrahel gave right answer about first problem (modify table view), below I'm writing about how it should work later - action triggered from that 'mini form'.

In short - it's data driven. Update data, view will be updated.

this.props.jobData.map shows that rows are from this.props.jobData array. Add row means then add to array. There is one problem - you can't mutate props. Props are passed from parent component then you have to update data in parent. To handle this you should have addJob method in parent and pass this handler as prop (like jobData, read docs).

But ... probably this array is not a local data, was fetched from server. If you want to update this on server (push to DB, to be available to others) then yon need to post data to server (it will store it in DB). In simplest scenario post request will return new, updated array. Updated data, passed to component should render component with new array (with new row). It's up to you if 'editing row' should be still visible or not.

How to get the Dynamic Table cell value on button click, I've a table which is dynamically generated. In its row, I'm placing button. for (var i = 0; i < resp.length; i++) { tr = tr + "<tr>"; tr = tr + "<td >" + resp[i].Date + "</td>"; tr  Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.


Dynamically Add/Remove rows in HTML table using JavaScript, For adding dynamic row in table, we have used insertRow() method. <INPUT type="button" value="Add Row" onclick="addRow('dataTable')"  I want to do add new empty row when a add row button/icon click on the previous row. As of now i am adding new row to the table by click on button which is outside of the table. But i need button/i


Add, Edit and Delete Data in an HTML Table Using JavaScript and , Let's make the page a little more dynamic by gathering the product data from the user and Once the user adds the data in the input field, they click on the Add button. Add a Delete button to each row of the table, as shown in Figure 3. Dynamically Add and Remove rows in a Table Using jquery; I will provide you simple jQuery code which will generate a row and add into table and on click of remove button that row can remove from table.The simple steps to dynamically add and delete rows from table are as follows, Dynamically Add/Remove rows in HTML table using jQuery


Traversing an HTML table with JavaScript and DOM Interfaces , appendChild(cell); } // add the row to the end of the table body tblBody. If you want to add rows dynamically, you can perform this task using jQuery. You can use input boxes and the required table heading for the first row. The input boxes are helpful to insert the table rows with its values. You have to use the jQuery append() to append the new rows to the table with values on button click.