I am working on a requirement, where I need to push numbers in text boxes to an array. The text boxes are in the 2nd cell in the table row and 3rd cell is a date picker.
The code snippet below is giving me all text field values along with date values in array. I need only the values of the text fields to that array. Please help me with solution.
var NumbersArray = $('#myTable input[type=text]').map(function() {
return this.value;
}).get();
console.log(NumbersArray);
This piece of code below is also not working:
var secondCellContents = [],
$('#myTable tbody tr').each(function() {
var $secondCell = $(this).children('td').eq(1).text(),
secondCellContent = $secondCell.text();
secondCellContents.push(secondCellContent);
});
console.log(secondCellContents);
You can do the same thing for 2nd cell also like:
var secondCellContents = $('#myTable tbody tr').map(function() {
return $('td:eq(1)', this).val();
}).get();
console.log(secondCellContents);
Also, the .val() method is primarily used to get the values of form elements such as input, select and textarea and .text() is used to get the combined text contents of each element. The .text() method returns the value of text and CDATA nodes as well as element nodes.
This is how to make it work with your own code.
$(document).ready(function(){
var NumbersArray = $('#myTable td:nth-child(2) input[type="text"]').map(function() {
return $(this).val();
}).get();
console.log(NumbersArray);
//OR
var secondCellContents = [];
$('#myTable tbody tr').each(function () {
var $secondCell = $(this).children('td:eq(1)');
secondCellContent = $secondCell.find('input').val();
secondCellContents.push(secondCellContent);
});
console.log(secondCellContents);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='myTable'>
<tbody>
<tr>
<td>Row 1</td>
<td><input type='text' value="1" /></td>
<td></td>
</tr>
<tr>
<td>Row 2</td>
<td><input type='text' value="2" /></td>
<td></td>
</tr>
<tr>
<td>Row 3</td>
<td><input type='text' value="3" /></td>
<td></td>
</tr>
</tbody>
</table>
Related
I have a table that has 10 rows and 3 columns and each row has a checkbox associated with it. The user can select any number of rows and when he presses the Submit button an alert message needs to be displayed containing the values in all the selected rows preferably as a JSON string. How do I extract all the selected rows alone and convert it to a JSON string using either Javascript or Jquery?
I hope I've understood your requirements well. Please consider this solution.
$('#btn-table-rows').click(function (event) {
var values = [];
$('table #row-selector:checked').each(function () {
var rowValue = $(this).closest('tr').find('td.row-value').text();
values.push(rowValue)
});
var json = JSON.stringify(values);
alert(json);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td>
<input id="row-selector" type="checkbox"/>
</td>
<td class="row-value">Row #1: Hello</td>
</tr>
<tr>
<td>
<input id="row-selector" type="checkbox"/>
</td>
<td class="row-value">Row #2: World</td>
</tr>
</table>
<button id="btn-table-rows">Process</button>
I have a table with several <tr>s and each one has several <td>s. The content of these columns can be another html element (for example a textbox) or just text.
My question: how I can get the rest of the siblings of one clicked element inside this column? I mean, how I can know to which <tr> this element belongs, to <tr> #3 or <tr> #5?I don't have a index per <tr> to control
Example:
If I click the textbox of column #1 in row #5, I want that the content of column #2 in row #5 change. I don't know how to do it because my <tr> doesn't have an index.
Using jQuery, add this to the event handler. This will provide you with a collection of table cells:
var columns = $(this).closest('tr').children();
// .eq() is 0-based, so this would retrieve the fourth column
columns.eq(3);
You can find the index of a row using the index() function.
$('input').click(function(){
var index = $(this).parents('tr').index();
alert('you click an input on row #' + index);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text"></td>
<td></td>
</tr>
<tr>
<td><input type="text"></td>
<td></td>
</tr>
<tr>
<td><input type="text"></td>
<td></td>
</tr>
</table>
Use closest to get the parent TR element.
$('your_element').click(function(){
var tr = $(this).closest('tr');
var element1 = $(tr).find('element_to_find');
});
You can also use the :eq operator to find the td.
$('your_element').click(function() {
var tr = $(this).closest('tr');
var col3 = $("td:eq(2)", tr);
}
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();
I want input elements in cells to disappear when I click outside of cells or on another cell (note that clicked cell must be active afterwards, have an input element).
And cell must keep value of input element.
When cell is clicked, input element must appear (that part is solved).
HTML:
<table>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
</table>
JavaScript:
//this part creates input in td element, allows editing cell content and
//when enter is pressed removes input leaving the cell value (the okay part)
$("td").click(function(){
if($(this).find("input").length==0){
var cellContent = $(this).html();
$(this).empty();
$(this).append("<input type='text' size='"+cellContent.length+"' value='"+cellContent+"'>");
$(this).find("input").focus();
}
var currentCell = $(this);
$("input").keyup(function(event){
if(event.which == 13){//on enter pressed
$(this).remove();
$(currentCell).html($(this).val());
}
});
});
Now the problem:
//Here every cell but the one clicked should behave just like the cell in
// which "enter" is pressed in previous part of the code
//I was trying smth here but I (amateur) got confused
$("*").click(function(){
for(var i=0;i<$("td input").length;i++){
if($(this).has("input")){
var cellValue = $("td input:eq("+ i +")").val();
var address = $("td input:eq("+ 0 +")").parent();
$("td input:eq("+ i +")").remove();
$(address).html(cellValue);
}
}
});
Here is a sample, how I would do it: JsFiddle
Hope it helps.
HTML:
<table>
<tr>
<td>Content <input type="text" class="hidden"></td>
<td>Content <input type="text" class="hidden"></td>
</tr>
<tr>
<td>Content <input type="text" class="hidden"></td>
<td>Content <input type="text" class="hidden"></td>
</tr>
</table>
CSS:
.visible {
display: block;
}
.hidden {
display: none;
}
JS:
var tds = $('td');
tds.click(function(){
var allInputs = tds.find('input');
var clickedInpit = $(this).find('input');
if (allInputs.hasClass('visible')) {
allInputs.removeClass('visible');
allInputs.addClass('hidden');
}
clickedInpit.addClass('visible');
clickedInpit.removeClass('hidden');
});
I have a table and if I click a button i want to take the value from charge_outstanding_NUM and set charge_receipt_NUM to it. I need a reusable script because I will not know how many rows will get posted through.
<table>
<thead>
<tr>
<th>ID</th>
<th>Value</th>
<th>Outstanding</th>
<th>Reciept</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>150.00</td>
<td id="charge_outstanding_1">150.00</td>
<td><input type="text" name="charge_receipt_1" id="charge_receipt_1" value=""></td>
</tr>
<tr>
<td>002</td>
<td>10.00</td>
<td id="charge_outstanding_2">10.00</td>
<td><input type="text" name="charge_receipt_2" id="charge_receipt_2" value=""></td>
</tr>
<tr>
<td>003</td>
<td>250.00</td>
<td id="charge_outstanding_3">250.00</td>
<td><input type="text" name="charge_receipt_3" id="charge_receipt_3" value=""></td>
</tr>
</tbody>
</table>
My jquery isn't working and I am not sure why. I click the button then loop through each col that starts with 'charge_outstanding_' then take the value and assign it to the closest input which is within the same row.
$('#pay_in_full').click(function(){
$("[id^=charge_outstanding_]").each(function(){
charge = $(this).val();
$(this).closest('input').val(charge);
});
});
working JSfiddle: http://jsfiddle.net/F5NvW/2/
Issue with your code: charge = $(this).val(); you are finding td which has no value, you need .html() for this
$(document).on("click", "#pay_in_full", function() {
$("[id^=charge_outstanding_]").each(function(){
var charge = $(this).html();
$(this).next().find('input').val(charge);
});
});
Suggestion: use class name with each <td> like this
Jsfiddle: http://jsfiddle.net/F5NvW/
Note: less error prone..
$(document).on("click", "#pay_in_full", function() {
$(".outstanding").each(function(){
var charge = $(this).html();
$(this).next().find('.paidAmount').val(charge);
});
});
.Closest will search for the ancestor elements, In your case the target input is the children of the next sibling of the selected element. So you have to use .find() or .children() to select that.
Try,
$('#pay_in_full').click(function(){
$("[id^='charge_outstanding_']").each(function(){
charge = parseInt($(this).text());
$(this).next().find('input').val(charge);
});
});
Additionally, You are selecting a td element, so you have to use .text() to get its text not .val()
DEMO