<!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();
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>
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>
I have several tables in my page and none of them has an id attribute.
I retrieve with Javascript or jQuery a row of one of these tables. Then I want to do things to all the rows of that table but not to any row of any other table. Selecting such rows through jQuery would do, and also doing that with Javascript would be ok.
So I need to identify a table and the only thing I know about it is that this row belongs to it. Is it possible ?
Runnable example:
<html>
<head>
<script src="jquery-1.11.3.js"></script>
<style>
.myYellow
{
background-color: yellow;
}
</style>
<script type="text/javascript">
function doStuff() {
var jqRow = jQuery("#r1t1"); if (jqRow.length !== 1) throw "ERROR";
var htmlRow = jqRow.get(0); // How do I restrict the jqSelectedRows below to only the table this row belongs to ?
var jqSelectedRows = jQuery("tr.myYellow"); // But I only want the yellow rows of the table containing htmlRow .
jqSelectedRows.each(function(index) {
this.setAttribute("style", "background-color: blue");
});
}
</script>
</head>
<body>
<table border="1">
<tr id="r1t1" ><td>r1 t1</td></tr>
<tr id="r2t1" class="myYellow"><td>r2 t1</td></tr>
<tr id="r3t1" class="myYellow"><td>r3 t1</td></tr>
<tr id="r4t1" ><td>r4 t1</td></tr>
</table>
<br><br>
<table border="2">
<tr id="r1t2" class="myYellow"><td>r1 t2</td></tr>
<tr id="r2t2" class="myYellow"><td>r2 t2</td></tr>
<tr id="r3t2" ><td>r3 t2</td></tr>
</table>
<br><br>
<input type="button" value="Do" onclick="doStuff()">
<br>The button selects the first row of the first table ("r1 t1") and then it
<br>must turn blue all the <strong>yellow</strong> rows of <strong>that table only</strong>;
no other table must be affected.
</body>
</html>
Use .siblings(). See comment in snippet.
Note: Changed button slightly which of course can easily be converted back to the original way by deleting the code around the doStuff() function and adding the onclick="doStuff();" back to the <input> button.
$(function() {
$('#do').on('click', doStuff);
function doStuff() {
var jqRow = $("#r1t1");
if (jqRow.length !== 1) throw "ERROR";
var jqSelectedRows = jqRow.siblings(); // How do I restrict the jqSelectedRows below to only the table this row belongs to? | Use .siblings() to collect all <tr>s within the table (excluding the referenced tr#r1t1).
jqSelectedRows.each(function(index) {
this.setAttribute("style", "background-color: blue");
});
}
});
.myYellow {
background-color: yellow;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>32721615</title>
</head>
<body>
<table border="1">
<tr id="r1t1">
<td>r1 t1</td>
</tr>
<tr id="r2t1" class="myYellow">
<td>r2 t1</td>
</tr>
<tr id="r3t1" class="myYellow">
<td>r3 t1</td>
</tr>
</table>
<br>
<br>
<table border="2">
<tr id="r1t2" class="myYellow">
<td>r1 t2</td>
</tr>
<tr id="r2t2" class="myYellow">
<td>r2 t2</td>
</tr>
<tr id="r3t2">
<td>r3 t2</td>
</tr>
</table>
<br>
<br>
<input id="do" type="button" value="Do">
<br>The button selects the first row of the first table ("r1 t1") and then it
<br>must turn blue all the <strong>yellow</strong> rows of <strong>that table only</strong>; no other table must be affected.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>
It has taken me days to come up with the following, and now I'm realizing that it still doesn't work. My "add row" button isn't working properly. What am I missing?
<table>
<tr>
<th>field</th>
<th>comparison</th>
<th>value</th>
</tr>
<tr>
<td>
<select style="width:5em;" class="field">
<option>name</option>
<option>age</option>
<option>sex</option>
</select>
</td>
<td>
<select style="width:5em;" class = "comp">
<option>equals</option>
<option>starts with</option>
<option>not equal to</option>
</select>
</td>
<td><input type="text" class = 'value'></td>
<td><button id="add">Add row</button></td>
</tr>
</table>
$('#tableSearchMainAccount1 tr').each(function() {
var td = '';
// used to skip table header (if there is)
if ($(this).find("td:first").length > 0) {
$(this).find('option:selected').each(function() {
td = td + $(this).text() + ',';
});
td = td + $(this).find('input').val();
filt[ctr] = td;
ctr += 1;
}
});
//alert(filt); //alert output like name,equals,ann,age,equals,11
$('#add').live('click', function() {
var $lastTr = $('table tr:last');
console.log($lastTr);
$lastTr.clone().insertAfter($lastTr);
// Remove the button from the previous tr, otherwise each row will have it.
$('#add', $lastTr)
.replaceWith('<button class="remove_row">Remove row</button>');
});
$('.remove_row').live('click', function() {
$(this).closest('tr').remove();
});
From the discussion in the comments, it appears you have not referenced jQuery.
Add the following to your <head></head> section:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
There are many other CDNs that host jQuery for you, or you can download it yourself. All of these details can be found on http://jquery.com/download/.
So that your markup looks something like the following:
<!DOCTYPE html>
<html>
<head>
<title>My jQuery Project</title>
<script src="jquery-1.8.3.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<table>...</table>
</body>
</html>
Note that I also referenced another external file called "scripts.js". This is where you could place all of your JavaScript and jQuery logic.
$(document).ready(function(){
/* Wrapping your code with a document-ready
block will ensure that the DOM will be
ready before your code runs
*/
});
replace
<table>
with
<table id="tableSearchMainAccount1">
would be my starter for 10.
I want the serial no: to increase whenever a row is inserted dynamically. and when any row is deleted whether in the beginning or in the end or in-between, the numbers should rearrange themselves in proper order. I'm a fresher and could not get a logic on how to do it. Can anyone pls guide me on the same. Thanks in advance for the support.
I have given my sample coding below. On clicking the "(+)" button, the row increases automatically. when that is happening, i want the serial no also to increment automatically. And when any row is deleted, (even in middle of the table), then the numbers should automatically adjust themselves in proper order. Pls guide me on the same.
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
id=1;
var serial =1;
$('#butVal').click(function(){
var master = $(this).parents("#table-2");
id++;
var sample = master.find('.tabRow').clone();
sample.attr("id", id + "item");
master.find('.tabRow').removeClass('tabRow');
master.find('tbody').append(sample);
//alert(master);
//alert(sample);
//alert(sample.html());
//alert(master.html());
var rowLen = $('#table-2 > tbody >tr').length;
//alert(rowLen);
if(rowLen>9)
{
alert("no of row is reached 10");
}
}
);
$('table#table-2 button.remove').live('click', function(){
if($("table#table-2 tbody tr").length > 1)
{
if($("table#table-2 tbody tr").index($(this).parents('tr')) ==$("table#table-2 tbody tr").length -1)
{
$(this).parents('tr').prev().addClass("tabRow");
}
$(this).parents('tr').remove();
}
else
{
alert("you can.t remove this record");
}
} );
});
//jquery ends here
</script>
<style type="text/css">
.total
{
border:1px solid black;
width:90%;
height:1250px;
margin-left:auto;
margin-right:auto;
}
.add
{
width:100%;
}
.add select,input
{
width:100%;
}
</style>
</head>
<body>
<div class="total">
<table id="table-2" class="add" border ="1">
<thead>
<tr><th class="small"> S.No</th><th> Product Status </th> <th> Stock Status</th> <th class="sizing"> Description</th> <th> Quantity </th> <th> Price </th> <th> Total </th >
<th> <button id="butVal"> + </button></th></tr>
</thead>
<tbody>
<tr class="tabRow" id="1item">
<td class="sno"> </td>
<td><select><option> New </option><option> Old </option></select> </td>
<td><select><option> In Stock </option><option> Out Of Stock </option></select> </td>
<td> <input type="text" name="desc"/> </td>
<td> <input type="text" name="qty"/> </td>
<td> <input type="text" name="price"/> </td>
<td> <input type="text" name="total"/> </td>
<td><button class="remove">Remove</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> Grand Total </td>
<td> </td>
<td> <button id="proceed" onClick="payment();"> Proceed </button> </td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
I made some changes to your code at jsfiddle.net. The link is: http://jsfiddle.net/2nzgG/30/. All my comments can be found in the javascript section. I hope this is what you are looking for. Let me know if you need anything else.
EDIT:
I also added the code below, but the comments will be found in the link...
$(document).ready( function() {
$('#butVal').click(function(){
var rowLen = $('tr.tabRow').length;
if(rowLen>9)
{
alert("no of row is reached 10");
}
else
{
$("tr.tabRow:first").clone(true).appendTo("#table-2>tbody");
$(".tabRow:last").children("td").children("input").each(function(index, element){
$(element).val("");
});
}
});
$(document).on("click", "button.remove", function(){
if($(this).parents("tr").siblings("tr.tabRow").length > 0)
{
$(this).closest("tr.tabRow").remove();
}
else
{
alert("you can.t remove this record");
}
});
//FOR Serial Number- use ON
$(document).on("click", ".add, .remove", function(){
$("td.sno").each(function(index,element){
$(element).text(index + 1);
});
});
});