I am using netbeans with chrome extension (netbeans connector) , i created a jsp page like this :
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Form Page</title>
</head>
<body>
<div align = "center">
<form >
<table border="0">
<tbody>
<tr>
<td>Name : </td>
<td><input type="text" name="Name" value="" /></td>
</tr>
<tr>
<td>Password : </td>
<td><input type="password" name="Password" value="" /></td>
</tr>
<tr>
<td>Age : </td>
<td><input type="text" name="Age" value="" /></td>
</tr>
<tr>
<td></td>
<td><input type="reset" value="Reset" style="float: right"/>
<input type="submit" value="Submit" style="float: right" onclick="onSubmit()" />
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div align = "center">
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script language = "javascript">
function onSubmit(){
var name = document.getElementsByName('Name')[0] ;
var password = document.getElementsByName('Password')[0] ;
var age = document.getElementsByName('Age')[0] ;
if(age.value >= 50){
alert('You\'re too old !');
}
var table = document.getElementsByTagName('table')[1] ;
var body = table.getElementsByTagName('tbody')[0] ;
var trNode = document.createElement('tr') ;
var thNameNode = document.createElement('td') ;
var nameTextNode = document.createTextNode(name.value.toString()) ;
thNameNode.appendChild(nameTextNode) ;
var thAgeNode = document.createElement('td') ;
var ageTextNode = document.createTextNode(age.value) ;
thAgeNode.appendChild(ageTextNode) ;
trNode.appendChild(thNameNode) ;
trNode.appendChild(thAgeNode) ;
body.appendChild(trNode) ;
}
</script>
</body>
the function onSubmit() is supposed to add a row in the table dynamically, but when i run on the browser the changes appear briefly and i am redirected again to original page , what is exactly the problem?
Form gets submitted on onSubmit function, you can prevent it by return false.
So below should work
function onSubmit(){
var name = document.getElementsByName('Name')[0] ;
var password = document.getElementsByName('Password')[0] ;
var age = document.getElementsByName('Age')[0] ;
if(age.value >= 50){
alert('You\'re too old !');
}
var table = document.getElementsByTagName('table')[1] ;
var body = table.getElementsByTagName('tbody')[0] ;
var trNode = document.createElement('tr') ;
var thNameNode = document.createElement('td') ;
var nameTextNode = document.createTextNode(name.value.toString()) ;
thNameNode.appendChild(nameTextNode) ;
var thAgeNode = document.createElement('td') ;
var ageTextNode = document.createTextNode(age.value) ;
thAgeNode.appendChild(ageTextNode) ;
trNode.appendChild(thNameNode) ;
trNode.appendChild(thAgeNode) ;
body.appendChild(trNode) ;
return false;
}
You have few options to achieve this.
Use type = 'button' instead of type= 'submit'
Use return false in click handler. Not to forget return in inline event binding. e.g. onclick='return onSubmit()'. Fiddle here
Use e.preventDefault() Fiddle here
Related
How do I do that JavaScript will print in my HTML page a table via the value the user will choose?
That the JS script:
let numCol = document.getElementById('txtColumns').value;
let numRow = document.getElementById('txtRows').value;
let go = document.getElementById('btn');
let table = document.getElementById('table');
let td = "<td></td>" * numCol;
let tr = ("<tr>" + td + "</tr>") * numRow;
go.addEventListener('click', function(){
table.innerHTML = tr;
})
That the HTML code:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<table class="workTable">
<tr>
<td>
<input type="number" placeholder="Columns Number" id="txtColumns">
</td>
<td>
<input type="number" placeholder="Rows Number" id="txtRows">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="btn">
Print
</button>
</td>
</tr>
<div>
<table id="table">
<!--Here I want to print the table-->
</table>
</div>
</table>
<script src="script.js"></script>
</body>
</html>
At first I thought about that way with the script but its only appear as a NaN and not table...
The following syntax:
let td = "<td></td>" * numCol;
does not produce numCol cells, so the following syntax:
let tr = ("<tr>" + td + "</tr>") * numRow;
does not produce numRow rows also.
So, the whole source code should be:
let go = document.getElementById('btn');
let table = document.getElementById('table');
go.addEventListener('click', () => {
let numCol = document.getElementById('txtColumns').value; //Get the value of txtColumns at the button click moment.
let numRow = document.getElementById('txtRows').value;
let td = "",
tr = "";
for (let i = 0; i < numCol; i++) {
td = td + "<td></td>";
}
for (let i = 0; i < numRow; i++) {
tr = tr + "<tr>" + td + "</tr>";
}
table.innerHTML = tr;
})
<table class="workTable">
<tr>
<td>
<input type="number" placeholder="Columns Number" id="txtColumns">
</td>
<td>
<input type="number" placeholder="Rows Number" id="txtRows">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="btn">
Print
</button>
</td>
</tr>
<div>
<table id="table" border="1">
<!--Here I want to print the table-->
</table>
</div>
</table>
I have asked this question before but have had to clean it up, difficult to follow, cause it was a mess, so its down to the bone now, in the format below the code works, the issue I am having is that I want to add a second and third equation using the same variables, possibly a forth, I thought I could just add another equation in the same format below and would work (different ID), but its not, it calculates one and not the other, its for a stand alone computer, no internet, can't use any plugins either, been at it a while now and its annoying me but I am determined to get it to work. Its google chrome being used. Is this possible, any one help please. I have set the code back to calculating just the one equation.
<!DOCTYPE html>
<html>
<head> </head>
<body>
<script type="text/javascript">
window.onload = function() {
CMCObj = document.getElementById('txtCMC');
WaterObj = document.getElementById('txtWater');
GlycerolObj = document.getElementById('txtGlycerol');
FlowObj = document.getElementById('txtFlow');
FreshObj = document.getElementById('tdFresh');
document.getElementById('btnReset').onclick = resetInputs;
document.getElementById('btnCalc').onclick = calcAddition;
};
function resetInputs() {
CMCObj.value = '';
WaterObj.value = '';
GlycerolObj.value = '';
FlowObj.value = '';
FreshObj.innerHTML = '';
}
function calcAddition() {
var CMC = new Number(CMCObj.value);
var Water = new Number(WaterObj.value);
var Glycerol = new Number(GlycerolObj.value);
var Flow = new Number(FlowObj.value);
FreshObj.innerHTML = '';
if (isNaN(CMC) || isNaN(Water)) {
alert('Invalid CMC or Water');
return;
}
FreshObj.innerHTML = Math.round(
((CMC + Water + Glycerol) / (CMC + Water + Glycerol + Flow)) * 100
);
}
</script>
<table>
<tr>
<td><label for="txtCMC">Total CMC Injection (ml)</label></td>
<td><input type="text" id="txtCMC" /></td>
</tr>
<tr>
<td><label for="txtWater">Total Water Injection (ml)</label></td>
<td><input type="text" id="txtWater" /></td>
</tr>
<tr>
<td><label for="txtGlycerol">Total Glycerol Injection (%)</label></td>
<td><input type="text" id="txtGlycerol" /></td>
</tr>
<tr>
<td><label for="txtFlow">Plasticiser Flow (Lhr)</label></td>
<td><input type="text" id="txtFlow" /></td>
</tr>
<tr>
<td>Total Fresh Injection (%)</td>
<td id="tdFresh"></td>
</tr>
<tr>
<td></td>
<td>
<button id="btnReset">Reset</button
><button id="btnCalc">Calculate</button>
</td>
</tr>
</table>
</body>
</html>
Fixed code below and it works, thanks for help
<!DOCTYPE html>
<html>
<head>
</head>
<BODY>
<script type="text/javascript">
window.onload=function() {
CMCObj = document.getElementById('txtCMC');
WaterObj = document.getElementById('txtWater');
GlycerolObj = document.getElementById('txtGlycerol');
FlowObj = document.getElementById('txtFlow');
FreshObj = document.getElementById('tdFresh');
FreshCMCObj = document.getElementById('tdFreshCMC');
FreshGlycerolObj = document.getElementById('tdFreshGlycerol');
document.getElementById('btnReset').onclick = resetInputs;
document.getElementById('btnCalc').onclick = calcAddition;
}
function resetInputs() {
CMCObj.value = '';
WaterObj.value = '';
GlycerolObj.value = '';
FlowObj.value = '';
FreshObj.innerHTML = '';
FreshCMCObj.innerHTML = '';
FreshGlycerolObj.innerHTML = '';
}
function calcAddition() {
var CMC = new Number(CMCObj.value);
var Water = new Number(WaterObj.value);
var Glycerol = new Number(GlycerolObj.value);
var Flow = new Number(FlowObj.value);
FreshObj.innerHTML = '';
if(isNaN(CMC) || isNaN(Water)) {
alert('Invalid CMC or Water');
return;
}
FreshCMCObj.innerHTML = '';
if(isNaN(CMC) || isNaN(Water)) {
alert('Invalid CMC or Water');
return;
}
FreshGlycerolObj.innerHTML = '';
if(isNaN(CMC) || isNaN(Water)) {
alert('Invalid CMC or Water');
return;
}
FreshObj.innerHTML = Math.round(((CMC+Water+Glycerol)/(CMC+Water+Glycerol+Flow)*100));
FreshCMCObj.innerHTML = Math.round(((CMC)/(CMC+Water+Glycerol+Flow)*100));
FreshGlycerolObj.innerHTML = Math.round(((CMC+Water+Glycerol)/(CMC+Water+Glycerol+Flow)*100));
}
</script>
<table>
<tr>
<td><label for="txtCMC">Total CMC Injection (ml)</label></td>
<td><input type="text" id="txtCMC" /></td>
</tr>
<tr>
<td><label for="txtWater">Total Water Injection (ml)</label></td>
<td><input type="text" id="txtWater" /></td>
</tr>
<tr>
<td><label for="txtGlycerol">Total Glycerol Injection (%)</label></td>
<td><input type="text" id="txtGlycerol" /></td>
</tr>
<tr>
<td><label for="txtFlow">Plasticiser Flow (Lhr)</label></td>
<td><input type="text" id="txtFlow" /></td>
</tr>
<tr>
<td>Total Fresh Injection (%)</td>
<td id="tdFresh"></td>
</tr>
<tr>
<td>Total Fresh CMC Injection (%)</td>
<td id="tdFreshCMC"></td>
</tr>
<tr>
<td>Total Fresh Glycerol Injection (%)</td>
<td id="tdFreshGlycerol"></td>
</tr>
<tr>
<td></td>
<td><button id="btnReset">Reset</button><button id="btnCalc">Calculate</button></td>
</tr>
</table>
</body>
</html>
Alright, I made a few changes to your code making your calculator fully dynamic. If you change the FormMaker function's TotalForms variable to any number... thats how many calculators it will make for you. enjoy
:)
Also, I almost forgot to mention. Your JS script needs to be placed at the end of your HTML document and never on top. There are ways to place your JS at the top, but it should be done with built workarounds to avoid errors in your code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>My Calculator</title>
</head>
<body>
<div id="FormArea"></div>
<script type="text/javascript">
//setTimeout(FormMaker, 0);
(function StartingApp(){
setTimeout(FormMaker, 6);
})();
function FormMaker() {
let TotalForms = 3,
i,
fragment,
div,
htmlText,
Location = document.querySelector('#FormArea');
console.log(Location);
for (i = 0; i < TotalForms; i++) {
console.log('hello');
fragment = document.createDocumentFragment();
div = document.createElement('div');
htmlText = `
<h2>Amazing Calculator ${i+1}</h2>
<table>
<tr>
<td><label for="txtCMC">Total CMC Injection (ml)</label></td>
<td><input type="text" id="txtCMC${i}" /></td>
</tr>
<tr>
<td><label for="txtWater">Total Water Injection (ml)</label></td>
<td><input type="text" id="txtWater${i}" /></td>
</tr>
<tr>
<td><label for="txtGlycerol">Total Glycerol Injection (%)</label></td>
<td><input type="text" id="txtGlycerol${i}" /></td>
</tr>
<tr>
<td><label for="txtFlow">Plasticiser Flow (Lhr)</label></td>
<td><input type="text" id="txtFlow${i}" /></td>
</tr>
<tr>
<td>Total Fresh Injection (%)</td>
<td id="tdFresh${i}"></td>
</tr>
<tr>
<td></td>
<td>
<button id="btnReset${i}" onclick = "resetInputs()">Reset</button>
<button id="btnCalc${i}" onclick = "calcAddition()">Calculate</button>
</td>
</tr>
</table>
`;
div.className = 'FormContainers';
div.innerHTML = htmlText;
fragment.appendChild(div);
Location.appendChild(fragment);
};
};
function resetInputs() {
let i,
TotalForms = document.getElementsByClassName("FormContainers").length;
for (i = 0; i < TotalForms; i++) {
let CMCObj = document.getElementById(`txtCMC${i}`),
WaterObj = document.getElementById(`txtWater${i}`),
GlycerolObj = document.getElementById(`txtGlycerol${i}`),
FlowObj = document.getElementById(`txtFlow${i}`),
FreshObj = document.getElementById(`tdFresh${i}`);
CMCObj.value = '';
WaterObj.value = '';
GlycerolObj.value = '';
FlowObj.value = '';
FreshObj.innerHTML = '';
};
};
function calcAddition() {
let i,
TotalForms = document.getElementsByClassName("FormContainers").length;
for (i = 0; i < TotalForms; i++) {
let CMC = document.getElementById(`txtCMC${i}`).value,
Water = document.getElementById(`txtWater${i}`).value,
Glycerol = document.getElementById(`txtGlycerol${i}`).value,
Flow = document.getElementById(`txtFlow${i}`).value,
FreshObj = document.getElementById(`tdFresh${i}`);
FreshObj.innerHTML = '';
if(isNaN(CMC) || isNaN(Water)) {
alert(`Invalid CMC or Water on Amazing Calculator ${i}`);
return;
}
FreshObj.innerHTML = Math.round(((CMC+Water+Glycerol)/(CMC+Water+Glycerol+Flow)*100));
};
};
</script>
<style>
#FormArea{
display: flex;
flex-wrap: wrap;
}
</style>
</body>
</html>
I am making a dynamic table that you can add rows to it and when the user presses the save button I want the whole HTML code at that moment to go into a database variable. What I tried so far was the ob_start();and I tried sending them through POST but I couldn't because I don't know how many rows and variables are there. This is my code so far.
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<script>
var index = 1;
function insertRow(){
var table=document.getElementById("myTable");
var row=table.insertRow(table.rows.length);
var cell1=row.insertCell(0);
var t1=document.createElement("input");
t1.id = "txtName"+index;
cell1.appendChild(t1);
var cell2=row.insertCell(1);
var t2=document.createElement("input");
t2.id = "txtAge"+index;
cell2.appendChild(t2);
var cell3=row.insertCell(2);
var t3=document.createElement("input");
t3.id = "txtGender"+index;
cell3.appendChild(t3);
var cell4=row.insertCell(3);
var t4=document.createElement("input");
t4.id = "txtOccupation"+index;
cell4.appendChild(t4);
index++;
}
</script>
<table id="myTable">
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Occupation and Employer</th>
<th>Add</th>
<tr>
<td><input type="text" id="txtName" /></td>
<td><input type="text" id="txtAge" /></td>
<td><input type="text" id="txtGender" /></td>
<td><input type="text" id="txtOccupation" /></td>
<td><input type="button" id="btnAdd" class="button-add" onClick="insertRow()" value="add"></input></td>
</tr>
</table>
<input type=button name='save' value='save'>
</body>
</html>
There is form which has table containing 1 row and 4 column.The add row button creates a exact row but with different ids .I want to obtain the data filled in this form and send to a php script when clicked on save and continue later button at the bottom .How can I do this?This being a html page.
<form name="myform">
<h3 align="left"><b>Computer</b><h3>
<table id="POITable" border="1" width="100%">
<tr>
<th style="width:10%">Sr No.</th>
<th>Item Description</th>
<th>Quantity</th>
<th>Rate(Inclusive of Taxes)</th>
<th>Total Cost</th>
</tr>
<tr>
<td>1</td>
<td><textarea rows="4" cols="50" id="comp_item"></textarea></td>
<td><input size=25 type="number" id="comp_quant"/></td>
<td><input size=25 type="number" id="comp_rate"/></td>
<td><input size=25 type="number" id="comp_total"/></td>
</tr>
</table>
Total:<input type="text" name="computer" align="right"><br>
<input type="button" id="addmorePOIbutton" value="Add New Row" onclick="insRow()"/>
<script>
function insRow()
{
console.log( 'hi');
var x=document.getElementById('POITable');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
new_row.cells[0].innerHTML = len;
var inp1 = new_row.cells[1].getElementsByTagName('textarea')[0];
inp1.id += len;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.id += len;
inp2.value = '';
var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
inp3.id += len;
inp3.value = '';
var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
inp4.id += len;
inp4.value = '';
x.appendChild( new_row );
document.getElementsByName("len")[0].value=len;
}
</script>
<input type="submit" value="SAVE AND CONTINUE LATER">
</form>
</html>
To retrive your data in php you must add name attributes to your form input-fields. I have rewritten your code by replacing the input-id's with name instead, like so:
<td><textarea rows="4" cols="50" name="comp_item"></textarea></td>
<td><input size=25 type="number" name="comp_quant"/></td>
<td><input size=25 type="number" name="comp_rate"/></td>
<td><input size=25 type="number" name="comp_total"/></td>
also in your form-element you must specify action and method.
<form name="myform" action="myphpformhandler.php" method="POST">
I took the liberty to rewrite some of your code but the essentials are intact.
<form name="myform" action="myphpformhandler.php" method="POST"> <!-- point action towards the php-file where you wish to handle your data -->
<h3 align="left"><b>Computer</b><h3>
<table id="POITable" border="1" width="100%">
<tr>
<th style="width:10%">Sr No.</th>
<th>Item Description</th>
<th>Quantity</th>
<th>Rate(Inclusive of Taxes)</th>
<th>Total Cost</th>
</tr>
<tr>
<td>1</td>
<td><textarea rows="4" cols="50" name="comp_item"></textarea></td>
<td><input size=25 type="number" name="comp_quant"/></td>
<td><input size=25 type="number" name="comp_rate"/></td>
<td><input size=25 type="number" name="comp_total"/></td>
</tr>
</table>
Total:<input type="text" name="computer" align="right"><br>
<input type="button" id="addmorePOIbutton" value="Add New Row"/>
<input type="submit" value="SAVE AND CONTINUE LATER">
</form>
<script>
(function() { // Prevent vars from leaking to the global scope
var formTable = document.getElementById('POITable');
var newRowBtn = document.getElementById('addmorePOIbutton');
newRowBtn.addEventListener('click', insRow, false); //added eventlistener insetad of inline onclick-attribute.
function insRow() {
var new_row = formTable.rows[1].cloneNode(true),
numTableRows = formTable.rows.length;
// Set the row number in the first cell of the row
new_row.cells[0].innerHTML = numTableRows;
var inp1 = new_row.cells[1].getElementsByTagName('textarea')[0];
inp1.name += numTableRows;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.name += numTableRows;
inp2.value = '';
var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
inp3.name += numTableRows;
inp3.value = '';
var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
inp4.name += numTableRows;
inp4.value = '';
// Append the new row to the table
formTable.appendChild( new_row );
document.getElementsByName("len")[0].value = numTableRows;
}
})();
</script>
Now to access your data in your "myphpformhandler.php" you use the $_POST-variable with your html-element names. like so!
$_POST['comp_item'];
$_POST['comp_item1'];
$_POST['comp_quant'];
$_POST['comp_quant1']; //etc...
I am currently working on javascript. In this code I have a table and a textbox. When I enter data in the textbox it should show the particular value that I typed but it doesn't search any data from the table. How do I search data in the table?
Here's a jsfiddle http://jsfiddle.net/SuRWn/
HTML:
<table name="tablecheck" class="Data" id="results" >
<thead>
<tr>
<th> </th>
<th> </th>
<th><center> <b>COURSE CODE</b></center></th>
<th><center>COURSE NAME</center></th>
</tr>
</thead>
<tbody>
<tr id="rowUpdate" class="TableHeaderFooter">
<td >
<center> <input type="text" name="input" value="course" ></center>
<center> <input type="text" name="input" value="course1" ></center>
<center> <input type="text" name="input" value="course2" ></center>
</td>
<td>
<center> <input type="text" name="input" value="subject" ></center>
<center> <input type="text" name="input" value="subject1" ></center>
<center> <input type="text" name="input" value="subject2" ></center>
</td>
</tr>
</tbody>
</table >
<form action="#" method="get" onSubmit="return false;">
<label for="q">Search Here:</label><input type="text" size="30" name="q" id="q" value="" onKeyUp="doSearch();" />
</form>
Javascript:
<script type="text/javascript">
//<!--
function doSearch() {
var q = document.getElementById("q");
var v = q.value.toLowerCase();
var rows = document.getElementsByTagName("tr");
var on = 0;
for ( var i = 0; i < rows.length; i++ ) {
var fullname = rows[i].getElementsByTagName("td");
fullname = fullname[0].innerHTML.toLowerCase();
if ( fullname ) {
if ( v.length == 0 || (v.length < 3 && fullname.indexOf(v) == 0) || (v.length >= 3 && fullname.indexOf(v) > -1 ) ) {
rows[i].style.display = "";
on++;
} else {
rows[i].style.display = "none";
}
}
}
}
//-->
</script>
checking with chrome console, it seems that innerHtml for the 'fullname' is returning an error:
var fullname = rows[i].getElementsByTagName("td");
fullname = fullname[0].innerHTML.toLowerCase();
That's because the first tr tag you have is in the thead and it doesn't have any td at all. Changing the start of your loop to 1 will fix that:
for ( var i = 1; i < rows.length; i++ ) { //... and so on
yuvi is correct in his answer. I've incorporated this in a fiddle - http://jsfiddle.net/dBs7d/8/ - that also contains the following changes:
Inputs with course and subject grouped into individual rows.
td tags align underneath th tags.
Code refactored to improve readability.
Instead of checking the html of the td tags I've changed it to check the value attribute of the input tags. This means you can change the value of the input and still search.
I also changed the style alteration to use backgroundColor. This can easily be reverted to display.
See this link.
HTML:
<table name="tablecheck" class="Data" id="results" >
<thead>
<tr>
<th>Course</th>
<th>Subject</th>
<th>COURSE CODE</th>
<th>COURSE NAME</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="course" /></td>
<td><input type="text" value="subject" /></td>
</tr>
<tr>
<td><input type="text" value="course1" /></td>
<td><input type="text" value="subject1" /></td>
</tr>
<tr>
<td><input type="text" value="course2" /></td>
<td><input type="text" value="subject2" /></td>
</tr>
</tbody>
</table>
Search here (with jQuery):<input type="text" size="30" value="" onKeyUp="doSearchJQ(this);" /><br />
Search here:<input type="text" size="30" value="" onKeyUp="doSearch(this);" />
Javascript:
function doSearchJQ(input) {
var value = $(input).val();
if (value.length > 0) {
$("#results tbody tr").css("display", "none");
$('#results input[value^="' + value + '"]').parent().parent().css("display", "table-row");
} else {
$("#results tbody tr").css("display", "table-row");
}
}
function doSearch(input){
var value = input.value;
var table = document.getElementById('results');
var tbody = table.querySelector("tbody");
var rows = tbody.querySelectorAll("tr");
var visible, row, tds, j, td, input;
for (var i = 0; i < rows.length; i++) {
visible = false;
row = rows[i];
tds = row.querySelectorAll("td");
for (j = 0; j < tds.length; j++) {
td = tds[j];
input = td.querySelector("input");
console.log(input.value.indexOf(value));
if (input.value.indexOf(value) > -1) {
visible = true;
break;
}
}
if (visible) {
row.style.display = "table-row";
} else {
row.style.display = "none";
}
}
}
With jquery it's more compact function. But you can use clear javascript doSearch.
Why don't you use JQuery DataTables? The plugin has a really nice table view as well as automatically enabled search textbox, and should fit in easily with your JavaScript/PHP solution.
See example table below:
The plugin is well-documented, and widely used. It should be very easy to drop in into an existing application, and style it accordingly.
Hope this helps!