Moving items between tables using JavaScript or jQuery - javascript

I have four tables of soccer players, one for goalkeepers, one for defenders, one for midfielders and one for attackers. I want the user to be able to change the position of a player so that he'll disappear from his current table and appear in another one without a page refresh.
The only method that I can think of is to have each player listed in all four tables but have him hidden for three of them. Then if he changes, I hide him in the current table and show him in another one.
I know how to achieve this, but it seems a bit heavy and I'm wondering if there's a more elegant solution.

You can use appendChild() in pure JavaScript to move a node from one place to another. The node is automatically removed from its old position in the DOM.
To quote the Mozilla Developer Network documentation on appendChild:
If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).
This means that a node can't be in two points of the document simultaneously. So if the node already has a parent, it is first removed, then appended at the new position.
The following snippet demonstrates the use of appendChild() to move rows between tables. Click on the move buttons to move an item from one table to the other.
window.onload = function () {
var data = {
like: ['vanilla', 'pistachio', 'squirrels', 'squash', 'mountains'],
dislike: ['chocolate', 'trucks', 'football', 'hard candy', 'valleys']
};
var tables = {};
var moveMe = function () {
this.table = tables[this.table === tables.like ? 'dislike' : 'like'];
this.table.tbody.appendChild(this.tr);
};
Object.keys(data).forEach(function (key) {
var container = document.createElement('div'),
table = tables[key] = document.createElement('table'),
tbody = table.tbody = document.createElement('tbody');
data[key].forEach(function (item) {
var tr = document.createElement('tr'),
td = document.createElement('td');
td.innerHTML = item;
tr.appendChild(td);
tbody.appendChild(tr);
var button = document.createElement('button');
button.innerHTML = 'move';
button.onclick = moveMe;
button.table = table;
button.tr = tr;
td.appendChild(button);
});
table.appendChild(tbody);
var header = document.createElement('h2');
header.innerHTML = key;
container.appendChild(header);
container.appendChild(table);
container.className = 'container';
document.getElementById('wrapper').appendChild(container);
});
};
* {
box-model: border-box;
}
body {
font-family: sans-serif;
}
#wrapper {
width: 450px;
}
.container {
display: inline-block;
width: 200px;
padding: 10px;
}
h2 {
margin: 5px 0;
color: #666;
}
table {
width: 200px;
border-collapse: collapse;
}
td {
color: #333;
padding: 10px;
border: 1px solid #bbb;
position: relative;
}
td button {
position: absolute;
right: 5px;
top: 5px;
border: 2px solid #ccc;
border-radius: 5px;
background: #fff;
font-size: 12px;
}
td button:hover {
outline: none;
border-color: #888;
cursor: pointer;
}
<div id="wrapper"></div>

You could also use table api to manipulate your tables, here is a sample:
moving 1,1,1 element to 3,1,1
var tables = document.querySelectorAll("table")
var elementToMove = tables[0].rows[0].cells[0]
var destination = tables[2].rows[0].cells[0]
destination.innerHTML = elementToMove.innerHTML
elementToMove.innerHTML = ""
<table>
<tr>
<td>1,1,1</td>
<td>1,1,2</td>
<td>1,1,3</td>
</tr>
<tr>
<td>1,2,1</td>
<td>1,2,2</td>
<td>1,2,3</td>
</tr>
<tr>
<td>1,3,1</td>
<td>1,3,2</td>
<td>1,3,3</td>
</tr>
</table>
<br>
<table>
<tr>
<td>2,1,1</td>
<td>2,1,2</td>
<td>2,1,3</td>
</tr>
<tr>
<td>2,2,1</td>
<td>2,2,2</td>
<td>2,2,3</td>
</tr>
<tr>
<td>2,3,1</td>
<td>2,3,2</td>
<td>2,3,3</td>
</tr>
</table>
<br>
<table>
<tr>
<td>3,1,1</td>
<td>3,1,2</td>
<td>3,1,3</td>
</tr>
<tr>
<td>3,2,1</td>
<td>3,2,2</td>
<td>3,2,3</td>
</tr>
<tr>
<td>3,3,1</td>
<td>3,3,2</td>
<td>3,3,3</td>
</tr>
</table>
Note that i'm using innerHTML to access data, but you could identify whatever element you have in the cell and then use the appendChild method to move the element you need

Related

How Do I Generate a DIV table from a form submission?

I'm trying to generate a DIV table header row using the JavaScript (no jQuery) shown below but rather than the expected output shown here, what I generate is a row of the items in the array (the headings separated by commas).
var main = document.getElementById("left");
var likertTable = document.createElement("DIV"); //main table div
likertTable.setAttribute("class", "divTable");
var tableHeading = document.createElement("DIV"); // table heading
tableHeading.setAttribute("class", "divTableHeading");
var row = document.createElement("DIV");
row.setAttribute("class", "divTableRow");
tableHeading.appendChild(row);
likertTable.appendChild(tableHeading);
main.appendChild(likertTable);
var tableHeader = ["Question", "Strongly Agree", "Agree", "Undecided", "Disagree", "Strongly Disagree"];
for (var i = 0; i < tableHeader.length; i++) {
var tableCell = document.createElement("DIV");
tableCell.setAttribute("class","divTableCell");
row.appendChild(tableCell);
tableCell.innerHTML = tableHeader[i];
}
.divTable{
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
/*.divTableHeading {
background-color: #EEE;
display: table-header-group;
}*/
.divTableCell, .divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
<div id="left"></div>
The actual variable is var tableHeader = [ranges]; and it works just fine as seen in the screen capture and the snippet correctly appends if a regular HTML table is generated with a TH rather than DIV tag.
Where am I going wrong? Oh shoot!!! Asked an answered! var tableHeader = [ranges]; should have been var tableHeader = ranges;
Came home as the script ran perfectly in snippets editor.
Thanks StackOverflow.
var tableHeader = [ranges]; should have been var tableHeader = ranges; as the former placed the array in two pairs of square brackets without throwing an error in the console.

JavaScript Manipulation of DOM Issue

I have a table which I want the first column to not move when I am scrolling horizontally. This code below works great for the first column of td's but does not work for the tr's. I have stepped through the code and it all appears to set the values I am expected, but the tr cell does not move with the td cells.
window.onscroll = function()
{
var scrollPosX = window.scrollX;
var theTable = document.getElementById("tablename"),
thead = theTable.getElementsByTagName("thead")[0];
tbody = theTable.getElementsByTagName("tbody")[0];
hrCell = thead.getElementsByTagName("tr")[0];
hrCell.style.left = scrollPosX;
rCells = tbody.getElementsByTagName("td");
for(var i = 0; i < rCells.length; i++)
{
rCells[i].style.left = scrollPosX;
}
}
JQuery is not an option in this problem as the program I am working on does not support it.
<style>
table
{
border: solid black 1px;
}
td{
min-width: 300px;
border: solid black 1px;
}
#run_gen_table td:first-child, #run_gen_table th:first-child
{
background-color: white;
position: relative;
}
</style>
<table id="tablename">
<thead id="headname">
<tr><th>Run No.</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th></tr>
</thead>
<tbody id="bodyname">
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
</tbody>
</table>
I have not tested it but your code would alter all the td elements, not just the first column. A better approach would be to use document.querySelector() to select the first td and th elements.
window.onscroll = function()
{
var scrollPosX = window.scrollX;
var rCells = document.querySelector("#tablename th:first-child, #tablename td:first-child");
for(var i = 0; i < rCells.length; i++)
{
rCells[i].style.left = scrollPosX;
}
}

How to make javascript search multiple columns and rows in a table

I am trying to figure out how to make all 5 columns and rows searchable. At the moment it only searches via the first column (DATE). Could someone please assist me with possibly making it search all the columns and rows please? I have included the HTML, CSS and javascript to try to provide as much information as possible.
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
#myInput {
background-image: url('/css/searchicon.png'); /* Add a search icon to input */
background-position: 10px 12px; /* Position the search icon */
background-repeat: no-repeat; /* Do not repeat the icon image */
width: 100%; /* Full-width */
font-size: 16px; /* Increase font-size */
padding: 12px 20px 12px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 12px; /* Add some space below the input */
}
#myTable {
border-collapse: collapse; /* Collapse borders */
width: 100%; /* Full-width */
border: 1px solid #ddd; /* Add a grey border */
font-size: 18px; /* Increase font-size */
}
#myTable th, #myTable td {
text-align: left; /* Left-align text */
padding: 12px; /* Add padding */
}
#myTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
/* Add a grey background color to the table header and on hover */
background-color: #f1f1f1;
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="myTable">
<tr class="header">
<th style="width:20%;">Date</th>
<th style="width:20%;">Home</th>
<th style="width:20%;">Time</th>
<th style="width:20%;">Away</th>
<th style="width:20%;">City</th>
</tr>
<tr>
<td>08/01/2018</td>
<td>SPAIN</td>
<td>16:30 ET</td>
<td>USA</td>
<td>BARCELONA</td>
</tr>
<tr>
<td>08/02/2018</td>
<td>BOLIVIA</td>
<td>18:30 ET</td>
<td>PORTUAL</td>
<td>MADRID</td>
</tr>
<tr>
<td>08/03/2018</td>
<td>PUERTO RICO</td>
<td>18:30 ET</td>
<td>CANADA</td>
<td>CHICAGO</td>
</tr>
<tr>
<td>08/04/2018</td>
<td>MEXICO</td>
<td>19:30 ET</td>
<td>ENGLAND</td>
<td>LONDON</td>
</tr>
</table>
Using your existing code, loop through the table cells just as you loop through the table rows.
Below, I hide each row. For each row, if text in a cell matches the search term, that row is shown and the loop continues to the next row.
I'm also ignoring the table header by using tBodies to limit the search to <tr> elements that are within the first <tbody>. Alternatively, you could check that <td> elements exist in the row before searching; something like: if (tds.length) > 0.
function performSearch() {
// Declare search string
var filter = searchBox.value.toUpperCase();
// Loop through first tbody's rows
for (var rowI = 0; rowI < trs.length; rowI++) {
// define the row's cells
var tds = trs[rowI].getElementsByTagName("td");
// hide the row
trs[rowI].style.display = "none";
// loop through row cells
for (var cellI = 0; cellI < tds.length; cellI++) {
// if there's a match
if (tds[cellI].innerHTML.toUpperCase().indexOf(filter) > -1) {
// show the row
trs[rowI].style.display = "";
// skip to the next row
continue;
}
}
}
}
// declare elements
const searchBox = document.getElementById('searchBox');
const table = document.getElementById("myTable");
const trs = table.tBodies[0].getElementsByTagName("tr");
// add event listener to search box
searchBox.addEventListener('keyup', performSearch);
#searchBox {
box-sizing: border-box;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable th {
width: 20%;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
background-color: #f1f1f1;
}
<input type="text" id="searchBox" placeholder="Search for names..">
<table id="myTable">
<thead>
<tr class="header">
<th>Date</th>
<th>Home</th>
<th>Time</th>
<th>Away</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>08/01/2018</td>
<td>SPAIN</td>
<td>16:30 ET</td>
<td>USA</td>
<td>BARCELONA</td>
</tr>
<tr>
<td>08/02/2018</td>
<td>BOLIVIA</td>
<td>18:30 ET</td>
<td>PORTUAL</td>
<td>MADRID</td>
</tr>
<tr>
<td>08/03/2018</td>
<td>PUERTO RICO</td>
<td>18:30 ET</td>
<td>CANADA</td>
<td>CHICAGO</td>
</tr>
<tr>
<td>08/04/2018</td>
<td>MEXICO</td>
<td>19:30 ET</td>
<td>ENGLAND</td>
<td>LONDON</td>
</tr>
</tbody>
</table>
100% working for unlimited columns !
<input class="form-control" type="text" id="myInput" placeholder="Search ..." onkeyup="searchTableColumns()">
<table id="myTable">
.....
.....
.....
</table
function searchTableColumns() {
// Declare variables
var input, filter, table, tr, i, j, column_length, count_td;
column_length = document.getElementById('myTable').rows[0].cells.length;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) { // except first(heading) row
count_td = 0;
for(j = 1; j < column_length-1; j++){ // except first column
td = tr[i].getElementsByTagName("td")[j];
/* ADD columns here that you want you to filter to be used on */
if (td) {
if ( td.innerHTML.toUpperCase().indexOf(filter) > -1) {
count_td++;
}
}
}
if(count_td > 0){
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
When you do tr[i].getElementsByTagName("td")[0];, you only select the date column, wich is why it only search in that one. You are going to have to loop through all the coumn and set a boolean to true if you find it at least once.
Something like that:
var found = false;
var td = tr[i].getElementsByTagName("td");
for(j = 0; j < td.length; j++) {
if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
//if found at least once it is set to true
found = true;
}
}
//only hides or shows it after checking all columns
if(found){
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
a compact version of the above code, credit to #showdev
/**
* HTML Search for any table
*
* #param element searchBox
* #param string tableBody
*/
function performSearch(searchBox,tableBody) {
let trs = $('#'+tableBody).find('tr');
// Declare search string
let filter = searchBox.value.toUpperCase();
// Loop through first tbody's rows
for (let rowI = 0; rowI < trs.length; rowI++) {
// define the row's cells
let tds = trs[rowI].getElementsByTagName("td");
// hide the row
trs[rowI].style.display = "none";
// loop through row cells
for (let cellI = 0; cellI < tds.length; cellI++) {
// if there's a match
if (tds[cellI].innerHTML.toUpperCase().indexOf(filter) > -1) {
// show the row
trs[rowI].style.display = "";
// skip to the next row
continue;
}
}
}
}
Use it like onkeyup="performSearch(this,'smsTableBody')"

Set buttons in table to match width and height of widest or tallest button in their row or column

I want to create a table of buttons that, when generated with x rows and y columns and user generated button captions, each button in a row is as tall as the tallest one in its row, and each button in a column is as wide as the widest one in its column.
Is there a solution to this with flexbox, or do I need to use JS?
.button1 {width:97px; height:37px;}
.button3 {height:37px;}
.button5 {width:61px;}
<table>
<tr>
<td><button class="button1">First</button></td>
<td><button>Second<br>Button</button></td>
<td><button class="button3">Third</button></td>
</tr>
<tr>
<td><button>Fourth is long</button></td>
<td><button class="button5">Fifth</button></td>
<td><button>Sixth</button></td>
</tr>
</table>
Above snippet is also on JS Fiddle.
Thank you
Before we start, quick note, make sure you include a tbody tag inside your table tag; the browser will just add it for you anyway.
Now then: You can't pull this off with CSS alone. The reason is that CSS is a two-dimensional language, not a three-dimensional one. So you can structure your HTML into columns and get all the buttons in a column matching, or you can do a table as you have, and get all the buttons in a row matching, but you can't do both.
Here's an example of making buttons within the same column have the same width (but not height) with flexbox, by reversing the default flex behavior to allow growing but not shrinking:
.button1 {width:97px; height:37px;}
.button3 {height:37px;}
.button5 {width:61px;}
td div {
display: flex;
}
td div button {
flex: 1 0 auto;
}
<table>
<tbody>
<tr>
<td><div><button class="button1">First</button></div></td>
<td><div><button>Second<br>Button</button></div></td>
<td><div><button class="button3">Third</button></div></td>
</tr>
<tr>
<td><div><button>Fourth is long</button></div></td>
<td><div><button class="button5">Fifth</button></div></td>
<td><div><button>Sixth</button></div></td>
</tr>
</tbody>
</table>
And an example of making heights in a row match, but not widths:
.button1 {
width: 97px;
height: 37px;
}
.button3 {
height: 37px;
}
.button5 {
width: 61px;
}
table {
display: flex;
}
tr {
display: flex;
}
td {
display: flex;
}
td div {
display: flex;
flex-direction: column;
}
td div button {
flex: 1 0 auto;
}
<table>
<tbody>
<tr>
<td><div><button class="button1">First</button></div></td>
<td><div><button>Second<br>Button</button></div></td>
<td><div><button class="button3">Third</button></div></td>
</tr>
<tr>
<td><div><button>Fourth is long</button></div></td>
<td><div><button class="button5">Fifth</button></div></td>
<td><div><button>Sixth</button></div></td>
</tr>
</tbody>
</table>
To get around CSS's limitations, we really need a JavaScript solution. We can query the width/height of each button in a given row/column, then set all buttons in that row/column to match that of the widest/tallest one.
The below snippet completes your request by setting both widths and heights in JavaScript, forgoing flexbox entirely. But as you can see from the CSS examples above, it's conceivable that you could use flex CSS to handle one dimension and then pull out the relevant half of the JavaScript below to handle the other dimension.
$(function() {
//for each row
$('table tr').each(function() {
var maxHeight = 0;
var tallestButton = null;
var $element;
//find the tallest button
$(this).find('td').each(function() {
$element = $(this).find('button');
var buttonHeight = $element.height();
if (buttonHeight > maxHeight) {
maxHeight = buttonHeight;
tallestButton = $element;
}
});
//then set each button in that row to the widest button's width
$(this).find('td button').each(function() {
$(this).height(tallestButton.height());
});
});
//find width of table in columns, based on number of cols in first row
var x = $('table tr:first-child td').length;
//for each column
for (var i=1; i<x+1; i++) {
var maxWidth = 0;
var widestButton = null;
var $element;
var cellInCol = $('table tr td:nth-child(' + i + ')');
$(cellInCol).each(function() {
$element = $(this).find('button');
var buttonWidth = $element.width();
if (buttonWidth > maxWidth) {
maxWidth = buttonWidth;
widestButton = $element;
}
});
$(cellInCol).find('button').each(function() {
$(this).width(widestButton.width());
});
}
});
.button1 {
width: 97px;
height: 37px;
}
.button3 {
height: 37px;
}
.button5 {
width: 61px;
}
.button7 {
height: 80px;
}
table {
border-collapse: collapse;
}
table td {
border: 1px solid gray;
padding: 5px;
text-align: center;
}
button {
white-space: no-wrap; /* fix for long captions on PC */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td><button class="button1">First</button></td>
<td><button>Second<br>Button</button></td>
<td><button class="button3">3rd</button></td>
</tr>
<tr>
<td><button>Fourth is long</button></td>
<td><button class="button5">Fifth</button></td>
<td><button>Sixth (6th)</button></td>
</tr>
<tr>
<td><button>Six</button></td>
<td><button class="button7">7</button></td>
<td><button>8</button></td>
</tr>
<tr>
<td><button>Nine</button></td>
<td><button>Ten</button></td>
<td><button>Eleven</button></td>
</tr>
</tbody>
</table>

My css rules apply to all input elements except for one I made during the script

For some reason, the input I created with the table is NOT AS LONG. I used normalize.css too, and all that did is made it slightly longer. I need it to fill the page and I have no idea where to even begin wording my google searches for such an issue.
Also, all of the css rules DO apply except for width (i think). My dynamically created input is just not as long as the others. Blows my mind.
function makeInput() {
var myInput = document.createElement("input");
myInput.type = "text";
myInput.value = "Here is where the quetsion goes";
return myInput;
}
function makeTable() { // make table with one row and one td
var myTable = document.createElement('table'); // Create table called myTable
var myRow = document.createElement('tr'); // create row called myTr
myTable.id = "myTalbe"
myTable.border = "0"
myTable.cellspacing = "2"
myTable.cellpadding = "0"
myTable.width = "100%"
myTable.type = "text"
var td1 = document.createElement('td'); // td1 for input
var td2 = document.createElement('td'); // td2 for button
var text1 = document.createTextNode('Here is my text');
td1.appendChild(makeInput()); // append makeInput();
td2.appendChild(makeButton()); // append my input form to td1
myRow.appendChild(td1);
myRow.appendChild(td2); // append td1 element to my table
myTable.appendChild(myRow); //
document.body.appendChild(myTable);
}
Game plan: makeInput() returns an input element. makeTable() puts it inside a <td>. makeTable() runs under $(document).ready (jQuery).
I have 5 other inputs on the page. All of which are managed by this:
input[type="text"] {
height: 30px;
display: block;
margin: 0;
width: 98%;
font-family: sans-serif;
font-size: 18px;
appearance: none;
box-shadow: none;
border-radius: none;
}
table tr td input[type="text"] {
height: 30px;
display: block;
margin: 0;
width: 98% !important;
font-family: sans-serif;
font-size: 18px;
appearance: none;
box-shadow: none;
border-radius: none;
}
You try this css....
Tables come with spacing between cells, borders, and padding on cells. Reset those to 0 and it should fill the available space, matching the other inputs. Since there is a cell next to the inputs they will not be the exact same width, since the other cell pushes it to be narrower, but they will line up at least.
function makeInput() {
var myInput = document.createElement("input");
myInput.type = "text";
myInput.value = "Here is where the quetsion goes";
return myInput;
}
function makeTable() { // make table with one row and one td
console.log("Make a table");
var myTable = document.createElement('table'); // Create table called myTable
var myRow = document.createElement('tr'); // create row called myTr
myTable.id = "myTalbe"
myTable.border = "0"
myTable.cellspacing = "2"
myTable.cellpadding = "0"
myTable.width = "100%"
myTable.type = "text"
var td1 = document.createElement('td'); // td1 for input
var td2 = document.createElement('td'); // td2 for button
var text1 = document.createTextNode('Here is my text');
td1.appendChild(makeInput()); // append makeInput() to td1
td2.appendChild(makeButton()); // append makeButton() to td2
myRow.appendChild(td1); // append td1 to the row
myRow.appendChild(td2); // append td2 to the row
myTable.appendChild(myRow); // append the row to the table
document.body.appendChild(myTable); // append the table to the body
}
function makeButton() {
var myButton = document.createElement('button');
var txt = document.createTextNode('Test');
myButton.appendChild(txt);
return myButton;
}
$(document).ready(makeTable);
button, input[type="text"] {
width: 100%;
box-sizing: border-box;
height: 30px;
line-height: 30px;
font-family: sans-serif;
font-size: 18px;
}
input[type="text"] {
display: block;
margin: 0;
appearance: none;
box-shadow: none;
border-radius: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td {
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="Made on load" />
<input type="text" value="This one was made on load too" />

Categories