We Keep Coding

Bootstrap table editable on icon click

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 :)

Changing Text in Javascript From HTML Input Field

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>

how to clone second row of table and add before last row with contents as blank using jquery or javascript

I have the following nested table.
In the table with the ID tblRating under parent table, I have three rows.
In the first row I have headers, in the second row I have three selectors and one comment box, and in the third row I have an "Add New" button.
Now when I will click on the "Add New" button, a new row should be added to the #tblRating table that is the same as that of the second row.
But new row should not copy data entered or selected in second row. And in the last cell of newly added row I want to add image or check box for deleting added row.
<table style="width: 100%;">
<tr id ="trRatingId" style="display:">
<td colspan="2" class="hedfont">
<table id="tblRating" class="table table table-striped table-bordered tblRating">
<tr>
<td><bean:message bundle="tempResource" key="lbl.Statement"/></td>
<td><bean:message bundle="tempResource" key="lbl.Frequency"/></td>
<td><bean:message bundle="tempResource" key="lbl.CovenantType"/></td>
<td><bean:message bundle="tempResource" key="lbl.CovenantComment"/></td>
<td></td>
</tr>
<tr>
<td>
<select name="statementId" id="statementId" class="form-control chosen-select" onchange="">
<ram:optionsNew initValue="0" selectValue="" initLabel="--Select--" group="<%=dynaStatement%>"/>
</select>
</td>
<td>
<select name="frequencyId" id="frequencyId" class="form-control chosen-select" onchange="">
<ram:optionsNew initValue="0" selectValue="" initLabel="--Select--" group="<%=dynaFreq%>"/>
</select>
</td>
<td>
<select name="covenantId" id="covenantId" class="form-control chosen-select" onchange="">
<ram:optionsNew initValue="0" selectValue="" initLabel="--Select--" group="<%=dynaCts%>"/>
</select>
</td>
<td>
<textarea rows="4" cols="50" onchange="" name="comments" id="comments" class="form-control"></textarea>
</td>
<td class="edit">
When new row will get added I want add here an image for deleting row
</td>
</tr>
<tr>
<td width="" colspan="4" align="right">
<button type="button" name="imgAddNew" id="imgAddNew" onclick="" onfocus ="" title="Add New Record" class="btn btn-primary">Add New</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
EDIT:
What I found till now is
$("#imgAddNew").on("click", function() {
var cloned = $(this).parents('table.tblRating').find('tr:eq(1)').clone(true);
cloned.insertBefore($(this).parents('table.tblRating').find('tr:last-child'));
});
With this I am able to add new row but not able to select data in new row , when I click on select box in new added row it point to select box of first row

You can take a hidden temp dummy row with the desired values and remove button/image as below :
<tr name="Item" id="trItemDisplayTemp" style="display: none;">
<td name="ItemNo"></td>
<td name="ItemDescription"></td>
<td>
<input type="checkbox" disabled="disabled" name="IsPageBreak" /></td>
<td>
<input type="checkbox" disabled="disabled" name="IsSubTitle" /></td>
<td>
<input type="checkbox" disabled="disabled" name="IsQuestion" /></td>
<td>
<img onclick="deleteItem(this)" style="border: none; cursor: pointer;" src="~/Images/delete.png" />
<img onclick="editItem(this)" style="border: none; cursor: pointer;" src="~/Images/edit.png" />
</td>
</tr>
And on page load or add button click event you can clone the above row in a variable and delete the row as below:
var trItemDisplayClone = $('#trItemDisplayTemp').clone().removeAttr("id").removeAttr("style");
$('#trItemDisplayTemp').remove();
And now you have the clone row in your variable and you can use it as you want.

I need each row of the table is separate and can be clickable and view some information. It is possible to be hundreds of rows entered by the users

//input field where user submit data into mysql database and immediately it shows in table
<form name="form" action="" method="post">
<input type="text" name="pitanje" class="search-input" placeholder="Pitajte..." />
<input class="search-btn" type="submit" value="Go" />
</form>
<table class='table'>
<tr>
<th>ID</th>
<th>Question</th>
<th>Date</th>
<th>Like</th>
<th>Views</th>
<th>Answer??</th>
</tr>
<tr>
<td>1</td>
<td>Question</td>
<td>Date</td>
<td>Views</td>
<td>Like</td>
<td>
<button>Press</button>
</td>
</td>
</tr>
</table>
Best example of that is http://www.incredibox.com/top-50 try to click on some row and you will see. Every row

How to find the previous element height using jquery

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());
});