We Keep Coding

contenteditable - JQuery save content just to webpage (as well as adding and removing)

Upon thorough research I was able to allow one data value to be edited and updated within my table. However, when I attempt to alter where the contenteditable can be edited, It removes my formatting of the table (it actually removes the table format completely, rendering my idea pointless.
Here is my current code.
<div class="bs-docs-example">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>IRC Name</th>
<th>Ingame Name</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>[Cr|m|nAl]</td>
<td id="content2" contenteditable="true">Herbalist</td>
<td>Aeterna Top</td>
</tr>
<tr>
<td >2</td>
<td >bandido</td>
<td >Bananni</td>
<td >Aeterna Top</td>
</tr>
<tr>
<td>3</td>
<td>Funkystyle</td>
<td>Funkystyle</td>
<td>Aeterna Top</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<button id="save">Save Changes</button>
<!-- begin the script -->
<script src="js/jquery.js" type="text/javascript"></script>
<script>
var theContent = $('#content2');// set the content
$('#save').on('click', function () { // store the new content in localStorage when the button is clicked
var editedContent = theContent.html();
localStorage.newContent = editedContent;
});
if (localStorage.getItem('newContent')) { // apply the newContent when it is exist ini localStorage
theContent.html(localStorage.getItem('newContent'));
}
</script>
Now, ideally I would like it to output like this screenshot below;
http://i.imgur.com/R4TYhRB.png
With the column of "Ingame Name" editable.
Add Row/Remove Row, I'm wanting to implement too, but I'm not too sure if you can do it with such a simple HTML table.
My First question-
how would I make a particular row (i.e Ingame Name) be the only one editable? I'm terrible have Javascript/Jquery and my research unfortunately, only allows me to refine one row. (I know I could probably replicate the javascript/jquery, but surely there is an easier way?)
Second question-
Is it possible to actually add the ability for a HTML table to add/remove rows without having a database of some sort?
Thanks for any guidance in regards to this.

Rather than making td editable you could wrap div inside td and make it editable and assign fixed width and height to div.
.clEdit {
width: 200px;
/*Try chaging it as per need*/
overflow: hidden;
/* try scroll with more height */
height: 15px;
/*Try chaging it as per need*/
}
Now there are 2 options either allow overflow to be hidden or scroll. You could examine the behavior and select either one. As a user friendly experience you could assign tooltip to div on hover or click so that whenever values inside div are being overflown user could see what are the current values inside.
$(".clEdit").hover(function(e) {
$(this).prop("title", $(this).html());
});
Yes you could add/delete rows from table without DB if you know the values. id can be calculated from previous id value.
Adding/removing from table does not guarantee DB will be updated you need handle that.
On adding rows you need to bind event for contenteditable as well.
$("#add").click(function() {
//LOGIC TO ADD ROW TO TABLE
var trRow = "<tr><td>" + ++idFirstCol + "</td><td>" + "SecondColValue" + "</td><td><div class='clEdit'>" + "ThirdColValue" + "</div></td> <td> " + "LastColValue" + " </td></tr>";
$("#ConTable").append(trRow);
$(".clEdit").hover(function(e) {
$(this).prop("title", $(this).html());
});
$(".clEdit").prop('contenteditable', true);
});
You could refer to JSFiddle here. http://jsfiddle.net/8mt6d7bz/
Lmk if that answers your question

Use JQuery to Unhide Table Rows

I have a table containing Employee Names. I would like to add a hidden row after each row that contained contact information for that particular employee. I would like to use JQuery to do a slideDown animation that reveals that information.
If I was using Javascript, I would do something like name the TR element with an ID such as "employee-xx" and the hidden line as "hidden-xx" where xx is the employeeid. I would do an onClick event that called a function(using the employeeid as a parameter) to hide or unhide the line. As I am just starting JQuery, I don't know how to code this elegantly. I would like to tell it "When you click a visible line in the table, slideDown the invisible line below it", but don't know how to do that. If I use the ID of the row, how do I access the ID via JQuery? I know it's probably simple, but I am stuck.
Thank you,
John

http://www.w3schools.com/jquery/jquery_traversing_siblings.asp
var clickhandler = function(e) {
$(e.target).next().show();
}
btw, this has been answered on here before.
Retrieve previous and next rows in a table using jQuery

EDIT: Fixed a derpy mistake with missing class name. Fiddle has been updated.
I think this is what you want? Clicking on a row with a name causes the hidden row underneath to slide down. Click again to retract.
HTML:
<table>
<tr class="show">
<td>Bob Robertson</td>
</tr>
<tr class="hide">
<td>
<div>(555)123-4567</div>
</td>
</tr>
<tr class="show">
<td>Richard Johnson</td>
</tr>
<tr class="hide">
<td>
<div>(000)000-0000</div>
</td>
</tr>
</table>
JS:
$('.hide').toggle().find('div').slideToggle();
$('.show').on('click', function () {
var next = $(this).next();
if (next.css('display') == 'none') {
next.toggle();
next.find('div').slideToggle();
} else {
next.find('div').slideToggle(function () {
next.toggle();
});
}
});
Here's a fiddle.

JavaScript - Get data of first cell of selected table row

<table border="1" cellpadding="5" id="newtable">
<tr>
<th>Room No</th>
<th>AC</th>
<th>Deluxe</th>
<th>Tariff</th>
</tr>
<c:forEach var="room" items="${myrooms}">
<tr bgcolor="#4B476F" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#4B476F';">
<td class="nr"><c:out value="${room.roomno}" /></td>
<td><c:out value="${room.ac}" /></td>
<td><c:out value="${room.deluxe}" /></td>
<td>₹<c:out value="${room.price}" /></td>
<td><button type="button" class="mybutton" onclick="rowFunction()">Pay</button> </td>
</tr>
</c:forEach>
</table>
On clicking the button corresponding to every row, I want my script to return the Room number i.e. the first cell data of the row. I have tried a lot of things after referring various articles on the Internet. Nothing seems to work. Please help.

You can use something like
Demo
$(window).on('click', '.mybutton' ,function() {
alert($(this).parent().parent().find('.nr').text());
//Or you can use, which is even better
//alert($(this).parent().siblings('.nr').text());
});
Here, the selector is pretty simple, we are first binding click event on the button, and onclick we select the button element parent i.e td and we select the parent of td i.e tr and later we find an element with a class of .nr
You can also write td.nr instead of just .nr to be more specific.
Your rows are being dynamically added, in order for your click listener to work you will have to delegate the events
Credits to #Patsy Issa for suggesting .siblings()

$(".mybutton").click(function(){
alert($(this).parent().siblings().eq(0).text());
});

usually im using DataTables js for solution, you can check at: https://datatables.net/reference/api/row().data()

How to show a table on click of a button in php?

I want to list files from mysql table to a webpage in php. For this i use tables so that i have more regular view. Now there are n numbers of tables on a page. This n is depending upon a mysql query. I am able to list the files on the page. But if numbers of rows in table get increased and value of n is also get increased then my page length will be very long. So i want to give a tree view to each table. Like there will be a button over each table with value '+'. when i click on it the value get change to '-' and that table should be visible.
Here what i tried
<script type="text/javascript">
$(document).ready(function(){
$(".show").html("<input type='checkbox'>");
$('.tree td').hide();
$('th ').click( function() {
$(this).parents('table').find('td').toggle();
});
});
<table width="100%" class="tree">
<tr width="20px"><th colspan="2" class="show"> </th></tr>
<tr>
<td width="50%"><b>Name</b></td>
<td width="50%"><b>Last Updated</b></td>
</tr>
while($row = $result_sql->fetch_assoc())
{
<tr>
<td width='50%'><a href='http://127.0.0.1/wordpress/?page_id=464&name_file={$row['name']}&cat={$cat}&sec={$sec}' target='_blank'>{$row['title']}</a></td>
<td width='50%'>{$row['created']}</td>
</tr>
}
</table>
This is not exact code.
as you can see i am able to do it but i am using a chackbox. i want to have a button with value + or - . There is one problem with this code. The line in which checkbox is showing if i click on it the table is expanded means it taking the entire row not only the checkbox. So anybody can help me with this?
Thanks

I know that this is a code sample, in the future try to provide a jsFiddle to make it easier for people to help. If you want to use +/-, you can make a minor modification like my example
<th colspan="2" width="100%"><span class="show"></span></th>
I basically added the show class to a span within the <th> and attached a click handler on it as well. When you click on it, it will toggle the <td> within the parent <table>... in addition, it will check the text-value in the <th> and inverse it
$('.show').click(function () {
$(this).parents('table').find('td').toggle();
$(this).text() == '+' ? $(this).text('-') : $(this).text('+');
});
Since you don't need a checkbox and you are using a <span>, it won't wrap across the entire <th>. Was this what you were looking for?

Get solution
<script type="text/javascript">
$(document).ready(function(){
$(".show").html("<input type='button' value='+' class='treebtn'>");
$('.tree td').hide();
$('.treebtn ').click( function() {
$(this).parents('table').find('th').parents('table').find('td').toggle();
if (this.value=="+") this.value = "-";
else this.value = "+";
});
});
It is working fine the way i wanted.

Edit a row in jQuery and dynamic id issue?

This table is in the loop. That is number of rows is dynamic.
<tr id="data">
<td><input name="cb" type="checkbox" value="val"></td>
<td>var 1</td>
<td>var 2</td>
<td>var 3</td>
</tr>
One edit button:
<input type="submit" value="edit" id="edit">
Each row has a checkbox. On click of the checkbox the entire row should be in the edit mode. I tried a lot of ways but still far away from the result. The second issue I faced is the id issue. Because the rows are dynamic so...

Probably what you are looking for is this, it uses a thing called "contentEditable" property, which enables editing HTML documents:
http://valums.com/edit-in-place/
More info can be found here: http://msdn.microsoft.com/en-us/library/ms537837%28v=vs.85%29.aspx

You say
This table is in the loop...
but you also have
<tr id="data">
id values must be unique within the document, so you'll have to modify that to not use ids.
But you don't need an id on each row. You can do this:
$('selector_for_the_table tr input[type=checkbox]').change(function() {
var row = $(this).closest('tr');
if (this.checked) {
// make the row editable
}
else {
// make the row uneditable
}
});
Live example

$("input[name=checkbox_name").bind('onchange',function(){
$(this).parent('tr').html();//This line fetch current tr to edit
});