How to add a button next to a table row - javascript

I am creating a table. The last row is an input field where the user can add records. What I want is an "add"-button next to that row which the user clicks to store the new data. Visually the button is going to be outside the table, to the right.
I don't know how to do this and need some guidance. How do I add this kind of button?

In the last cell of the last row put a <div> with position:relative and inside that div put your button with position:absolute and move the button outside the table with right: -width_of_the_button. And you would add new rows before the last row in the table, so that the button is always in the last row
You need that <div> because some browsers (Firefox) don't respect position:relative on table cells and rows.

add a blank set of tds for all the other rows and in the last row you have the add button. How does that sound?

You could put the table inside the first column of another two column table, then add the button to the second column and align it vertically to the bottom.
Here's a jsfiddle for the table method - http://jsfiddle.net/ipr101/zFEQT/1/
This question deals with lining up buttons to table rows via css -
Aligning buttons with a row in a table using css

Related

Dependable dropdown in inline row editing in 2 ag grid cell

I started implementing ag grid in angular. Everything is good in listing. But for inline full row editing I am facing 2 issues.
I have 2 cells having dropdown. I am using custom cell editor component for each dropdown cell. now I want that If I change the value of dropdown in first cell then it should change the dropdown data in second cell.
I have an action column. having edit button. So When I click on edit, I hide the edit button and show save and cancel button and call this function. It make all columns editable.
this.gridApi.startEditingCell()
But issue is even if I click any row below current editing row then my editable row become non editable and my action column still show save and cancel. Now I do not know how to change the cell renderer of a column when row become non editable or how to prevent this action
I will suggest you to use cellRenderer with editable: true inside cellRendererParams .
This will resolve the issue of becoming previous row non-editable while clicking on another row or outside the grid as in this state all of grid row's will be behave as editable.
And to manage your action items i think it's better to manage them by comparing the previous rowData and updated rowData.
If you will use the cellEditor with cellEditorParams then the issue of non-editable row will come in the picture as in this case you can make only single row editable at a point of time.
Please let me know if i can help you further in this .
Thank you.

Jqgrid: hide cell based upon drop down in another cell

I am using inline editing in a jqgrid. In one of my cells I have a drop down list. When an item is selected in this list I would like to hide or show a different cell on the same row. Please note I don't want to hide the entire column just the cell in the same row only. Is this possible?

Jquery datatable traverse rows

I have specific requirement for datatable using query. I am looking for solution.
I have datatable with rows , each row is either parent row of any other row or child row of other parent row.
I want to Implement button as one of the column, when it is clicked it should scroll me to the parent row. Each row has its own guid and holds value of its parent row's guid.
Open for all kind of solution.
Thank you for your time.

Moving Rows Up and Down in DataTables using buttons in toolbar

Here is the JSFiddle example of table I'm using. I'm getting ID of selected row using window.id.
So I need to code a function so that when the user wants to move row 51 to row 3. (user click on row 51 and then clicking on button UP it moves row by one row up until row 51 is on position 3). I also need to all rows to dynamically renumber when clicking on button UP or DOWN button.

How to make a light off effect in an entire Table Row

Can anyone help me how to make a lights off effect in an entire table row if i click a specific textbox and remove the lights off effect if i click again the specific textbox and goes the same with other textboxes with there specific table rows.
My problem is when i click a specific textbox the textbox is the only one who is highlighted. I want it to be the entire table row on that specific textbox.
current code: http://jsfiddle.net/AP6kr/4/
If you target $(this).parent() instead of $(this), you'll get the whole row. See JSfiddle: http://jsfiddle.net/AP6kr/6/
My example is actually targeting the <td> tag, which is the parent of the input. Since it's the only td in the row, it looks the same as if you go up one more parent to the <tr> tag. you can see that effect here: http://jsfiddle.net/AP6kr/8/
It's pretty much indistinguishable now, but if you had more cells per row it would matter.
You could use pointer-events:none; on #overlay : http://jsfiddle.net/AP6kr/5/

Categories