I am using bootstrap table in my react application.I want to have a functionality like this: In each row I want an edit icon which when I click, it should make all the row elements editable. Currently I have table like this
<Table className='flags-table' responsive hover>
<thead>
<tr>
<th></th>
<th> Time In</th>
<th> Time Out</th>
<th> Type</th>
<th> Category</th>
</tr>
</thead>
<tbody>
{
that.props.tag_fetch_reducer.tags.map((x, i) => (
<tr key={i} onClick={this.handleRowClick.bind(this, i)}>
<td>
<div className='red-box'></div>
</td>
<td> {x.frame_in} </td>
<td> {x.frame_out} </td>
<td> {x.tagname} </td>
<td> {x.category}</td>
</tr>
))
}
</tbody>
</Table>
How can I make it editable?
I can't provide the whole code for your editable table but I can certainly show you a way to achieve this.
If you want, you can provide a table where all the columns will be disabled input boxes. So When use clicks on edit icon, all those disabled input fields will get enabled and then you can edit those fields. You can store disabled and enabled state in react or redux state.
that.props.tag_fetch_reducer.tags.map((item, index) => (
<tr key={index}>
<td>
<input type="text" value={item.frame_in} disabled={this.isDisabled(index)}/>
</td>
<td>
<input type="text" value={item.frame_out} disabled={this.isDisabled(index)} />
</td>
<td>
<input type="text" value={item.tagName} disabled={this.isDisabled(index)} />
</td>
<td>
<input type="text" value={item.category} disabled={this.isDisabled(index)} />
</td>
<td>
<button onClick={this.handleRowClick.bind(this, index)}>
Edit
</button>
</td>
</tr>
);
Where isDisabled is a function, which will look into current state to check whether the field at particular index is disabled or not.
Or, if you don't like the above approach. You can create a table as below.
that.props.tag_fetch_reducer.tags.map((item, index) => (
<tr key={index}>
<td>
{item.id}
<input type="text" value={item.frame_in} style={this.showStyle(index)}/>
</td>
<td>
{item.name}
<input type="text" value={item.frame_out} style={this.showStyle(index)} />
</td>
<td>
{item.name}
<input type="text" value={item.tagName} style={this.showStyle(index)} />
</td>
<td>
{item.name}
<input type="text" value={item.category} style={this.showStyle(index)} />
</td>
<td>
<button onClick={this.handleRowClick.bind(this, index)}>
Edit
</button>
</td>
</tr>
);
In this approach, you can keep display part and editing part separate from each-other.
Here, At the beginning style for all input fields will be display: 'none'. Now, when user clicks on edit button. You can change the style of that particular row and make all input fields at particular row visible.
Apart from this, if you don't want to provide editable table then you can create a separate component for editing. When user clicks on edit icon, new component will be displayed in which user can edit all those fields and hit submit to persist all those updated fields.
That's all I can say.
With quick google search I found some resources that can certainly help you.
React Data Grid Examples
Editable react table example on JSFiddle and explanation
Hope this helps :)
Related
table list
My mind is is boggling for this logic.When I click the ADD SECTION button, a modal opens asking for input values. What I want is that, all the values from that modal will be listed on the TABLE below the ADD Section. Each row to have different names for post method. Can please anyone help me? Thanks
If I understood correctly, you want to create multiple rows and then submit them as a form. Use jQuery to append table rows and to create cells containing input fields. You can set those input field names as an array <input type="text" name="section[]" value="somevaluefrommodal">
Basic html layount should look something like this:
$(document).ready(function(){
// click handler
$("#add-row").on("click", function() {
$("table").append('<tr><td><input type="text" name="section[]" value="Section2"/></td><td><input type="text" name="test[]" value="Test2"/></td></tr>');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-row">Add Row</button>
<form>
<table style="width:100%">
<tr>
<th>Section</th>
<th>Test</th>
</tr>
<tr>
<td><input type="text" name="section[]" value="Section1"/></td>
<td><input type="text" name="test[]" value="Test1"/></td>
</tr>
<tr>
<td><input type="text" name="section[]" value="Section2"/></td>
<td><input type="text" name="test[]" value="Test2"/></td>
</tr>
</table>
<input type="submit" />
</form>
I have to modify a row in my table
click on the row
hit modify button
modify the row
"modify" button has turned into "save" button, press save.
from my angular controller, how can i tell to the table to make the row editable?...Not which.... but how.
If you need with AngularJS please try this
<tr>
<td>Name</td>
<td>Surname</td>
<td><button>Modifiy</button></td>
<tr>
Replace it with
<tr>
<td>
<span ng-if="!isBeingModified">Name</span>
<input ng-if="isBeingModified" type="text" value="Name">
</td>
<td>
<span ng-if="!isBeingModified">Surname</span>
<input ng-if="isBeingModified" type="text" value="Surname">
</td>
<td>
<button ng-click="isBeingModified = !isBeingModified">
<span ng-if="isBeingModified">Save</span>
<span ng-if="!isBeingModified">Modify</span>
</button>
</td>
<tr>
So I am setting up Jeopardy game.
For the grid I am using HTML Tables. The first row has generic text right now ("Category 1 Name" for example).
Above the first row there will be another table with an HTML input box where the user can change the category name into whatever they want.
My problem is, I thought I would use document.getElementById("").innerHTML etc. to do this but that does not work.
How do I make it so that a user can input text into the form field and that entry changes the text in the table cell (td)?
This is what I have right now for the input field:
<table id="table1">
<tr>
<td>
<form>
<input type="text" placeholder="Category 1 Name">
<button>Submit</button>
</form>
</td>
</tr>
</table>
This is what I have for the box that I want to change the text:
<table>
<tr>
<td class="cat1">Category 1 Name</td>
</tr>
</table>
Thank you.
Would this solution be OK for you?:
function setCat1Name() {
document.getElementsByClassName("cat1")[0].textContent = document.getElementById("myInput").value
}
<table id="table1">
<tr>
<td>
<form>
<input id="myInput" type="text" placeholder="Category 1 Name">
<button onclick="setCat1Name()">Submit</button>
</form>
</td>
</table>
<table>
<tr>
<td class="cat1">Category 1 Name</td>
</tr>
</table>
I have a table which is defined like:
<table>
<tr>
<td>
<label>First</label>
</td>
<td>
<input type='text' style='widht:200px; height:100px;' />
</td>
<td>
<button class='but'></button>
</td>
</tr>
<tr>
<td>
<label>Second</label>
</td>
<td>
<select style='widht:100px; height:150px;'>
<option>one</one>
</select>
</td>
<td>
<button class='but'></button>
</td>
</tr>
<tr>
<td>
<label></label>
</td>
<td>
<input type='text' style='widht:200px; height:100px;' />
</td>
<td>
<button class='but'></button>
</td>
</tr>
<tr>
<td>
<label>Third</label>
</td>
<td>
<textarea style='widht:500px; height:200px;'></textarea>
</td>
<td>
<button class='but'></button>
</td>
</tr>
</table>
Then on button click I want to get the height of the previous control. So I wrote this code:
$(".but").live('click',function(){
alert($(this).prev().css('width'));
alert($(this).prev().css('height'));
});
But the alert's are showing the values as undefined. How can I solve this?
Use:
var input = $(this).parent().prev().find("input");
if(input) { // You have a select, so this won't be found in all circumstances
alert(input.css('width'));
alert(input.css('height'));
}
Use real width() to get real width of an element instead of width defined in css (.css('width')). The same applies for height:
$(".but").live('click',function(){
alert($(this).prev().width());
alert($(this).prev().height());
});
you can try: jsFiddle
$(".but").live('click',function(){
alert($(this).closest("tr").find('input').css('width'));
// OR
//alert($(this).closest("tr").find('select').css('width'));
});
In fact there is no previous target of your buttons.
If you want the TD height, you should call .parent() instead.
And please, pay attention to your HTML !
EDIT: Fiddle updated:
http://jsfiddle.net/jVsRW/4/
$(".but").on('click', function() {
// Of course display null for the first button that do not have a previous form element.
alert($(this).closest('tr').prev().find('input, select, textarea').height());
});
I am looking to disable all the elements (controls) of specified table columns (td's) using jQuery.
My table looks like the following :
<table>
<tr>
<td id="1.1.tcol"></td>
<td id="1.2.tcol"></td>
<td id="1.3.tcol"></td>
<td id="1.4.tcol"></td>
</tr>
<tr>
<td id="2.1.tcol"></td>
<td id="2.2.tcol"></td>
<td id="2.3.tcol"></td>
<td id="2.4.tcol"></td>
</tr>
</table>
The table is generated dynamically, but this is how it is rendered as. Now each of my <td> has multiple controls like select, checkbox, buttons, but not fixed for every row and column. I am looking to disable all controls of a specified <td> by using it's Id.
I used the following jQuery, but it doesn't seemt to do the job :
$('#' + td_id).select('*').each(function(element){element.disabled=true});
I have also tried the following, still it doesn't seem to work :
$('#' + td_id).attr('disabled', 'false');
Am I doing something wrong? Please help.
Thanks!
try this
$('#' + td_id).find(':input').prop("disabled", true);
:input select all the input elements
if you need to disable all controls in a column (multilpe rows) I think the best way is to assign a class to each td in that column.
For examle if you want to disable controls in the second column, you may do something similar:
<table>
<tr>
<td id="1.1.tcol"></td>
<td id="1.2.tcol" class="col-2"></td>
<td id="1.3.tcol"></td>
<td id="1.4.tcol"></td>
</tr>
<tr>
<td id="2.1.tcol"></td>
<td id="2.2.tcol" class="col-2"></td>
<td id="2.3.tcol"></td>
<td id="2.4.tcol"></td>
</tr>
</table>
Than, using JQuery you can do this:
$(".col-2 :input').prop("disabled", true);
It should work...
I think this should work :
<table>
<tr><td>
<input type="text" />
<input type="radio" />
<input type="checkbox" />
<select>
<option>1233</option>
</select>
</td>
</tr>
<tr><td>
<input type="text" />
<input type="radio" />
<input type="checkbox" />
<select>
<option>second</option>
</select>
</td>
</tr>
Now to disable only first "td" you should use:
$('tr').children().eq(0).find(':input').prop("disabled", true);
If you are using JQuery1.6 or above use prop() else use attr().