Basically, I want the the user to click the table and edit the text.
This is the Js Fiddle I followed:
http://jsfiddle.net/ddd3nick/ExA3j/22/
Below you will be able see the code I have put together. I have followed a JS fiddle and thought of using this in my page.
When I double click the cell nothing happens, I am not sure why is not working.
Please help to find what's missing!
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<script type="text/javascript">
$(function () {
$("td").dblclick(function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing");
$(this).html("<input type='text' value='" + OriginalContent + "' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
}
});
$(this).children().first().blur(function(){
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
$(this).find('input').dblclick(function(e){
e.stopPropagation();
});
});
});
</script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<table class="editableTable">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Shahid</td>
<td>shahid#ssiddique.info</td>
<td>012-234-2432</td>
</tr>
</tbody>
</table>
<a href='http://ssiddique.info'> ssiddique </a>
</body>
</html>
First include the jQuery library
Than put your script
You might want to take a look at contenteditable Elements
which would than look pretty much like this:
$(function() {
var $td = $("td");
$td.on({
"keypress" : function(e) {
if (e.which !== 13) { // On Return key - "save" cell
e.preventDefault();
$(this).prop("contenteditable", false);
}
},
"dblclick" : function() {
$td.not(this).prop("contenteditable", false);
$(this).prop("contenteditable", true);
}
});
});
td, th { padding:5px; border: 1px solid #ddd; }
td[contenteditable=true] { outline: 2px solid #0af; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<p><b>Double-click</b> on a table cell to edit</p>r
<table>
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>000</td>
<td>Roko</td>
<td>roko#example.com</td>
<td>021-321-4321</td>
</tr>
<tr>
<td>001</td>
<td>Shahid</td>
<td>shahid#example.com</td>
<td>012-123-1234</td>
</tr>
</tbody>
</table>
Related
I have a table with names, surnames and etc. I should change the value of the clicked td using input. I managed to changed the value of the first td but I am not sure how can change the values of specific td.
Here is my code.
let inp
let changevalue
let click = addEventListener("focus" ,function(){
changevalue = document.querySelector("td")
inp = document.createElement("input")
inp.value = changevalue.innerHTML
changevalue.innerHTML = " "
changevalue.append(inp)
})
let newclick = addEventListener("blur" , function(){
changevalue.innerHTML = inp.value
})
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%" id = "TB">
<tr >
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr >
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
You can add click event listeners on each td element and use the blur event only for the dynamically created input.
const tds = document.querySelectorAll("#TB td");
tds.forEach(td => {
td.addEventListener("click", e=>{
let inp = document.createElement("input")
inp.value = td.innerHTML
td.innerHTML = " "
td.append(inp);
inp.focus();
inp.addEventListener("blur", e=>{
td.innerHTML = inp.value;
});
});
});
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%" id = "TB">
<tr >
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr >
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
I have predefined such table in HTML:
<div id="products">
<table>
<thead id="tableHeader">
</thead>
<tbody>
</tbody>
</table>
</div><!-- END of products-->
I fullfill whole table (thead and tbody) dynamically with JS.
The problem is, i wanted to add EventListener to each <th> element of table, so when i click on it - something should happen. However, my code doesn't work:
document.getElementById('tableHeader').childNodes[0].addEventListener('click', function(e)
{
var t = e.target;
console.log(t);
if (t.tagName.toLowerCase() === 'th')
{
console.log(t);
}
}, false);
But when i console.log(document.getElementById('tableHeader').childNodes[0]); - it shows me correctly first th element, so (as you can see on screen) it's <th>PRODUCENT</th>. Why then EventListener doesn't catch anything?
Whole table looks like this: http://imgur.com/vCUHTe7
In my point of view, your table html code is so weird.
th tag -
http://www.w3schools.com/tags/tag_th.asp
HTML
<div id="products">
<table>
<thead id="tableHeader">
<tr>
<th>
PRODUCTS
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div><!-- END of products-->
Javascript
<script>
document.getElementById('tableHeader').childNodes[1].addEventListener('click',
function(e) {
var t = e.target;
if (t.tagName.toLowerCase() === 'th'){
console.log(t);
}
}, false);
</script>
Get all the th element from theadfirst then add addEventListener to all those th using forEach loop. Try the following:
var th = document.querySelectorAll('#tableHeader th')
th.forEach(function(thEl){
thEl.addEventListener('click', function(e){
var t = e.currentTarget;
console.log(t);
//or simply use this
//console.log(this);
});
});
thead th{
cursor: pointer;
}
thead th:nth-child(odd){
background: #b4bac4;
}
thead th:nth-child(even){
background: #efdf94;
}
<div id="products">
<table>
<thead id="tableHeader">
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</thead>
<tbody>
</tbody>
</table>
</div>
I'm trying to use a few lines of code from another StackOverflow user to get a simple live search on my phonenumber table. (How to perform a real time search and filter on a HTML table)
I have added jQuery to my script, and copied and pasted every single line of code (the fruits as in the example) but Chrome nor IE does the job. I'm pretty stuck, but I think that there is something that I simply don't see.
Here is my code:
<html>
<head>
<title>Test</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var $rows = $('#table tr');
$('#search').keyup(function() {
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
</script>
<style>
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
</style>
</head>
<body>
<input type="text" id="search" placeholder="Type to search">
<table id="table">
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table>
</body>
</html>
The demo posted on JsFiddle works inside of JsFiddle. If I go to the Full-Screen JsFiddle Demo it doesn't, same as my own piece of code on my webserver... Any help?
This is not an answer to your question, but perhaps a solution to your problem.
Try this alternate example:
jsFiddle Demo
HTML:
<label for="kwd_search">Search:</label> <input type="text" id="kwd_search" value=""/>
<table id="myTable" class="test1" border="1" style="border-collapse:collapse">
<thead>
<tr>
<th>Name</th>
<th>Sports</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sachin Tendulkar</td>
<td>Cricket</td>
<td>India</td>
</tr>
<tr>
<td>Tiger Woods</td>
<td>Golf</td>
<td>USA</td>
</tr>
<tr>
<td>Maria Sharapova</td>
<td>Tennis</td>
<td>Russia</td>
</tr>
<tr>
<td>Mario Andretti</td>
<td>Formula One</td>
<td>Italy</td>
</tr>
</tbody>
</table>
javascript/jQuery:
$(document).ready(function(){
// Write on keyup event of keyword input element
$("#kwd_search").keyup(function(){
// When value of the input is not blank
var term=$(this).val()
if( term != "") {
// Show only matching TR, hide rest of them
console.log( $(this).val())
$("table tbody>tr").hide();
var term=
$("td").filter(function(){
return $(this).text().toLowerCase().indexOf(term ) >-1
}).parent("tr").show();
} else {
// When no input or clean again, show everything
$("tbody>tr").show();
}
});
});
Here is a JSFiddle Fullscreen
All I did was update the jQuery reference to 1.10.1 as you have 1.7.1
$('#search').on('keyup', function () {
var $rows = $('#table tr');
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function () {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
im traying to get the value of any clicked td and show this in a alert() window with jquery or javascript. I was trayin alote of code around the internet "googling" but anyone can do this but anyways i going to posted here...
$("table tbody").click(function() {
alert($(this).find('td.value').text());
});
$(document).ready(function() {
$('table tbody').find('tr').click(function() {
alert("row find");
alert('You clicked row ' + ($(this).index() + 1));
});
});
$(document).ready(function() {
$('table tbody').click(function() {
var i = $(this).index();
alert('Has clickado sobre el elemento número: ' + i);
});
});
$("table tbody").live('click', function() {
if $(this).index() === 1) {
alert('The third row was clicked'); // Yes the third as it's zero base index
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<td>id</td>
<td>Nombre</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>miguel</td>
</tr>
</tbody>
</table>
Why not attach the click event directly to the td? You also need to make sure you're including jQuery...
$( "td" ).click(function() {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<table border="1">
<thead>
<tr>
<td>id</td>
<td>Nombre</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>miguel</td>
</tr>
</tbody>
</table>
</body>
You need to include jQuery library to start working with it. Then just bind a click event to your td and you should see the alert pop up.
<head>
<title></title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js" type="text/javascript">
// Your code comes here
Also next time if something does not work, the first thing that you are supposed to so id open the console and check if you see any errors and act upon them.
Using console.log instead of alert should be the way to go as alert blocks the UI thread completely.
$("td").click(function() {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<td>id</td>
<td>Nombre</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>miguel</td>
</tr>
</tbody>
</table>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>Toggle</title>
<style>
table, td, th {
border: 2px solid black;
border-collapse:collapse;
height:50px;
}
td {width:200px;
}
body {
padding: 50px;
}
</style>
<script>
var ind;
$(document).ready(function () {
$("#table tr").click(function () {
if ($(this).index() > 0)
$(this).hide();
});
$("#table th").click(function () {
var ind = $(this).index();
$("td:nth-child("+(ind+1)+")").toggle();
});
});
function change() {
$("tr").show();
}
</script>
</head>
<body>
<button id="display" onclick="change">Show all</button>
<table id="table">
<tr>
<th>
Company
</th>
<th>
Name
</th>
<th>
Color
</th>
<th>
type
</th>
</tr>
<tr>
<td>Audi</td>
<td>Q6</td>
<td>Metalic grey</td>
<td>SUV</td>
</tr>
<tr>
<td>Jaguar</td>
<td>A8</td>
<td>Black</td>
<td>Sedan</td>
</tr>
<tr>
<td>Ambassador</td>
<td>Classic</td>
<td>White</td>
<td>Sedan</td>
</tr>
<tr>
<td>Mahindra</td>
<td>Scorpio</td>
<td>White</td>
<td>SUV</td>
</tr>
</table>
</body>
</html>
When i click the tr it will hide.I need to show all the hidden tr when i click the button.And i also written code for hiding a column.But when i hide 3rd column contents of 4th column occupying the 3rd column making the 4th one empty.Can anyone direct me correctly.Thanks in advance.
<button id="display" onclick="change()">Show all</button>
You forgot the ().
$(document).ready(function () {
$("#table tr").click(function () {
if ($(this).index() > 0)
$(this).hide();
});
$("#table th").click(function () {
var ind = $(this).index();
$(this).toggle();
$("td:nth-child("+(ind+1)+")").toggle();
});
});
Please add the code $(tihs).toggle() as shown in above.As you only write code to hide the tds not th. If you want to show that columns again in your button click please add this to your change function.
$("th").show();
$("td").show();