Positioning tables on a webpage - javascript

I would like to create a webpage with several tables of buttons. I need to be able to control the location of each table so that one could be above another, to the side, or above and to the side. I know how to create a table of buttons:
<form name="table_buttons">
<table>
<tr>
<td><input type="button" name="1-1">
</td>
<td><input type="button" name="1-2">
</td>
<tr>
<td><input type="button" name="1-1">
</td>
<td><input type="button" name="2-2">
</td>
</td>
</table>
</form>
however I don't know how to arrange multiple of these tables in the way I want. I have attached a picture showing three examples of arrangements I would like to achieve (you can ignore the highlighted squares).

How about to wrap each row with
.row {
display: flex;
align-items: center;
justify-content: center;
}
<div class="row"> element takes several <form> element and align them center.
<style>
.row {
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div class="row">
<form name="table_buttons">
<table>
<tr>
<td><input type="button" name="1-1"></td>
<td><input type="button" name="1-2"></td>
</tr>
<tr>
<td><input type="button" name="1-1"></td>
<td><input type="button" name="2-2"></td>
</tr>
</table>
</form>
<form name="table_buttons">
<table>
<tr>
<td><input type="button" name="1-1"></td>
<td><input type="button" name="1-2"></td>
</tr>
<tr>
<td><input type="button" name="1-1"></td>
<td><input type="button" name="2-2"></td>
</tr>
</table>
</form>
<form name="table_buttons">
<table>
<tr>
<td><input type="button" name="1-1"></td>
<td><input type="button" name="1-2"></td>
</tr>
<tr>
<td><input type="button" name="1-1"></td>
<td><input type="button" name="2-2"></td>
</tr>
</table>
</form>
</div>
<br/>
<div class="row">
<form name="table_buttons">
<table>
<tr>
<td><input type="button" name="1-1"></td>
<td><input type="button" name="1-2"></td>
<td><input type="button" name="1-3"></td>
<td><input type="button" name="1-4"></td>
</tr>
<tr>
<td><input type="button" name="2-1"></td>
<td><input type="button" name="2-2"></td>
<td><input type="button" name="2-3"></td>
<td><input type="button" name="2-4"></td>
</tr>
<tr>
<td><input type="button" name="3-1"></td>
<td><input type="button" name="3-2"></td>
<td><input type="button" name="3-3"></td>
<td><input type="button" name="3-4"></td>
</tr>
<tr>
<td><input type="button" name="4-1"></td>
<td><input type="button" name="4-2"></td>
<td><input type="button" name="4-3"></td>
<td><input type="button" name="4-4"></td>
</tr>
</table>
</form>
<form name="table_buttons">
<table>
<tr>
<td><input type="button" name="1-1"></td>
<td><input type="button" name="1-2"></td>
<td><input type="button" name="1-3"></td>
</tr>
<tr>
<td><input type="button" name="2-1"></td>
<td><input type="button" name="2-2"></td>
<td><input type="button" name="2-3"></td>
</tr>
<tr>
<td><input type="button" name="3-1"></td>
<td><input type="button" name="3-2"></td>
<td><input type="button" name="3-3"></td>
</tr>
</table>
</form>
</div>
<br/>
<div class="row">
<form name="table_buttons">
<table>
<tr>
<td><input type="button" name="1-1"></td>
</tr>
<tr>
<td><input type="button" name="2-1"></td>
</tr>
<tr>
<td><input type="button" name="3-1"></td>
</tr>
</table>
</form>
</div>

Related

The buttons for my HTML, CSS, JS calculator is coming out in various sizes

Intro
Hello! I'm still very new to coding in general and using platforms like Stackoverflow, GitHub, etc so I apologize in advance if I have done something incorrectly within this post as well.
It is also my first post so please let me know of any corrections to make so I know how to make a more coherent posts in the future.
Problem
I have followed a HTML, CSS, & JS calculator tutorial online and have done the same exact step, however, when I ran the code my buttons have came out in different sizes as shown in the image below:
image of the buttons in different sizes
This is a screenshot of the video's code:
Calculator tutorial code
I'm unsure of how to pinpoint my errors.
This is the code that I have up till the point where I encountered this error:
function insert(num) {
document.form.textview.value = document.form.textview.value + num
}
* {
margin: 0;
padding: 0;
}
.button {
width: 50;
height: 50;
font-size: 25;
margin: 2;
cursor: pointer;
}
.textview {
width: 217;
margin: 5;
font-size: 25;
padding: 5;
}
<html>
<head>
</head>
<body>
<div class="main">
<form name="form">
<input class="textview" name="textview">
<table>
<tr>
<td><input type="button" value="C"></td>
<td><input type="button" value="<"></td>
<td><input type="button" value="/"></td>
<td><input type="button" value="x"></td>
</tr>
<tr>
<td><input class="button" type="button" value="7"></td>
<td><input class="button" type="button" value="8"></td>
<td><input class="button" type="button" value="9"></td>
<td><input class="button" type="button" value="-"></td>
</tr>
<tr>
<td><input class="button" type="button" value="4"></td>
<td><input type="button" value="5"></td>
<td><input type="button" value="6"></td>
<td><input type="button" value="+"></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="insert(1)"></td>
<td><input type="button" value="2"></td>
<td><input type="button" value="3"></td>
<td><input type="button" value="+"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Is the issue possibly within the style element?
Thank you!
I found typo error in you input tag, just you have to write "class" where you have written "type", see below for better understanding.
<td><input type="button" value="5"></td>
<td><input type="button" value="6"></td>
<td><input type="button" value="+"></td>
Change to :
<td><input class="button" value="5"></td>
<td><input class="button" value="6"></td>
<td><input class="button" value="+"></td>
function insert(num){
document.form.textview.value=document.form.textview.value+num
}
<style>
*{
margin:0px;
padding: 0px;
}
.button{
width:50px;
height: 50px;
font-size: 25px;
margin: 2px;
cursor: pointer;
}
.textview{
width: 217px;
margin: 5px;
font-size: 25px;
padding: 5px;
}
</style>
<body>
<div class="main">
<form name="form">
<input class="textview" name="textview">
<table>
<tr>
<td><input class="button" type="button" value="C"></td>
<td><input class="button" type="button" value="<"></td>
<td><input class="button" type="button" value="/"></td>
<td><input class="button" type="button" value="x"></td>
</tr>
<tr>
<td><input class="button" type="button" value="7"></td>
<td><input class="button" type="button" value="8"></td>
<td><input class="button" type="button" value="9"></td>
<td><input class="button" type="button" value="-"></td>
</tr>
<tr>
<td><input class="button" type="button" value="4"></td>
<td><input class="button" type="button" value="5"></td>
<td><input class="button" type="button" value="6"></td>
<td><input class="button" type="button" value="+"></td>
</tr>
<tr>
<td><input class="button" type="button" value="1" onclick="insert(1)"></td>
<td><input class="button" type="button" value="2"></td>
<td><input class="button" type="button" value="3"></td>
<td><input class="button" type="button" value="+"></td>
</tr>
</table>
</form>
</div>
</body>
Some of your <input> elements do not have a class="button" as well as a type="button".
You need both - the type attribute to set the input type to button (or it will be a text box), and the class attribute for the appropriate CSS styles.
The body should look like this:
<body>
<div class="main">
<form name="form">
<input class="textview" name="textview">
<table>
<tr>
<td><input type="button" class="button" value="C"></td>
<td><input type="button" class="button" value="<"></td>
<td><input type="button" class="button" value="/"></td>
<td><input type="button" class="button" value="x"></td>
</tr>
<tr>
<td><input class="button" type="button" value="7"></td>
<td><input class="button" type="button" value="8"></td>
<td><input class="button" type="button" value="9"></td>
<td><input class="button" type="button" value="-"></td>
</tr>
<tr>
<td><input class="button" type="button" value="4"></td>
<td><input class="button" type="button" value="5"></td>
<td><input class="button" type="button" value="6"></td>
<td><input class="button" type="button" value="+"></td>
</tr>
<tr>
<td><input class="button" type="button" value="1" onclick="insert(1)"></td>
<td><input class="button" type="button" value="2"></td>
<td><input class="button" type="button" value="3"></td>
<td><input class="button" type="button" value="+"></td>
</tr>
</table>
</form>
</div>
</body>

Problems with visibility of edit/save buttons for table rows (JS)

Hi I'm trying to build a table with inputs for a budget tracking app. I'm having some trouble with the JS. Essentially I want the user to be able to add, edit and save rows.
I want only the save or edit button to be visible at one time. This works after editing and saving a row, but by default it shows all buttons. Also after editing a row the buttons are no longer in line but rather stacked on top of each other.
Any help would be really appreciated. This is my first time using JS.
My Code
<div>
<!-- ... -->
<div class="five">
<h1>Transactions</h1>
<div class="txlist">
<table cellspacing="0" cellpadding="0" border="0" width="1500">
<thead>
<th>Date</th>
<th>Account</th>
<th>Category</th>
<th>Amount</th>
<th></th>
</thead>
<tbody class="txlist" id="data_table">
<tr id="addtx">
<td><input type="date" id="new_date" placeholder="Date"></td>
<td><input type="text" id="new_account" placeholder="Account"></td>
<td><input type="text" id="new_category" placeholder="Category"></td>
<td><input type="text" id="new_amount" placeholder="Amount"></td>
<td>
<input type="button" id="save_button3" value="Save" class="save" onclick="add_row();">
<input type="button" value="🗙" class="delete" onclick="nonew()">
</td>
</tr>
<tr id="row1">
<td id="date_row1">24.08.2020</td>
<td id="account_row1">Credit Card</td>
<td id="category_row1">Expense: Restaurants</td>
<td id="amount_row1">- $32.45</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edt" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="🗙" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row2">
<td id="date_row2">24.08.2020</td>
<td id="account_row2">Cash</td>
<td id="category_row2">Transfer: Credit Card</td>
<td id="amount_row2">+ $250.00</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edt" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="🗙" class="delete" onclick="delete_row('2')">
</td>
</tr>
<tr id="row3">
<td id="date_row3">24.08.2020</td>
<td id="account_row3">Credit Card</td>
<td id="category_row3">Transfer: Cash</td>
<td id="amount_row3">- $250.00</td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edt" onclick="edit_row('3')">
<input type="button" id="save_button3" value="Save" class="save" onclick="save_row('3')">
<input type="button" value="🗙" class="delete" onclick="delete_row('3')">
</td>
</tr>
<tr id="row4">
<td id="date_row4">24.08.2020</td>
<td id="account_row4">Credit Card</td>
<td id="category_row4">Expense: Clothing</td>
<td id="amount_row4">- $84.95</td>
<td>
<input type="button" id="edit_button4" value="Edit" class="edt" onclick="edit_row('4')">
<input type="button" id="save_button4" value="Save" class="save" onclick="save_row('4')">
<input type="button" value="🗙" class="delete" onclick="delete_row('4')">
</td>
</tr>
<tr id="row5">
<td id="date_row5">23.08.2020</td>
<td id="account_row5">Cash</td>
<td id="category_row5">Expense: Groceries</td>
<td id="amount_row5">- $25.23</td>
<td>
<input type="button" id="edit_button5" value="Edit" class="edt" onclick="edit_row('5')">
<input type="button" id="save_button5" value="Save" class="save" onclick="save_row('5')">
<input type="button" value="🗙" class="delete" onclick="delete_row('5')">
</td>
</tr>
<tr id="row6">
<td id="date_row6">23.08.2020</td>
<td id="account_row6">Credit Card</td>
<td id="category_row6">Income: Salary</td>
<td id="amount_row6">+ $2500.00</td>
<td>
<input type="button" id="edit_button6" value="Edit" class="edt" onclick="edit_row('6')">
<input type="button" id="save_button6" value="Save" class="save" onclick="save_row('6')">
<input type="button" value="🗙" class="delete" onclick="delete_row('6')">
</td>
</tr>
<tr id="row7">
<td id="date_row7">23.08.2020</td>
<td id="account_row7">Checking Account</td>
<td id="category_row7">Transfer: Savings Account</td>
<td id="amount_row7">- $500.00</td>
<td>
<input type="button" id="edit_button7" value="Edit" class="edt" onclick="edit_row('7')">
<input type="button" id="save_button7" value="Save" class="save" onclick="save_row('7')">
<input type="button" value="🗙" class="delete" onclick="delete_row('7')">
</td>
</tr>
<tr id="row8">
<td id="date_row8">22.08.2020</td>
<td id="account_row8">Savings Account</td>
<td id="category_row8">Transfer: Checking Account</td>
<td id="amount_row8">+ $500.00</td>
<td>
<input type="button" id="edit_button8" value="Edit" class="edt" onclick="edit_row('8')">
<input type="button" id="save_button8" value="Save" class="save" onclick="save_row('8')">
<input type="button" value="🗙" class="delete" onclick="delete_row('8')">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
function edit_row(no)
{
document.getElementById("edit_button"+no).style.display="none";
document.getElementById("save_button"+no).style.display="block";
var date=document.getElementById("date_row"+no);
var account=document.getElementById("account_row"+no);
var category=document.getElementById("category_row"+no);
var amount=document.getElementById("amount_row"+no);
var date_data=date.innerHTML;
var account_data=account.innerHTML;
var category_data=category.innerHTML;
var amount_data=amount.innerHTML;
date.innerHTML="<input type='date' id='date_date"+no+"' value='"+date_data+"'>"; //Should input type here be date?
account.innerHTML="<input type='text' id='account_text"+no+"' value='"+account_data+"'>";
category.innerHTML="<input type='text' id='category_text"+no+"' value='"+category_data+"'>";
amount.innerHTML="<input type='text' id='amount_text"+no+"' value='"+amount_data+"'>";
}
function save_row(no)
{
var date_val=document.getElementById("date_date"+no).value;
var account_val=document.getElementById("account_text"+no).value;
var category_val=document.getElementById("category_text"+no).value;
var amount_val=document.getElementById("amount_text"+no).value;
document.getElementById("date_row"+no).innerHTML=date_val;
document.getElementById("account_row"+no).innerHTML=account_val;
document.getElementById("category_row"+no).innerHTML=category_val;
document.getElementById("amount_row"+no).innerHTML=amount_val;
document.getElementById("edit_button"+no).style.display="block";
document.getElementById("save_button"+no).style.display="none";
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row()
{
var new_date=document.getElementById("new_date").value;
var new_account=document.getElementById("new_account").value;
var new_category=document.getElementById("new_category").value;
var new_amount=document.getElementById("new_amount").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='date_row"+table_len+"'>"+new_date+"</td><td id='account_row"+table_len+"'>"+new_account+"</td><td id='category_row"+table_len+"'>"+new_category+"</td><td id='amount_row"+table_len+"'>"+new_amount+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='🗙' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_date").value="";
document.getElementById("new_account").value="";
document.getElementById("new_category").value="";
document.getElementById("new_amount").value="";
}
I think there are better ways to achieve this, but all the same, your issue is that when saving and editing you are changing the button's style.display attribute to
document.getElementById("edit_button"+no).style.display="block";
you need to retain
document.getElementById("edit_button"+no).style.display="inline-block";
The markup you shared is broken. I see 2 opening <table> tags and 3 closing </table> tags.
Can you share a correct markup or minimal working code?

Why isn't my function being called in this example for my calculator html code?

Memory = "0";
Current = "0";
Operation = 0;
MAXLENGTH = 30;
alert("yea");
function AddDigit(digit) {
alert("yea");
if (Current.length > MAXLENGTH) {
Current = "Aargh! Too long";
} else {
if (eval(Current) == 0) {
Current = dig;
} else {
Current = Current + dig;
}
}
}
document.Calculator.Display.value = Current;
}
<FORM name="Calculator">
<table border="3">
<tr>
<td colspan="2">
<input type="text" maxlength="40" size="30" name="Display">
</td>
</tr>
<table>
<tr>
<td><input type="button" value="7"></td>
<td><input type="button" value="8"></td>
<td><input type="button" value="9"></td>
<td><input type="button" value="+"></td>
</tr>
<tr>
<td><button onclick="AddDigit(4)">4</button></td>
<td><input type="button" value="5"></td>
<td><input type="button" value="6"></td>
<td><input type="button" value="-"></td>
</tr>
<tr>
<td><input type="button" value="1"></td>
<td><input type="button" value="2"></td>
<td><input type="button" value="3"></td>
<td><input type="button" value="*"></td>
</tr>
<tr>
<td><input type="button" value="0"></td>
<td><input type="button" value="."></td>
<td><input type="button" value="="></td>
<td><input type="button" value="/"></td>
</tr>
<tr>
<td><input type="button" value="C"></td>
<td><input type="button" value="MR"></td>
<td><input type="button" value="M-"></td>
<td><input type="button" value="M+"></td>
</tr>
<tr>
<td><input type="button" value="MC"></td>
</tr>
</table>
</td>
</FORM>
I was wondering why nothing was showing in my display when I press the 4 button in my calculator.
In the web browser bar I just see display= and then nothing shows in the actual display. I added the alert("yea") to check if the function was even running and it didn't even run on click.
So I have no clue what is happening here.
you need to remove } before display.value in javascript code
you change<input type="button" onclick="AddDigit(4)" value="4"> insted of <button onclick="AddDigit(4)">4</button>
and also change dig variable in javascript to digit
Memory = "0";
Current = "0";
Operation = 0;
MAXLENGTH = 30;
alert("yea");
function AddDigit(digit) {
alert("yea");
if (Current.length > MAXLENGTH) {
Current = "Aargh! Too long";
} else {
if (eval(Current) == 0) {
Current = digit;
} else {
Current = Current + digit;
}
}
document.Calculator.Display.value = Current;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<script src="./calculator.js"></script>
<FORM name="Calculator">
<table border="3">
<tr>
<td colspan="2">
<input type="text" maxlength="40" size="30" name="Display">
</td>
</tr>
<table>
<tr>
<td><input type="button" value="7"></td>
<td><input type="button" value="8"></td>
<td><input type="button" value="9"></td>
<td><input type="button" value="+"></td>
</tr>
<tr>
<td><input type="button" onclick="AddDigit(4)" value="4"></td>
<td><input type="button" value="5"></td>
<td><input type="button" value="6"></td>
<td><input type="button" value="-"></td>
</tr>
<tr>
<td><input type="button" value="1"></td>
<td><input type="button" value="2"></td>
<td><input type="button" value="3"></td>
<td><input type="button" value="*"></td>
</tr>
<tr>
<td><input type="button" value="0"></td>
<td><input type="button" value="."></td>
<td><input type="button" value="="></td>
<td><input type="button" value="/"></td>
</tr>
<tr>
<td><input type="button" value="C"></td>
<td><input type="button" value="MR"></td>
<td><input type="button" value="M-"></td>
<td><input type="button" value="M+"></td>
</tr>
<tr>
<td><input type="button" value="MC"></td>
</tr>
</table>
</td>
</FORM>
</html>

Disabling certain inputs in table on button press

I currently have a table that contains a few values, 2 input fields and a button for each row in that table. What I want to happen is that when I press the button in the third row, the input fields in the third row become disabled. The other rows should remain unaffected. Unfortunately, due to the nature of the program, adding ID's to the inputs and buttons is not possible.
Does anyone know of a good way to go about this?
<tr>
<td>Text A</td>
<td>Text B</td>
<td><input class="editable"></td>
<td>Text C</td>
<td><input class="editable></td>
<td>Text D</td>
<td><button class="disableInput">OK</button></td>
<tr>
I have ~40 rows like this
Also, due to the table constantly autosaving to a database (for the input) the table gets refreshed every ~0.5 seconds
$(tableId).on("click", "button", function(){
$(this).closest("tr").find("input").attr("disabled", true);
})
Since you are using jQuery, you can do something like this:
$(document).ready(function() {
$("table td .btn").click(function() {
if ($(this).closest("tr").find("input").attr("disabled") === "disabled"){
$(this).closest("tr").find("input").removeAttr("disabled", "disabled");
$(this).closest("tr").find("button").text("Disbale");
}
else{
$(this).closest("tr").find("input").attr("disabled", "disabled");
$(this).closest("tr").find("button").text("Enable");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
</tbody>
</table>
You can do this via traversing the DOM.
$('.disableInput').on('click',function(){
var input = $(this).closest('tr').find('input');
var currstatus = input.prop('disabled');
input.prop('disabled',!currstatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
</table>

Click on HTML table and get row number (with Javascript, not jQuery)

I would like to know how to click on a button in an HTML table and get the row and column number returned to me: For example, with the following table:
<table>
<tr>
<td><input type="button" value="button"></td>
<td><input type="button" value="button"></td>
<td><input type="button" value="button"></td>
</tr>
<tr>
<td><input type="button" value="button"></td>
<td><input type="button" value="button"></td>
<td><input type="button" value="button"></td>
</tr>
<tr>
<td><input type="button" value="button"></td>
<td><input type="button" value="button"></td>
<td><input type="button" value="button"></td>
</tr>
</table>
How would I use JavaScript to click on the first button in the second row and have it tell me that I clicked on the first cell in the second row? Does each button need to have a unique id, or not?
Try this:
function getId(element) {
alert("row" + element.parentNode.parentNode.rowIndex +
" - column" + element.parentNode.cellIndex);
}
<table>
<tr>
<td><input type="button" value="button" onclick="getId(this)"></td>
<td><input type="button" value="button" onclick="getId(this)"></td>
<td><input type="button" value="button" onclick="getId(this)"></td>
</tr>
<tr>
<td><input type="button" value="button" onclick="getId(this)"></td>
<td><input type="button" value="button" onclick="getId(this)"></td>
<td><input type="button" value="button" onclick="getId(this)"></td>
</tr>
<tr>
<td><input type="button" value="button" onclick="getId(this)"></td>
<td><input type="button" value="button" onclick="getId(this)"></td>
<td><input type="button" value="button" onclick="getId(this)"></td>
</tr>
</table>
Most generic version of #Gremash js function
function getId(element) {
alert("row" + element.closest('tr').rowIndex +
" -column" + element.closest('td').cellIndex);
}
Try this code:
alert(document.getElementById("yourTableId").childNodes[1].childElementCount);

Categories