I have a table with td's that if double clicked, become input fields. Now, I want to jump from an input to another.
I already made this to change my td to an input:
var id = $(this).closest("tr").find("cell_id").text();
var html = $(this).text();
var input = $('<input id="txt_id" type="text"/>');
input.val(html);
$(this).html(input);
And this to jump from one to other:
$("#mainTable").on("keydown","td.mainCellQuantity",function(e) {
var keyCode = e.keyCode || e.which;
if(keyCode==9||keyCode==13){
e.preventDefault();
var cellIndex = $(this).index();
$(this).closest('tr').next().children().eq(cellIndex).dblclick();
}
});
The above codes are working but the input's are not focused. I want them to be focused after tab press.
var rows = parseInt(document.getElementById("my_table").getElementsByTagName("tbody")[0].rows.length);
var table = document.getElementById("mainTable").getElementsByTagName("tbody")[0];
var row = table.insertRow(rows);
var cell1 = row.insertCell(0);
cell1.innerHTML = editable_cell_being_transformed_to_input;
I want this cell1 to be focused since upon double clicked, it only change the td to input but not focusing:
An alternative: Instead of replacing td with input you can set contenteditable attribute to true for each td. This allows editing the td content. Also pressig Tab key moves focus to next td by default.
Example:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td contenteditable="true">data 1</td>
<td contenteditable="true">data 2</td>
<td contenteditable="true">data 3</td>
</tr>
</table>
Related
Basically where I have the 3 buttons 1, 2, and 3 in the second column first row if I type 3 the only button shows up is 3....removing buttons 1 and 2
for example if I'm looking for text with "2" in it it should still show
I want all buttons to stay regardless if they show up in the search or not...can this be achieved?
I have atleast 4 columns visible at all times and I want to search ONLY the text in the < TD > not the element text in the < TD > so radio buttons, buttons, check boxes....I want those to be immune from searches always show them as long as that particular row has the text snippet in one of the columns of that row just search the text in < TD >
Googling the right phrase has led me here because google assumes I want a checkbox to search a table....NO....I want a search to only focus on text not element text if that makes sense
Thanks
function myFunction() {
const input = document.getElementById("myInput");
const inputStr = input.value.toUpperCase();
const search_length = inputStr.length;
//alert(search_length);
document.querySelectorAll('#myTable tr:not(.header)').forEach((tr) => {
const anyMatch = [...tr.children]
.some(td => td.textContent.toUpperCase().includes(inputStr));
//fix the button issue here
if (anyMatch) tr.style.removeProperty('display');
else tr.style.display = 'none';
});
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Type to search">
<table id="myTable" border="2">
<thead><tr>
<th>Col1</th>
<th>Col2</th>
</tr></thead>
<tbody>
<tr><td>2</td><td>
<table>
<tr><td>2<button type="button">1</button></td></tr>
<tr><td>5<button type="button">2</button></td></tr>
<tr><td>9<button type="button">3</button></td></tr>
</table></td></tr>
<tr><td>test4</td><td><button type="button">5</button></td></tr>
</tbody>
</table>
If you do not want to hide the sub table rows your selector needs to only touch the outside table.
function myFunction() {
const input = document.getElementById("myInput");
const inputStr = input.value.toUpperCase();
const search_length = inputStr.length;
//alert(search_length);
document.querySelectorAll('#myTable > tbody > tr:not(.header)').forEach((tr) => {
const anyMatch = [...tr.children]
.some(td => td.textContent.toUpperCase().includes(inputStr));
//fix the button issue here
if (anyMatch) tr.style.removeProperty('display');
else tr.style.display = 'none';
});
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Type to search">
<table id="myTable" border="2">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>
<table>
<tr>
<td>2<button type="button">1</button></td>
</tr>
<tr>
<td>5<button type="button">2</button></td>
</tr>
<tr>
<td>9<button type="button">3</button></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>test4</td>
<td><button type="button">5</button></td>
</tr>
</tbody>
</table>
Need help with populating a text area based on html table row selection.
In the table below, I want to extract the content of the column 'Comments' for the selected row and write into the text area 'Comment' on the same page. I have only managed to create the table but nothing else.
Below is the code I have now created from this link. What is happening now is that only the currently selected cell gets put in the text box instead of just the 'Comment' column. I want to input only in the 'Comment' column into the box regardless of the cell clicked upon in the row.
<table id="table">
<tr>
<th>Name</th>
<th>Age</th>
<th>Comments</th>
</tr>
<tbody>
<tr>
<td>John</td>
<td>42</td>
<td>avery long comment</td>
</tr>
<tr>
<td>Peter</td>
<td>35</td>
<td>another very long comment</td>
</tr>
<tr>
<td>Mary</td>
<td>54</td>
<td>some comment</td>
</tr>
</tbody>
</table>
<script>
var table = document.getElementById('table');
var selected = table.getElementsByClassName('selected');
table.onclick = highlight;
function highlight(e) {
if (selected[0]) selected[0].className = '';
e.target.parentNode.className = 'selected';
var element = document.querySelectorAll('.selected');
if (element[0] !== undefined) { //it must be selected
document.getElementById("myTextbox").value = element[0].children[0].firstChild.data
}
}
</script>
<div >
<textarea class="form-control" id="myTextbox"></textarea>
</div>
Thanks for your help.
You're getting the first column but you can get the third column with the comment by changing the index of the child to 2 instead of 0.
document.getElementById("myTextbox").value = element[0].children[2].firstChild.data
I have a table with data. The data is stored in a database and rather than allowing the user access to phpmyadmin, I am allowing them to alter the data from this table they access from the webpage. I can easily post/insert/update the data, but the difficulty I am encountering involves allowing the user to edit the data in the table.
I want to invoke a swap between a <td> and <input> and vice versa using jQuery using .click(). jQuery 3.2.1 is used
The issue:
<td> are replaced by <input> when clicked on. When the <input> comes out of focus, the <input> swaps back. The first <input> of a row can be clicked on more than once. The user can enter anything they want and click outside of the <input> and the data can be sent. However, if any other <td> in the same row is clicked on, If the first <td> of the row is an <input> it will no longer swap back into a <td>, the <td>'s to the right of this if clicked on will now appear as <input>'s, but collapse beneath the first <td> of the row and remain as <input>'s. The <input> will not swap back into a <td>. The <input> stays regardless of clicking outside of it to lose focus so it can revert back into a <td>.
I can call whatever text has been entered in the <td>, the issue lies within this area of code below, my ID's exist and are called properly, the swap from <td> to <input> and vice versa is not executing properly.
Thanks in Advance
The Code:
//### get value of insert button in row when clicking on <td> ###
$("tr").on("click",function(event){
neededValue1 = $(this).attr('value');
neededValue = neededValue1;
console.log("<tr> button Value: "+neededValue);
//### id clicked in tr w/row value ###
$('#matName'+neededValue).click(function(){
// ### Swap <td> with <input>###
$ele1 = $(this);
$input1 = $('<input id="UpdatedInput'+neededValue+' "/>').val($ele1.text());
$ele1.replaceWith($input1);
//### Save the Input entered and swap back###
save = function(){
var $p = $('<td id="matName'+neededValue+'"/>').text($input1.val());
$input1.replaceWith($p);
};
$input1.one('blur', save).focus();
});
$('#bed0FL'+neededValue).click(function(){
$ele2 = $(this);
$input2 = $('<input id="UD'+neededValue+'"/>').val($ele2.text());
$ele2.replaceWith($input2);
save = function(){
var $p2 = $('<td id="bed0FL'+neededValue+'" />').text($input2.val());
$input2.replaceWith($p2);
};
$input2.one('blur', save).focus();
});
});
https://jsfiddle.net/t3H_DANIMAL/x8an7c0e/
It's not quite clear to me from your question if there is a specific reason for triggering on the tr's click-event, so I took the liberty to move it to the td's, as well as putting the td's identifying values inside the data-field of each td, as you can see in the snippets HTML.
In the JavaScript code you can see the .on("click",...) triggering a function which sets up a new input field which it fills with the td's text-content and inserts it into the td.
I also set the reverse function on the input-fields .blur() so that when the text-field looses it's focus, i.e. when you click or tab your way out of it, you remove the input-field and place the text-value from the input inside the td.
The .blur() is also where I'd put the Ajax-magic to update the DB.
PS! Pardon my CSS hacks, it's a rush job... :)
$('td').on('click', function(event){
var name = $(this).attr('data-field');
var value = $(this).text();
var $input = $('<input>');
$input.attr({
'name': name,
'id':name,
'type':'text'
});
$input.val(value);
$input.on('click',function(event){
event.preventDefault();
event.stopPropagation();
});
$input.on('blur',function(){
$(this).parent().text($(this).val());
/**
* INSERT AJAX HERE
**/
});
$(this).html($input);
$input.focus();
});
table, tr, td {
border: 1px solid silver;
border-collapse: collapse;
width: 500px;
}
tr {
height:100%;
}
td {
padding: 0px;
word-wrap:none;
text-wrap:none;
font-size:20px;
line-height:20px;
height:100%;
width: 25%;
}
td input {
border:0px;
width:100%;
height:100%;
margin:0px;
padding: 0px;
line-height:18px;
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
<th>col 4</th>
</tr>
<tr>
<td data-field="r1v1">row 1 val 1</td>
<td data-field="r1v2">row 1 val 2</td>
<td data-field="r1v3">row 1 val 3</td>
<td data-field="r1v4">row 1 val 4</td>
</tr>
<tr>
<td data-field="r2v1">row 2 val 1</td>
<td data-field="r2v2">row 2 val 2</td>
<td data-field="r2v3">row 2 val 3</td>
<td data-field="r2v4">row 2 val 4</td>
</tr>
</table>
I have two buttons called "Add Column Left" and "Add Column Right". I need to get the Index of the clicked cell, so that I can get the column index and add the new column to the previous one.
My current code:
function AddColumn(addLeft){ // Which button is clicked? Add Left || Add Right
var header = $('#tableHeader'); // Get the table header element
var headerContentToAppend = "<th>Header</th>"; // The default text of the new header
var table = $('#tableBody'); // Get the table body element
var rowContentToAppend = "<td>Content</td>"; // The default text of the new cells
// issue 1: missing index of the clicked/focussed column
if (addLeft) { // Button "Add Column Left" clicked
header.prepend(headerContentToAppend); // Add the Column to the left of the previous column
}
else { // Button "Add Column Right" clicked
header.append(headerContentToAppend); // Add the Column to the right of the previous column
}
$('table th').last().attr("contenteditable", true).focus(); // set all cells editable and focus the last one
table.find("tr").each(function() { // Get all existing rows ....
// issue 2: maybe the cells don't match to the right column, I have to test this after finishing the first issue
$(this).append(rowContentToAppend); // ... and add cells to the new column
});
}
So my problem is to get the right index of the clicked column. After adding a new column i have to fill it up with new cells below.
I placed two comments called "issue" in the code, that should make things clear.
My HTML Code:
<table id="dataTable">
<thead id="tableHeader">
</thead>
<tbody id="tableBody">
</tbody>
</table>
I want to control the table by Javascript to keep it dynamic.
Since you're using jQuery you could use the method index() to get the element index :
var index = $(this).closest('tr').find('td').index($(this));
Hope this helps.
var index = 0;
function AddColumn(addLeft){
var header = $('#tableHeader');
var headerContentToAppend = "<th>Header</th>";
var table = $('#tableBody');
var rowContentToAppend = "<td>Content</td>";
if (addLeft)
header.find('th').eq(index).before(headerContentToAppend);
else
header.find('th').eq(index).after(headerContentToAppend);
$('table th').attr("contenteditable", true).last().focus();
table.find("tr").each(function() {
if (addLeft)
$(this).find('td').eq(index).before(rowContentToAppend);
else
$(this).find('td').eq(index).after(rowContentToAppend);
});
$('td').removeClass('selected');
}
$('body').on('click','td',function(){
$('td').removeClass('selected');
$(this).addClass('selected');
index = $(this).closest('tr').find('td').index($(this));
});
.selected{
background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<thead id='tableHeader'>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</thead>
<tbody id='tableBody'>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 11</td>
<td>column 22</td>
<td>column 33</td>
</tr>
<tr>
<td>column 111</td>
<td>column 222</td>
<td>column 333</td>
</tr>
</tbody>
</table>
<br>
<button onClick='AddColumn(true)'>< Add to the Left</button>
<button onClick='AddColumn(false)'>Add to the Right ></button>
I have a scenario where there is a table of 4 rows, in the 4th row is a textbox. When an "onchange" event of the textbox is triggered, I want to extract the data in the cells of the same specific row into another table. and ofcourse my table is consisted of more than one row.
<div class="ProductsTable">
<table class="tablestyle">
<tr>
<th>Item</th>
<th>Price</th>
<th>Preview</th>
<th class="auto-style4">Quantity</th>
<th class="auto-style15">Selected Items</th>
</tr>
<tr id="row1">
<td class="auto-style1" id="item_name">Sofa</td>
<td class="auto-style2" id="item_price">$280.00</td>
<td class="auto-style3">
<img class="itemimage" src="images\sofa1.jpg" />
</td>
<td class="auto-style4">
<input class="quantitybox" id="item_quantity" type="text" onchange="get_quantity();" />
</td>
<td rowspan="10">
<table class="InvoiceTable" id="invoice">
<tr>
<th class="auto-style7">Item</th>
<th class="auto-style2">Price</th>
<th class="auto-style4">Quantity</th>
</tr>
</table>
</td>
</tr>
</table>
</div>
And my javascript is:
function get_quantity() {
var table = document.getElementById("invoice");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2)
cell1.innerHTML = document.getElementById("item_name").innerHTML;
cell2.innerHTML = document.getElementById("item_price").innerHTML;
cell3.innerHTML = document.getElementById("item_quantity").value;
}
How can I create a loop to check through all my table when an "onchange" event is triggered. As I actually have 10 rows in my table.
Preferably without using jquery.
If I understand you correctly you are looking for a function to copy the content of the changed row, that is the data in each column, into the invoice table.
I expect the rows to be created dynamicaly with some sort of iteration. When iterating I expect a unique number is availabe why this can be used as a general selector.
Here is a function to do this:
function get_quantity(rowNumber) {
var table = document.getElementById("invoice" + rowNumber);
var row = table.insertRow(1);
var columns = document.getElementById("row" + rowNumber).childNodes;
var dataColumnIndex = 0;
for (var i = 0; i < columns.length; i++) {
if (columns[i].className == "data") {
var cell = row.insertCell(dataColumnIndex);
cell.innerHTML = columns[i].innerHTML;
dataColumnIndex++;
}
}
var inputQuantity = document.getElementById("item_quantity" + rowNumber).value
row.insertCell(dataColumnIndex).innerHTML = inputQuantity;
}
You select what columns to copy by marking the them with class data.
I gets the invoice table by expecting it to have the id invoice + number. Fx. invoice1. Same goes with each row and the input field.
Here is a plunker with a full example.
Edit
There should only be a single invoice table where all products are added to.
By selecting the same table for row insertion in the function this is fixed.
This updated plunker has the change