I have written the below code to display a selection of images within a tag when a certain button is clicked on a page. The Jquery to hide the elements on page load works, but the rest of the code does nothing. Can anyone help me figure this out please?
$(document).ready(function(){
//Create Array for images
var vanImgArr = new Array("<img src='img\yvr\coalharbour.jpg'>", "<img src='img\yvr\lgbridge.jpg'>", "<img src='img/yvr/yaletown.jpg'/>", "<img src='img\yvr\lgbridge2.jpg'>");
var sgpImgArr = new Array("<img src='img\sgp\elginbridge.jpg'>", "<img src='img\sgp\mbfc.jpg'>", "<img src='img\sgp\sgpdusk.jpg'>", "<img src='img\sgp\sgppano.jpg'>");
var aniImgArr = new Array("<img src='img\ani\cat1.jpg'>", "<img src='img\ani\cat2.jpg'>", "<img src='img\ani\dog1.jpg'>", "<img src='img\ani\tandd.jpg'>");
var absImgArr = new Array("<img src='img\abs\abs1.jpg'>", "<img src='img\abs\abs2.jpg'>", "<img src='img\abs\abs3.jpg'>", "<img src='img\abs\abs4.jpg'>");
var clickedId;
var idx = 0;
//to display images
function displayImgs(arr)
{
if(idx <= arr.length)
{
('#pic').hide();
('#pic').html(arr[idx]);
('#pic').fadeIn('slow');
if(idx > arr.length)
{
idx = 0;
}
else
{
idx++;
}
}; //button click close
}//displayImgs method close
//on page load
$('p').hide();
//More info Action
$('#more').hover(function(){
$('#info, #info2').fadeIn('slow');
});
//Button Click Action
$(':button').click(function(){
clickedId = this.id;
alert(clickedId); //testing
switch(clickedId)
{
case 'yvr':
displayImgs(vanImgArr);
break;
case 'sgp':
displayImgs(sgpImgArr);
break;
case 'ani':
displayImgs(aniImgArr);
break;
case 'abs':
displayImgs(absImgArr);
break;
}//switch/case close
});//button click close
});
Here is my HTML code to go with the above
<!DOCTYPE html>
<title>Ricky Deacon CSIS3380-001, Assignment 2, Summer 2017</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js"></script>
<table class="t1">
<tr>
<th width="25%" rowspan="3"><img src="img\rick2.JPG" alt="RD portrait goes here"></th>
<th width="50%" colspan="2">Rick Deacon</th>
<th width="25%" rowspan="3"><img src="img\rick1.JPG" alt="RD portrait goes here"></th>
</tr>
<tr>
<td id="subtitle" colspan="2">Photography Showcase</td>
</tr>
<tr>
<td id="desc" colspan="2">Click the corresponding button to display images from your chosen category.</td>
</tr>
</table>
<br/>
<br/>
<table class="t2">
<tr>
<th>
<input id="van" type="button" name="submit" value="Show Vancouver Images"/>
</th>
<th>
<input id="sgp" type="button" name="submit" value="Show Singapore Images"/>
</th>
<th>
<input id="ani" type="button" name="submit" value="Show Animal Images"/>
</th>
<th>
<input id="abs" type="button" name="submit" value="Show Abstract Images"/>
</th>
</tr>
<tr>
<th>
<p id="info">Rick Deacon's Flickr</p>
</th>
<th colspan="2">
<h1 id="more">More Info and Portfolio Links</h1>
</th>
<th>
<p id="info2">Prints For Sale</p>
</th>
</tr>
</table>
<br/>
<br/>
<p id="pic" align="center">Image Goes Here</p>
I think you've forgotten about the $ sign on your code.
Your display function should be like this
function displayImgs(arr){
if(idx <= arr.length)
{
$('#pic').hide();
$('#pic').html(arr[idx]);
$('#pic').fadeIn('slow');
if(idx > arr.length)
{
idx = 0;
}
else
{
idx++;
}
}; //button click close
}//displayImgs
Also, shouldn't you use one idX for each array?
Your JavaScript refers to elements which don't exist in your markup.
First, there are no elements with the id of "more", so the "More Info" action will never run. Second, you are targeting a button element in your "Button Click" action, but I see no button elements either--just <input type="button" />, which you must specify using $(":button, input[type='button']") (Either one of those two selectors will work).
You are selecting button tag while there is no button tag in your html. You should select input tag using $('input[type="button"]')
but this might not be good practice at the time of debugging so you should assign input tag a name and then select them using
$('input[name="elementname"]').
Second .In "this.id" is not proper syntax you should use $(this).attr('id');
Related
I created a form in Google Apps Script, to send data to a sheet, but I wanted a way to dynamically add rows by clicking a button. I found this article (https://www.geeksforgeeks.org/how-to-dynamically-add-remove-table-rows-using-jquery/) that uses jquery that works well great, even shows how to delete a line, whilst also renaming the <tr> tag id to the correct number as well as the text content of the first <td> tag.
However, I added an autocomplete input using materialize, and thought I could use the same method to change the <input> ID when deleting a row, but, seem to be failing miserably.
To see what I'm talking about, I'd invite you to run the code snippit, and add a few rows. If you delete any of the rows (apart from the last one), then all the Row numbers go down by one, the <tr> tag ids go down by one, but the <input> tag ids don't.
I apologize if my query isn't clear, and would be happy to try and explain more, if needed.
Here is all the code to recreate the project in a "normal" code editor :
JS in first snippit, html in second
let rowIdx = 1;
//This list would be generated from a google sheet on page load for the autocomplete input
let listRecettes = {
"Banana": null,
"Orange": null,
"Mango": null,
}
//ON LOAD
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.autocomplete');
var instances = M.Autocomplete.init(elems);
// Load words into autocomplete
populateWordsRecettes();
});
//Autocomplete initialize
function populateWordsRecettes() {
var autocomplete = document.getElementById("recettes1");
var instances = M.Autocomplete.init(autocomplete, {
data: listRecettes
});
}
//autocomplete initialize for added rows
function newLineAutocomplete() {
var autocomplete = document.getElementById(`recettes${rowIdx}`);
var instances = M.Autocomplete.init(autocomplete, {
data: listRecettes
});
console.log(`Row ${rowIdx} initialized`);
}
document.getElementById('btnAjouterLigne').addEventListener('click', addLine);
function addLine() {
// jQuery button click event to add a row.
// Adding a row inside the tbody.
$('#tableBodyCasse').append(`<tr id="R${++rowIdx}">
<td class = "row-index">Row ${rowIdx}</td>
<td><div class = "input-field"><input type="text" id="recettes${rowIdx}" class="autocomplete"></div></td>
<td>Lorum Ipsum</td>
<td>Lorum Ipsum</td>
<td>Lorum Ipsum</td>
<td><button class="btn waves-effect red darken-4 waves-light btnSupprimerLigne">Delete</button></td>
</tr>`);
//Initialize the autocomplete for new row
newLineAutocomplete();
}
//delete line
$('#tableBodyCasse').on('click', '.btnSupprimerLigne', function() {
// Getting all the rows next to the
// row containing the clicked button
let child = $(this).closest('tr').nextAll();
// Iterating across all the rows
// obtained to change the index
child.each(function() {
// Getting <tr> id.
let id = $(this).attr('id');
// Getting the <p> inside the .row-index class.
let idx = $(this).children('.row-index');
// Gets the row number from <tr> id.
let dig = parseInt(id.substring(1));
// Modifying row index.
idx.html(`Row ${dig - 1}`);
// Modifying row id.
$(this).attr('id', `R${dig - 1}`);
});
//MY PROBLEM STARTS HERE
let childInput = $(this).find('input').nextAll();
childInput.each(function() {
let idInput = $(this).attr('id');
let digInput = parseInt(idInput.substring(9));
console.log(digInput);
$(this).attr('id', `recettes${digInput - 1}`);
});
// Removing the current row.
$(this).closest('tr').remove();
// Decreasing the total number of rows by 1.
rowIdx--;
});
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body>
<div class="container">
<!-- CONTAINER START -->
<table class="striped">
<thead>
<tr>
<th>Row num</th>
<th>Product</th>
<th>Type</th>
<th>Qty</th>
<th>Total</th>
<th>Delete line</th>
</tr>
</thead>
<tbody id="tableBodyCasse">
<tr id="R1">
<td class="row-index">Row 1</td>
<td>
<div class="input-field"><input type="text" id="recettes1" class="autocomplete"></div>
</td>
<td>unknown</td>
<td>2</td>
<td>5,4</td>
<td><button class="btn waves-effect red darken-4 waves-light btnSupprimerLigne">Delete</button>
</td>
</tr>
</tbody>
</table>
<button class="btn waves-effect waves-light" id="btnAjouterLigne">Add line
<i class="material-icons left">add_circle_outline</i>
</button>
</div>
<!--CONTAINER END -->
<?!= include("page-casse-js"); ?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
I am dynamically adding elements. However when I try and serialize the form, none of the dynamically generated elements are serialized.
This is the function I'm using to add elements to the page :
function addObjects(IDname,classname)
{
//to add more objects
var number;
switch(classname)
{
case "name":
number = no_Name++;
break;
case "part":
number = no_part++;
break;
}
var id = classname + number;
$("#"+IDname).append('<tr class="'+id+'"><td><input id="'+id+'" class="'+id+'" type="text"> <button class="'+id+'" onclick=removeAdditions("'+id+'")>x</button></td></tr>');
}
The page looks like this:
<html>
<head>
<script src="Controller.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
//in order to prevent form reload when button click occurs
$(document).ready(function(){
document.getElementById("ReportForm").onsubmit = function (event) { event.preventDefault(); }
});
</script>
</head>
<body>
<div class="detailsPane" id="detailsPane1" >
<form id="ReportForm" name="ReportForm" >
<table style="width: 100%;">
<tbody>
<tr>
<td>
1. Describe the Status briefly-
</td>
<td>
<textarea id="StatDescp" name="StatDescp"></textarea>
</td>
</tr>
</tbody>
</table>
<br>
<table style="width: 100%;">
<thead>
<tr>
<th colspan="4" align="top">
Part Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align:top;">
Part Name:
</td>
<td style="vertical-align:top;">
<table >
<tbody id="PartName">
<tr class="partname0">
<td><input class="part_name" type="text"> <button onclick='addObjects("PartName","part_name");'>+</button></td>
</tr>
</tbody>
</table>
</td>
<tbody>
</table>
</form>
</div>
<div id="buttonDiv" >
<a class="bottomLeftResultDiv" id="messageBox"></a>
<input type="button" id="saveButton" value="Save" style="width:85px" onclick="save();" />
</div>
</body>
</html>
And finally here is the save Button.
function save() {
var select = document.getElementById('newReportPane');
var contents = $('#ReportForm').serialize();
contents = contents.replace(/=on/g, "=checked");
contents = contents.replace(/\+/g, " ");
$("#messageBox").html("Saving report...");
console.log(contents);
$.post("/Report/Report1", { action: "save", content: contents }, function (data) {
if (data != "ACK")
$("#messageBox").html("Unable to save.");
else
$("#messageBox").html("Report saved successfully");
});
}
When I click on the save button, it only posts this StatDescp= without any of the dynamically generated elements.
I really can't figure out why.
Any help would be appreciated.
Give a name= attribute to each of your added inputs.
From http://api.jquery.com/serialize/
For a form element's value to be included in the serialized string,
the element must have a name attribute.
I am trying to get my button selections to display in a table on my web application. Bellow you find the pieces of code that relate to my 1. My function which allows for the selections (may not even be relevant..), 2. the buttons which you can select in order to set the parameters, and 3 the table with class name and the rows where they will go. I've been struggling with this! Please Help!
My function:
function setClip(val)
{
clip=val;
}
function setZoom(val)
{
zoom=val;
}
function geoMap(val)
{
gmap=val;
}
function swap(imgNumber)
{
if(clip==true & zoom==false & gmap==false)
document.getElementById("default").src=imgNumber+"clip.jpg";
else if(clip==false & zoom==true & gmap==false)
document.getElementById("default").src=imgNumber+"zoom.jpg";
else if(clip==false & zoom==true & gmap==true)
document.getElementById("default").src=imgNumber+"zoomp.jpg";
else if(clip==true & zoom==true & gmap==true)
document.getElementById("default").src=imgNumber+"clipzoomp.jpg";
else if(clip==true & zoom==false & gmap==true)
document.getElementById("default").src=imgNumber+"clipp.jpg";
else if(clip==true & zoom==true & gmap==false)
document.getElementById("default").src=imgNumber+"clipzoom.jpg";
else if(clip==false & zoom==false & gmap==true)
document.getElementById("default").src=imgNumber+"p.jpg";
else
document.getElementById("default").src=imgNumber+".jpg";
}
My Buttons:
<input type ="button" id="button3" value="Apply Mask" onclick="setClip(true)">
<input type ="button" id="button3" value="No Mask" onclick="setClip(false)">
<input type="button" id="button3" value="Maintain Zoom In" onClick="setZoom(true)">
<input type="button" id="button3"value="Maintain Full View" onClick="setZoom(false)">
<input type="button" id="button3" value="GeoMap On" onClick="geoMap(true)">
<input type="button" id="button3" value="GeoMap Off" onClick="geoMap(false)">
The table I would like my selections to be displayed in, basically I want the values of the selected buttons to but put in the table after they have been selected
<table class="status" height="50" width="800">
<tr>
<td width="200" align="center">Step 1 Selection</td>
<td width="200" align="center">Step 2 Selection</td>
<td width="200" align="center">Step 3 Selection</td>
</tr>
</table>
I think your best bet here is using jQuery. It's far easier to manipulate than Javascript and was designed to easily manipulate objects. If you know CSS and a little Javascript, it's easy to pick up too. You don't even have to host it, as Google hosts it. All you need to do is add the following source code to the top where your scripts are:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var buttonCount=1;
$(document).ready(function() {
$("input[type='button']").click(function() {
if(buttonCount <= 3) {
//make sure that there are no duplicates
if($(this).get(0).className != "buttonUsed")
{
$(this).get(0).className = "buttonUsed";
var htmlString = $(this).attr('value');
$('#sel' + buttonCount).html(htmlString);
buttonCount++;
}
}
});
});
... The rest of your script
I notice that you have been using IDs like one might use classes. I would advise you to consider using the class attribute for things like "button" and make IDs more unique. It will make it easier to code with Javascript, as JS usually follows IDs and works best if it targets only one element per ID. In any case I did rename your IDs. If you have CSS you can rename your CSS classes. Just note that in my code I renamed a class so that you can't choose more than one. That might work for you anyway, because then your button that has been used can look different from the unused buttons.
Anyway, here is the HTML, adapted:
<table class="status" id="buttonStatus" height="50" width="800">
<tr>
<td width="200" align="center">Step 1 Selection</td>
<td width="200" align="center">Step 2 Selection</td>
<td width="200" align="center">Step 3 Selection</td>
</tr><tr>
<td width="200" align="center" id="sel1"> </td>
<td width="200" align="center" id="sel2"> </td>
<td width="200" align="center" id="sel3"> </td>
</tr>
</table>
</body>
Let me know if this works.
Update
To edit as you desire, use this:
$(document).ready(function() {
$("input[type='button']").click(function() {
//make sure that there are no duplicates
var buttonClassName = $(this).get(0).className;
if(buttonClassName != "buttonUsed")
{
var buttonID = $(this).attr('id');
var firstPart = buttonID.substring(0,6);
var secondPart = buttonID.substring(6,7);
var thirdPart = buttonID.substring(7);
var newThirdPart;
switch(thirdPart)
{
case "a" : newThirdPart = "b"; break;
case "b" : newThirdPart = "a"; break;
}
$(this).get(0).className = "buttonUsed";
$("#" + firstPart + secondPart + newThirdPart).get(0).className = "button";
var htmlString = $(this).attr('value');
$('#sel' + secondPart).html(htmlString);
}
});
});
And the HTML
<body>
<input type ="button" class="button" id="button1a" value="Apply Mask" onclick="setClip(true)">
<input type ="button" class="button" id="button1b" value="No Mask" onclick="setClip(false)">
<input type="button" class="button" id="button2a" value="Maintain Zoom In" onClick="setZoom(true)">
<input type="button" class="button" id="button2b"value="Maintain Full View" onClick="setZoom(false)">
<input type="button" class="button" id="button3a" value="GeoMap On" onClick="geoMap(true)">
<input type="button" class="button" id="button3b" value="GeoMap Off" onClick="geoMap(false)"><BR><BR><BR>
<table class="status" id="buttonStatus" height="50" width="800">
<tr>
<td width="200" align="center">Step 1 Selection</td>
<td width="200" align="center">Step 2 Selection</td>
<td width="200" align="center">Step 3 Selection</td>
</tr><tr>
<td width="200" align="center" id="sel1"> </td>
<td width="200" align="center" id="sel2"> </td>
<td width="200" align="center" id="sel3"> </td>
</tr>
</table>
</body>
Note on CSS
This JQuery changes the classname of the active button to buttonUsed, which means you can create a CSS to make the button look highlighted. If you'd rather not do that, and would rather have everything stay as button, you don't actually need it in the new example (whereas in my initial stab at it, it was very necessary).
$(document).ready(function() {
$("input[type='button']").click(function() {
//make sure that there are no duplicates
var buttonID = $(this).attr('id');
var secondPart = buttonID.substring(6,7);
var htmlString = $(this).attr('value');
$('#sel' + secondPart).html(htmlString);
});
});
Much simpler, in fact. At least I showed you the sort of things jQuery is capable of. Whether you choose to use it or not is up to you. Happy coding!
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);
});
});
});
I have a table in a cell that displays the numbers a user enters with buttons (using onclick and a showthis function. I need to be able to store the value as a variable in order to perform operations on it. How can I do this?
PS: I am using JavaScript and HTML
<script language="JavaScript" type="text/javascript">
function showthis(first){
document.getElementById("displaycell").innerHTML+=first;
}
</script>
<body>
<h1 align="center"> RPN Calculator </h1>
<table summary align="center" border="1" cellpadding="1" cellspacing="3">
<tr>
<th id="displaycell" colspan="5" type="text"> </td>
</tr>
<tr>
<td>
<button type="button" onclick="showthis('1')">1</button>
</td>
<td>
<button type="button" onclick="showthis('2')">2</button>
</td>
<td>
<button type="button" onclick="showthis('3')">3</button>
</td>
<!-- ... -->
Firstly you should not be using += with innerHTML. It means that you will end up with the numbers appending to the cell's internal value rather than overwriting it.
function showthis ( number ) {
var cell = document.getElementById('displaycell');
cell.innerHTML = "";
cell.appendChild( document.createTextNode( number ));
}
Would be a much better way to handle that.
Next, within showthis you are best off storing the value in a variable so that you can access it directly from javascript in the future.
var displayStore = 0;
function showthis ( number ) {
var cell = document.getElementById('displaycell');
cell.innerHTML = "";
cell.appendChild( document.createTextNode( number ));
// you can either do this in a variable local to the <td> DOM Object like so
cell.currentDisplayNumber = number;
//or in a global variable like so
displayStore = number;
}
Finally, to access that variable again you can either read it out of the displaystore <td> or read it from your variable.
function DoStuff0 () {
var number = Number( document.getElementById( 'displaycell' )).innerHTML;
// rest
}
function DoStuff1 () {
var number = document.getElementById('displaycell').currentDisplayNumber;
// rest
}
function DoStuff2 () {
var number = displayStore;
// rest
}
Is this what you wanted? http://jsfiddle.net/CWQY2/
HTML:
<h1 align="center"> RPN Calculator </h1>
<table summary align="center" border="1" cellpadding="1" cellspacing="3">
<tr>
<th id="displaycell" colspan="5"> </th>
</tr>
<tr>
<td> <button type="button" onClick="showthis('1')">1</button> </td>
<td> <button type="button" onClick="showthis('2')">2</button> </td>
<td> <button type="button" onClick="showthis('3')">3</button> </td>
</tr>
</table>
JS:
function showthis(first){
document.getElementById("displaycell").innerHTML += first;
}