We Keep Coding

Positioning tables on a webpage

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>

How to edit or delete table data of database from webpage

Hi i have an ajax jquery function which displays table data as shown in the picture, i want to add a field which says edit and delete which gives the user the permission to edit or delete table data and it will get reflected in the database. Please note i have not given any index value to the response data nor an id
is there any way to achieve this! if so could you please explain or show me references! thanx!
$("#table").append("<tr class='tr'> <td> <input type='checkbox', value='" + response.data[i].electrician_email + "'>"+response.data[i].electrician_name+" </td> <td> "+response.data[i].electrician_contact+" </td> <td> "+response.data[i].electrician_license+" </td> <td> "+response.data[i].electrician_email+" </td> <td> "+response.data[i].state+" </td> <td> "+response.data[i].city);

You can do it in a simple manner, like add a number to the row and edit the row using the rownumber. Here is the code what I have tried and hope it helps you.
like see the code snippet here
<tr id="row1">
<td id="name_row1">XXX</td>
<td id="country_row1">India</td>
<td id="age_row1">20</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
There in the tr id is row1, when you add a new row a new tr is created with id rowX X is a number. If you want to edit the row, select the row using rowX and edit or delete whatever you want.
function edit_row(no)
{
document.getElementById("edit_button"+no).style.display="none";
document.getElementById("save_button"+no).style.display="block";
var name=document.getElementById("name_row"+no);
var country=document.getElementById("country_row"+no);
var age=document.getElementById("age_row"+no);
var name_data=name.innerHTML;
var country_data=country.innerHTML;
var age_data=age.innerHTML;
name.innerHTML="<input type='text' id='name_text"+no+"' value='"+name_data+"'>";
country.innerHTML="<input type='text' id='country_text"+no+"' value='"+country_data+"'>";
age.innerHTML="<input type='text' id='age_text"+no+"' value='"+age_data+"'>";
}
function save_row(no)
{
var name_val=document.getElementById("name_text"+no).value;
var country_val=document.getElementById("country_text"+no).value;
var age_val=document.getElementById("age_text"+no).value;
document.getElementById("name_row"+no).innerHTML=name_val;
document.getElementById("country_row"+no).innerHTML=country_val;
document.getElementById("age_row"+no).innerHTML=age_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_name=document.getElementById("new_name").value;
var new_country=document.getElementById("new_country").value;
var new_age=document.getElementById("new_age").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='name_row"+table_len+"'>"+new_name+"</td><td id='country_row"+table_len+"'>"+new_country+"</td><td id='age_row"+table_len+"'>"+new_age+"</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='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_name").value="";
document.getElementById("new_country").value="";
document.getElementById("new_age").value="";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Name</th>
<th>Country</th>
<th>Age</th>
</tr>
<tr id="row1">
<td id="name_row1">XXX</td>
<td id="country_row1">India</td>
<td id="age_row1">20</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row2">
<td id="name_row2">YYY</td>
<td id="country_row2">Australia</td>
<td id="age_row2">78</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
</td>
</tr>
<tr>
<td><input type="text" id="new_name"></td>
<td><input type="text" id="new_country"></td>
<td><input type="text" id="new_age"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>

It is complicated and that can't be answered in a few lines of code.
You may restart from scratch by looking at this old CRUD: http://jtable.org/
Or angular x-editable (using bootstrap):
https://vitalets.github.io/angular-xeditable/#editable-row

When I try to submit a form, Not the values changed by me but the initial values are transferred to action page

<script>
function mySubmit(index) {
if(index==3){
document.myForm.action='update.jsp';
}
if(index==4){
document.myForm.action='';
}
document.myForm.submit();
}</script>
This is my javascript function. And I use this from the code below.
<form name="myForm" method="post">
<table class="table">
<tbody>
<tr>
<input type="hidden" name=num id=num value=<%=article.getNum() %>>
...
<td class="col-md-2">작성자</td>
<td class="col-md-8"><input disabled="disabled" type=text name="writer" id="writer" value="<%=article.getWriter()%> "></td>
</tr>
...
<tr>
<td>비밀번호</td>
<td><input type=password name="passwd" id="passwd"></td>
</tr>
<tr>
<td id="buttons" colspan="2">
<input class="btn btn-xs btn-default" type="button" value="글수정" onclick="mySubmit(3)">
<input class="btn btn-xs btn-default" type="button" value="글삭제" onclick="mySubmit(4)">
<input class="btn btn-xs btn-default" type="button" value="목록보기" onclick="location.href='list.jsp'">
</td>
</tr>
</tbody>
</table>
</form>
This is a revising article page. I want to transfer values changed from original values, but it didn't work. It only transfer original values which are initialized in my code.
HELP!!

How can I swap the form values of table row1 by the form values of table row2 without changing the table rows using javascript?

I am trying to swap the form values in row1 with the form values of row2 without swapping the rows. Can someone show me away to achieve this in pure Javascript, vanilla JS, or jQuery. I made the table rows shorter with just two rows, but the actual table consists of 17 rows. Please look very closely at the ids and form values in the third example.
When the UP or DOWN button is not click, the table looks like this in simple form:
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row1">
<td><button class="up_arrow">UP</button></td>
<td><input value="1></td>
<td><select><option="1" selected></option></select></td>
<td><select><option="1a" selected></option></select></td>
<td><img id="img1"></td>
</tr>
<tr id="row2">
<td><button class="down_arrow">DOWN</button></td>
<td><input value="2"></td>
<td><select><option="2" selected></option></select></td>
<td><select><option="2a" selected></option></select></td>
<td><img id="img2"></td>
</tr>
<tr><td><input type="submit" value="SAVE"></td></tr>
</tbody>
</table>
</form>
This the code currently - When the UP or DOWN buttons are clicked the table looks like this:
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row2">
<td><button class="up_arrow">UP</button></td>
<td><input value="2"></td>
<td><select><option="2" selected></option></select></td>
<td><select><option="2a" selected></option></select></td>
<td><img id="img2"></td>
</tr>
<tr id="row1">
<td><button class="down_arrow">DOWN</button></td>
<td><input value="1"></td>
<td><select><option="1" selected></option></select></td>
<td><select><option="1a" selected></option></select></td>
<td><img id="img1"></td>
</tr>
<tr><td><input type="submit" value="SAVE"></td></tr>
</tbody>
</table>
</form>
This is what I am trying to accomplish - The values of the inputs should swap except for the tr. Notices the tr ids remain the same but form values are swapped:
Is there a way to achieve this in pure javascript, vanilla JS, or jquery. It will even be even better if this can be done with .html() instead of .val()
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row1">
<td><button class="down_arrow">DOWN</button></td>
<td><input value="2"></td>
<td><select><option="2" selected></option></select></td>
<td><select><option="2a" selected></option></select></td>
<td><img id="img2"></td>
</tr>
<tr id="row2">
<td><button class="up_arrow">UP</button></td>
<td><input value="1"></td>
<td><select><option="1" selected></option></select></td>
<td><select><option="1a" selected></option></select></td>
<td><img id="img1"></td>
</tr>
<tr><td><input type="submit" value="SAVE"></td></tr>
</tbody>
</table>
</form>

Sorry it took awhile to get back to this. I am submitting this as another answer so that you can compare the two solutions. They are quite similar, and you may find it useful to compare the changes.
jsFiddle Solution
var tbl = $('table'),new_ndx,topRow,trStuff,botRow,brStuff;
$(document).on('click','button',function() {
var dir = $(this).attr('class');
var row = $(this).closest("tr");
var ndx = row.index();
//row.remove();
if (dir=='up_arrow'){
new_ndx = ndx-1;
topRow = tbl.find('tr').eq(new_ndx);
trStuff = topRow.html();
botRow = tbl.find('tr').eq(ndx);
brStuff = botRow.html();
topRow.html(brStuff);
botRow.html(trStuff);
} else {
new_ndx = ndx++;
topRow = tbl.find('tr').eq(new_ndx);
trStuff = topRow.html();
botRow = tbl.find('tr').eq(ndx);
brStuff = botRow.html();
topRow.html(brStuff);
botRow.html(trStuff);
}
});

$(document).ready(function() {
$(".up_arrow,.down_arrow").click(function() {
var row = $(this).parents("tr");
if ($(this).is(".up_arrow")) {
alert("Inner Html Of Previous Row : " + row.prev().html());
} else {
alert("Inner Html Of Next Row : " + row.next().html());
}
});
});
table tr:first-child .up_arrow,
table tr:last-child .down_arrow {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="1">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="2">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="3">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="4">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="5">
</td>
</tr>
</table>

$(document).ready(function() {
$(".up_arrow,.down_arrow").click(function() {
var objRow = $(this).parents("tr");
var intCurrentInputValue = objRow.find("input").val();
if ($(this).is(".up_arrow")) {
var intPreviousInputValue = objRow.prev("tr").find("input").val();
objRow.find("input").val(intPreviousInputValue);
objRow.prev("tr").find("input").val(intCurrentInputValue);
} else {
var intNextInputValue = objRow.next("tr").find("input").val();
objRow.find("input").val(intNextInputValue);
objRow.next("tr").find("input").val(intCurrentInputValue);
}
});
});
table tr:first-child .up_arrow ,
table tr:last-child .down_arrow
{
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="1">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="2">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="3">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="4">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="5">
</td>
</tr>
</table>

I'm not entirely sure what you're trying to achieve, but your code is a bit all over the place.
Here's a sample of a pretty basic 'up/down' table row thingy.
Try not to mix using jQuery and vanilla JS. If you're using jQuery, you shouldn't need to use document.getElementsByClassName (or anything similar) at all. Use the $('.class') selector.
$('table').on('click', '.up', function(){
var $row = $(this).parents('tr');
var $prevRow = $(this).parents('tr').prev('tr');
$row.insertBefore($prevRow);
});
$('table').on('click', '.down', function(){
var $row = $(this).parents('tr');
var $prevRow = $(this).parents('tr').next('tr');
$row.insertAfter($prevRow);
});

$(document).ready(function() {
$(".up_arrow,.down_arrow").click(function(e) {
var objCurrentRow = $(this).parents("tr");
var objAnotherRow = objCurrentRow.next("tr");
if ($(this).is(".up_arrow")) {
var objAnotherRow = objCurrentRow.prev("tr");
}
var arrAllInputOfCurrentRow = objCurrentRow.find("input,select");
var arrAllInputOfAnotherRow = objAnotherRow.find("input,select");
$.each(arrAllInputOfCurrentRow, function(intIndex, objInput) {
var mixTempValue = $(objInput).val();
var $objAnotherInput = $(arrAllInputOfAnotherRow[intIndex]);
$(objInput).val($objAnotherInput.val());
if ($objAnotherInput.is('select')) {
var objTempDropDown = $(objInput).html();
$(objInput).html($objAnotherInput.html());
$objAnotherInput.html(objTempDropDown);
}
$objAnotherInput.val(mixTempValue);
});
});
});
table tr:first-child .up_arrow,
table tr:last-child .down_arrow {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row1">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="1" />
</td>
<td>
<select>
<option value="1" selected>1</option>
</select>
</td>
<td>
<select>
<option value="1a" selected>1a</option>
</select>
</td>
</tr>
<tr id="row2">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="2" />
</td>
<td>
<select>
<option value="2" selected>2</option>
</select>
</td>
<td>
<select>
<option value="2a" selected>2a</option>
</select>
</td>
</tr>
<tr id="row3">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="3" />
</td>
<td>
<select>
<option value="3" selected>3</option>
</select>
</td>
<td>
<select>
<option value="3a" selected>3a</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>

$(document).on("click", ".up_arrow,.down_arrow", function(e) {
var $objCurrentRow = $(this).parents("tr");
var strTempHtml = $objCurrentRow.html();
var $objAnotherRow = $objCurrentRow.next("tr");
if ($(this).is(".up_arrow")) {
var $objAnotherRow = $objCurrentRow.prev("tr");
}
$objCurrentRow.html($objAnotherRow.html());
$objAnotherRow.html(strTempHtml);
});
table tr:first-child .up_arrow,
table tr:last-child .down_arrow {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row1">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="1" />
</td>
<td>
<select>
<option value="1" selected>1</option>
</select>
</td>
<td>
<select>
<option value="1a" selected>1a</option>
</select>
</td>
<td>
<img src="http://www.w3schools.com/images/compatible_chrome.gif" id="img1" />
</td>
</tr>
<tr id="row2">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="2" />
</td>
<td>
<select>
<option value="2" selected>2</option>
</select>
</td>
<td>
<select>
<option value="2a" selected>2a</option>
</select>
</td>
<td>
<img src="http://www.w3schools.com/images/compatible_opera.gif" id="img2" />
</td>
</tr>
<tr id="row3">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="3" />
</td>
<td>
<select>
<option value="3" selected>3</option>
</select>
</td>
<td>
<select>
<option value="3a" selected>3a</option>
</select>
</td>
<td>
<img src="http://www.w3schools.com/images/compatible_firefox.gif" id="img3" />
</td>
</tr>
</tbody>
</table>
</form>

Ali beat me to the punch, but here's another way to do it:
jsFiddle Demo
var tbl = $('table'),new_ndx;
$(document).on('click','button',function() {
var dir = $(this).attr('class');
var row = $(this).closest("tr");
var ndx = row.index();
row.remove();
if (dir=='up_arrow'){
new_ndx = ndx-1;
tbl.find('tr').eq(new_ndx).before(row);
}else{
new_ndx = ndx++;
tbl.find('tr').eq(new_ndx).after(row);
}
});
table tr:first-child .up_arrow,
table tr:last-child .down_arrow {visibility: hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="1">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="2">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="3">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="4">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="5">
</td>
</tr>
</table>

How to close the table on click in JavaScript?

I have a table which takes the user details. The code is as follows:
<table id="record" border=1>
<tr>
<td>Emp Name</td>
<td><input type="text" placeholder="Employee Name"></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" placeholder="Address"></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="Add">
<input type="button" value="Cancel">
</td>
</tr>
</table>
Now, when I click on the Cancel button, the table should close. How can I do this?

Just give the input button an id...
<input type="button" id="close" value="cancel">
Then add some Jquery...(assuming you are using jquery)
$(document).ready(function(){
$('#close').click(function(){$('#record').hide();});
});
DEMO HERE
Or theres the one liner...
<input type="button" value="cancel" onclick="$('#record').hide();">
DEMO 2
EDIT
And....Your request for just pure javascript...
<input type="button" id="close" value="Cancel" onclick=" document.getElementById('record').style.display = 'none';">
DEMO 3