Using Jquery, I have a table and on clicking the table row i want td to change to textbox or dropdown.
After entering the values of textbox i want those values to be updated to that table row on which it was clicked. I have got it partially.
Please help me with this.
This is my html code:
<table id="myTable" >
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
This is my script:
$(document).ready(function () {
$("#myTable").children("tbody").children("tr").children("td").click(function () {
$(this.parentNode).replaceWith('<tr><td ><textarea></textarea></td><td ><textarea></textarea></td><td ><textarea></textarea></td></tr>').appendTo($(this)).val().select().blur(function () {
var newText = $(this).val();
$(this).parent().text(newText);
});
});
});
Try something like this. I don't check if it compile, it is just an idea:
$("#myTable").children("tbody").children("tr").children("td").click(function () {
var cell1Text = $(this).find('.cell1').text();
$(this.parentNode).replaceWith('<tr><td><textarea class="cell1">'+cell1Text+'</textarea></td>...</tr>').appendTo($(this)).val().select().blur(function () {
var newText = $(this).val();
$(this).parent().text(newText);
});
})
.blur(function () {
var cell1Val = $(this).find('.cell1').val();
$(this.parentNode).replaceWith('<tr class="cell1">'+cell1Val+'<td ></td>...</tr>').appendTo($(this)).val().select().blur(function () {
var newText = $(this).val();
$(this).parent().text(newText);
});
});
Related
am here trying to perform drag and drop operations on cell data here what i want to do is,get the cell header name of the cell where am dropping content ,here am able to get cell header of that cell where am dragging content
this is the code am using for drag and drop functionality
<table id="#our_table" border="1">
<tr>
<th>head1</th>
<th>head1</th>
<th>head1</th>
</tr>
<tr><th>Row1<th>
<td><span class="event" id="a" draggable="true">aaa</span></td>
<td><span class="event" id="b" draggable="true">bbb</span></td>
<td></td>
</tr>
<tr>
<th>Row2<th>
<td></td>
<td></td>
<td></td>
</tr>
</table>
$(document).ready(function(){
$('.event').on("dragstart", function (event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'));
});
$('table td').on("dragenter dragover drop", function (event) {
event.preventDefault();
if (event.type === 'drop') {
var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
if($(this).find('span').length===0){
de=$('#'+data).detach();
de.appendTo($(this));
}
};
});
})
fiddle for drag and drop functinality
I don't know whether it would be helpful to you or not but you can add that header's name as property for your td and then at time of drag&drop you can access that.
For Example.
<table id="#our_table" border="1">
<tr>
<th>head1</th>
<th>head1</th>
<th>head1</th>
</tr>
<tr>
<td><span class="event head1" id="a" draggable="true">aaa</span></td>
<td><span class="event head2" id="b" draggable="true">bbb</span></td>
<td><span class="head3"></span></td>
</tr>
<tr>
<td><span class="head1"></span></td>
<td><span class="head2"></span></td>
<td><span class="head3"></span></td>
</tr>
</table>
$(document).ready(function(){
$('.event').on("dragstart", function (event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'));
var headName=$(this).attr('class').remove('event');
});
$('table td').on("dragenter dragover drop", function (event) {
event.preventDefault();
if (event.type === 'drop') {
var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
if($(this).find('span').length===0){
de=$('#'+data).detach();
de.appendTo($(this));
}
};
});
});
You can use index of current cell to fetch the header.
Here is my answer
$(document).ready(function () {
$('.event').on("dragstart", function (event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'));
});
$('table td').on("dragenter dragover drop", function (event) {
event.preventDefault();
if (event.type === 'drop') {
var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));
if ($(this).find('span').length === 0) {
de = $('#' + data).detach();
index = $(this).index();
headerText = $("table th").eq(index).text();
console.log(headerText);
alert(headerText);
de.appendTo($(this));
}
}
;
});
})
And here is working fiddle
http://jsfiddle.net/toLvzrLp/3/
I am able to convert a pre populated table with data to JSON object with jQuery. Here is the code:
var header = $('table thead tr th').map(function () {
return $(this).text();
});
var tableObj = $('table tbody tr').map(function (i) {
var row = {};
$(this).find('td').each(function (i) {
var rowName = header[i];
row[rowName] = $(this).text();
});
return row;
}).get();
JSON.stringify(tableObj);
And the html table is like this:
<table>
<thead>
<tr>
<th>Name</th>
<th>E-mail</th>
<th>Job</th>
</tr>
</thead>
<tbody>
<tr>
<td>jason</td>
<td>jason#example.com</td>
<td>Developer</td>
</tr>
<tr>
<td>ted</td>
<td>ted#example.com</td>
<td>Bear</td>
</tr>
</tbody>
</table>
Now my task is to actually handle empty table with user inputs. When user load the page, the table is empty with no value, after the user entered the input and click submit, I want to convert the user input data into JSON object and pass it back to back-end.
I am trying to make it happen by warp the table into a form, and add <input> tag in each <td>, something like this:
<form>
<table>
<tbody>
<tr>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
</tr>
<tr>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
</tr>
</tbody>
</table>
<button type="submit">Submit</button>
</form>
I try to use the .submit() method from jQuery to make it work but I am getting syntax errors:
$('form').submit(
var header = $('table thead tr th').map(function () {
return $(this).text();
});
var tableObj = $('table tbody tr').map(function (i) {
var row = {};
$(this).find('td').each(function (i) {
var rowName = header[i];
row[rowName] = $(this).text();
});
return row;
}).get();
JSON.stringify(tableObj);
);
How should I change my code to make it work?
That's happening bacause there is no text in the td. You need to find the value of the input.
1) You need to get the input in the td
2) You need to get the value of the input
Also try to look at the editable div
Try this:
row[rowName] = $(this).find('input').val();
This Fiddle Example shows a comparison table that dynamically shows information in a column when a button is clicked. Once the table is filled up, I want to start the whole process again. But as the example shows, the buttons are stuck at adding information to th:nth-child(2) and td:nth-child(2) during the second time instead of moving on to the next column like during the first time.
I'm guessing this part needs some change if( allCells === fullCells ) { to keep information being added to next columns.
HTML
<div class="area">
<button>Gah</button>
</div>
<div class="area">
<button>Kaj</button>
</div>
<div class="area">
<button>Fdw</button>
</div>
<div class="area">
<button>ffdf</button>
</div>
<table>
<thead>
<tr>
<th>Placeholder</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Age</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Name</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Race</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Nationality</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Education</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Language</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Code:
$(function() {
$('.area').each(function(){
var area = $(this),
filltable ='',
button = $(this).find('button'),
buttontext = button.text();
button.on("click",function(){
var allCells = $('table').find('th,td').length;
var fullCells = $('table').find('th,td').filter(function() {
return $(this).text() != '';
}).length;
if( allCells === fullCells ) { // If table is full
$('table').find('th,td').not(':first-child').removeClass('addinfo');
filltable();
}
else { // If table isn't full
filltable = function(){
var i = $('th.addinfo').length !== 0 ? $('th.addinfo:last').index() : 0;
console.log( i );
i + 2 > $('th').length ||
$('th,td').filter(':nth-child(' + (i + 2) + ')')
.addClass( 'addinfo' ).html(buttontext);
}
filltable();
}
}); // end button on click function
});
});
Please see the attached link for demo. I have created a function name cleartable() which clears the table if its full and have used your old filltable() function to repopulate. There is repetition of code which you will have to clean up.
th:nth-child(2) identifies second child of th.
td:nth-child(2) identifies second column.
Similarly if you wanted to do something with let say second row, you can use tr:nth-child(2).
I hope this helps you understand a little about parent-child relationship in jquery.
JSFIDDLE DEMO
function clearTable() {
$('table th:nth-child(2)').html('');
$('table th:nth-child(3)').html('');
$('table th:nth-child(4)').html('');
$('table td:nth-child(2)').html('');
$('table td:nth-child(3)').html('');
$('table td:nth-child(4)').html('');
}
http://jsfiddle.net/jqVxu/1/
I think you'd better to count th only. count all td and th make me confused.
$(function () {
function filltable(buttontext) {
var i = $('th.addinfo').length !== 0 ? $('th.addinfo:last').index() : 0;
i + 2 > $('th').length || $('th,td').filter(':nth-child(' + (i + 2) + ')')
.addClass('addinfo').html(buttontext);
}
$('.area').each(function () {
var area = $(this),
button = $(this).find('button'),
buttontext = button.text();
button.on("click", function () {
var allCells = $('table').find('th').length-1;
var fullCells = $('table th.addinfo').length;
console.log(allCells, fullCells);
if (allCells === fullCells) { // If table is full
$('table .addinfo').removeClass('addinfo');
filltable(buttontext);
} else { // If table isn't full
filltable(buttontext);
}
});
});
});
Updated Fiddle Example:
How would you find an empty table column,including th in the fiddle so that when you click on a button it'll inject data into that column only. For example, when you click on "X" it'll add data to the first empty column,"G" will add data to the second empty....When the table is full, start from the second child column (because the first column is some sort of title column) and replace old data in that column.
Just a guess:
columnTh = $("table th");
columnIndex = columnTh.index() + 1;
columnIndex.each(function(){
if ($(this).html() == '' && $('table tr td:nth-child(' + columnIndex + ')').html() == ''){
// add data
}
But how can I check if the whole table is full so that the button will add data to the first column again?
HTML:
<div class="area">
<select>
<option>Choose</option>
<option>R</option>
<option>T</option>
</select>
<div class="show">
</div>
</div>
<div class="area">
<select>
<option>Choose</option>
<option>X</option>
<option>G</option>
</select>
<div class="show">
</div>
</div>
<table>
<thead>
<tr>
<th>Placeholder</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Age</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Name</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Race</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Nationality</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Education</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Language</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
JS Code
$(function (){
$('.area').each(function(){
var area = $(this),
selectbox = area.find('select'),
show = area.find('.show'),
dialog_open = $(this).find(".dialog_open");
selectbox.change(function(){
selectbox = $(this).find('option:selected').text();
show.html('<button class="dialog_open">'+selectbox+'</button>')
});
var foo = function() {
var dialog_open_text = $(this).find(".dialog_open").text();
$('table td').html(dialog_open_text); // ****Need help in this part*****
};
show.one( "click",dialog_open, foo );
});
});
Here is how to check that the table is full:
var allCells = $('table').find('th,td').length;
var fullCells = $('table').find('th,td').filter(function() {
return $(this).text() != '';
}).length;
if( allCells === fullCells ) { // if true table is full, not full otherwise
//do something table is full
} else {
//table is not full
}
If the first select indicates the column # you're targeting and the second select indicates the content to put in the cells of the column, then you may use the following logic inside the function foo:
var colN = $('select').first().val(),
colCont = $('select').last().val(),
allColumns = $('table').find('th:eq(' + (colN - 1) + '),td:eq(' + (colN - 1) + ')').length,
fullColumns = $('table').find('th:eq(' + (colN - 1) + '),td:eq(' + (colN - 1) + ')').filter(function() { return $(this).text() != ''; }).length;
Then you can check to see if the targeted column is full or not:
if( allColumns === fullColumns ) {
//all cells in target column full
} else {
//not all cells in target column are full
}
You can empty everything but the first column this way:
$('table').find('th,td').not(':first-child').empty();
And here's how to fill a column:
$('td').filter(':nth-child(' + colN + ')').html(dialog_open_text);
Here is my code for the html:
<div class="board">
<table id="mastermind_table_one">
<tr id="one">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table id="mastermind_table_two">
<tr id="two">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table id="mastermind_table_three">
<tr id="three">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
Here is my code for the Javascript:
$('.next_round').click(function() {
var count = 3;
var counter = setInterval(timer, 1000);
function timer() {
count = count - 1;
if (count === 0) {
$('#mastermind_table_two').each(function() {
$(this).find('td').each(function() {
$(this).css("background-color", setRandomColor);
})
})
clearInterval(counter);
}
})
I am building a game in which when the "next_round" button is clicked, all the empty tds are filled with a random background color (there's more code, such as setRandomColor function, but it's not relevant to the question).
I have ten mastermind_tables total, and that is where the problem lies. I am repeating this code for each table. Does anyone know how I can have this listed just once and move to the next td when I click "next_round"?
i.e. the js code above is specific to mastermind_table_two. How can I have it be dynamic and move to the next td once the previous one is executed?
UPDATED
My mistake, must have readed your question in the worng way
Try this, its a bit of a hacky but might fit into your needs
$('.next_round').click(function () {
$('[id^=mastermind_table_]').each(function () {
$(this).addClass("notTreated");//a fake class just to control
});
var counter = setInterval(timer, 1000);
function timer() {
var currenttable;
if ((currenttable = $(".notTreated").first()) == null) {
clearInterval(counter);
return;
}
$(currenttable).find('td').each(function () {
$(this).css("background-color", setRandomColor);
});
//after treat this table, removes the fake class
$(currenttable).removeClass("notTreated");
}
});