I have three input box and below one button
when I click that button I want input data should come into html table and sholud able to delete that record
Kindly help me out
advance thanks
I did the same with one input box. So making it for three shouldn't be an issue. You must be looking out for this code:
$("table").on("click", "tbody tr td a", function () {
$(this).closest("tr").remove();
return false;
});
You can either press Enter or click on the button to insert temp data. Okay, just heads up, as you didn't put enough code, you can do it this way:
$(function () {
$("#tempInsert").keyup(function (e) {
if (e.keyCode == 13)
insertRow();
});
$("#tempBtn").click(function () {
insertRow();
});
$("table").on("click", "tbody tr td a", function () {
$(this).closest("tr").remove();
return false;
});
});
function insertRow() {
if ($("#tempInsert").val().length > 0)
$("table tbody").append('<tr><td>' + $("#tempInsert").val() + '</td><td><a href="#">×</td></tr>');
$("#tempInsert").val("");
}
* {font-family: 'Segoe UI'; text-decoration: none;}
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<input type="text" id="tempInsert" />
<input type="button" id="tempBtn" value="Add" />
<table width="100%">
<thead>
<tr>
<th width="85%">Stuff</th>
<th width="15%">Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
I supposed that you are absolutely new and I wrote a simple example for you, just to get the idea of how to do.
HTML
<table style="border: 1px solid red; width: 200px; height: 80px; ">
<tr>
<td id="nm"></td>
</tr>
<tr>
<td id="fnm"></td>
</tr>
<tr>
<td id="ag"></td>
</tr>
</table>
Name : <input type="text" id="n"><br />
F/Name: <input type="text" id="fn"><br />
Age : <input type="text" id="age"><br />
<button>Click</button>
SCRIPT
$(function(){
$('button').click(function(event) {
$('#nm').text($('#n').val());
$('#fnm').text($('#fn').val());
$('#ag').text($('#age').val());
$('#n').val('');
$('#fn').val('');
$('#age').val('');
});
});
$('#submitBtn').click(function(){
var input1 = $('#input1').val();
var input2 = $('#input2').val();
var input3 = $('#input3').val();
$('#td1').html(input1);
$('#td2').html(input2);
$('#td3').html(input3);
});
<table>
<tr>
<td id="td1"></td>
<td id="td2"></td>
<td id="td3"></td>
</tr>
</table>
Try this Demo
function Add() {
var tbl = document.getElementById("tbl");
var fname = document.getElementById("FName").value;
var lname = document.getElementById("LName").value;
var city = document.getElementById("City").value;
if (fname == "" && lname == "" && city == "")
alert("Enter Text in input box");
else {
var tblcount = tbl.rows.length;
var row = tbl.insertRow(tblcount);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = fname;
cell2.innerHTML = lname;
cell3.innerHTML = city;
}
}
#tbl tr td {
padding: 0 10px;
}
<input id="FName" type="text"></input>
<input id="LName" type="text"></input>
<input id="City" type="text"></input>
<button id="btnAdd" onclick="Add();">Add</button>
<table id="tbl">
<tr>
<td>Fisrt Name</td>
<td>Last Name</td>
<td>City</td>
</tr>
</table>
Related
I am working with javascript
when I submit the form I store the data in a table but the table data is also clear
index.html
<body>
<form id='freg'>
<label>firstname</label>
<input type='text' id='fname'>
<label>lastname</label>
<input type='text' id='lname'>
<label>officelocation</label>
<input type='text' id='location'>
<input id='btn' type='submit' value='submit' onclick='onFormSubmit()'/>
</form>
<br/> <br/>
<table>
<thead>
<tr>
<th>firstname</th>
<th>lastname</th>
<th>location</th>
</tr>
</thead>
<tbody>
<td id='ffname'></td>
<td id='llname'></td>
<td id='olocation'></td>
</tbody>
</table>
<script type='text/javascript' src='index.js'></script>
index.js
function onFormSubmit() {
document.getElementById('fname').value;
document.getElementById('lname').value;
document.getElementById('location').value;
readFormData();
}
function readFormData() {
var data = {};
data.fname = document.getElementById('fname').value;
data.lname = document.getElementById('lname').value;
data.location = document.getElementById('location').value;
insertnewrecord(data);
}
function insertnewrecord(data) {
document.getElementById('ffname').innerHTML = data.fname;
document.getElementById('llname').innerHTML = data.lname;
document.getElementById('olocation').innerHTML = data.location;
resetform();
}
function resetform() {
document.getElementById('fname').value = "";
document.getElementById('lname').value = "";
document.getElementById('location').value = "";
}
I am working with html with javascript
when I submit the form then not able to see the data in table I put debug and I can see the data is store in table but then tabale data is clear.
Here is my solution, you need to insert a row each time and then instead of doing a submit, just clear the form instead!
reference
function onFormSubmit() {
insertRow();
}
function insertRow() {
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var location = document.getElementById('location').value;
var table = document.getElementById("myTable");
// Create an empty <tr> element and add it to the 1st position of the table:
var row = table.insertRow(-1);
// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
// Add some text to the new cells:
cell1.innerHTML = fname;
cell2.innerHTML = lname;
cell3.innerHTML = location;
resetform();
}
function resetform() {
document.getElementById('fname').value = "";
document.getElementById('lname').value = "";
document.getElementById('location').value = "";
}
<body>
<form id='freg'>
<label>firstname</label>
<input type='text' id='fname'>
<label>lastname</label>
<input type='text' id='lname'>
<label>officelocation</label>
<input type='text' id='location'>
<input id='btn' type='button' value='submit' onclick='onFormSubmit()' />
</form>
<br/> <br/>
<table id="myTable">
<thead>
<tr>
<th>firstname</th>
<th>lastname</th>
<th>location</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
you just need to prevent form to refresh page
then you just need remove function that clear form Cell
index.html
<body>
<form id='freg'>
<label>firstname</label>
<input type='text' id='fname'>
<label>lastname</label>
<input type='text' id='lname'>
<label>officelocation</label>
<input type='text' id='location'>
<input id='btn' type='submit' value='submit' onclick="event.preventDefault(); onFormSubmit()" /><!-- <<<<<<<<<<<<<<<<< -->
</form>
<br /> <br />
<table>
<thead>
<tr>
<th>firstname</th>
<th>lastname</th>
<th>location</th>
</tr>
</thead>
<tbody>
<td id='ffname'></td>
<td id='llname'></td>
<td id='olocation'></td>
</tbody>
</table>
<script type='text/javascript' src='index.js'></script>
index.js
function onFormSubmit() {
document.getElementById('fname').value;
document.getElementById('lname').value;
document.getElementById('location').value;
readFormData();
}
function readFormData() {
var data = {};
data.fname = document.getElementById('fname').value;
data.lname = document.getElementById('lname').value;
data.location = document.getElementById('location').value;
insertnewrecord(data);
}
function insertnewrecord() {
document.getElementById('ffname').innerHTML = data.fname;
document.getElementById('llname').innerHTML = data.lname;
document.getElementById('olocation').innerHTML = data.location;
// resetform(); <<<<<<<<<<<<<<<<<
}
function resetform() {
document.getElementById('fname').value = "";
document.getElementById('lname').value = "";
document.getElementById('location').value = "";
}
You should declare the data object globally inside the js script. Also, use event.preventDefault() inside custom button click function.
Also, I changed the insertnewrecord() function to handle multiple insert operations in the table.
Check following code:
var data = {};
function onFormSubmit(e) {
readFormData();
e.preventDefault();
}
function readFormData() {
data.fname = document.getElementById("fname").value;
data.lname = document.getElementById("lname").value;
data.location = document.getElementById("location").value;
insertnewrecord(data);
}
function insertnewrecord(data) {
var table = document.getElementById("show-data");
table.innerHTML += `<tr> <td>${data.fname}</td> <td>${data.lname}</td> <td>${data.location}</td> </tr>`;
resetform();
}
function resetform() {
document.getElementById("fname").value = "";
document.getElementById("lname").value = "";
document.getElementById("location").value = "";
}
<body>
<form id='freg'>
<label>firstname</label>
<input type='text' id='fname'>
<label>lastname</label>
<input type='text' id='lname'>
<label>officelocation</label>
<input type='text' id='location'>
<input id='btn' type='submit' value='submit' onclick='onFormSubmit(event)' />
</form>
<br/> <br/>
<table>
<thead>
<tr>
<th>firstname</th>
<th>lastname</th>
<th>location</th>
</tr>
</thead>
<tbody id="show-data">
<td id='ffname'></td>
<td id='llname'></td>
<td id='olocation'></td>
</tbody>
</table>
<script type='text/javascript' src='index.js'></script>
use event.preventDefault(); in your onFormSubmit
function
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
I've a text field in table with id name .
I have added a validation on it.
But its not working
<td>Name:</td>
<td>
<input type="text" id="name" class="required"/>(required)
</td>
$("#name").focusout(function(){
if (!$(this).val()) {
alert("This field is required");
$(this).focus();
}
});
I have complete code on jsfiddle .
Please check link
Just make sure to put it inside document ready and it'll work just fine:
$(function () {
$("#name").focusout(function () {
if (!$(this).val()) {
alert("This field is required");
$(this).focus();
}
});
});
jsfiddle DEMO
Edit: full page requested by OP:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Book Library</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
var count = 1;
var rating;
function addRow() {
var myName = document.getElementById("name");
var auther = document.getElementById("auther");
var publish = document.getElementById("publish");
var ratings = document.getElementsByName("rating");
for (var i = 0; i < ratings.length; i++) {
if (ratings[i].checked) {
rating = ratings[i];
}
}
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = count;
row.insertCell(1).innerHTML = myName.value;
row.insertCell(2).innerHTML = auther.value;
row.insertCell(3).innerHTML = publish.value;
row.insertCell(4).innerHTML = rating.value;
count = count + 1;
}
function load() {
console.log("Page load finished");
}
$(function() {
$("#name").focusout(function () {
console.log('bla');
if (!$(this).val()) {
alert("This field is required");
$(this).focus();
}
});
});
</script>
</head><body onload="load()">
<div id="mydata">
<b>Current data in the system ...</b>
<table id="myTableData" border="1" style="width:100%">
<tr id="templateRow">
<th>ID</th>
<th>Name</th>
<th>Authers</th>
<th>Published</th>
<th>Ratings</th>
</tr>
</table>
<br/>
</div>
<div id="myform">
<b>Simple form with name and age ...</b>
<table style="width:100%">
<tr>
<td>Name:</td>
<td>
<input type="text" id="name">
</td>
</tr>
<tr>
<td>Auther:</td>
<td>
<input type="text" id="auther">
</td>
</tr>
<tr>
<td>Published:</td>
<td>
<input type="date" id="publish">
</td>
</tr>
<tr>
<td>Rating:</td>
<td>
<input type="radio" value="1" id="rating" name="rating">1
<input type="radio" value="2" id="rating2" name="rating">2
<input type="radio" value="3" id="rating3" name="rating">3
<input type="radio" value="4" id="rating4" name="rating">4
<input type="radio" value="5" id="rating5" name="rating">5</td>
</tr>
</table>
<br>
<input type="button" id="add" value="Add" onclick="Javascript:addRow()">
</div>
</body>
</html>
I was trying to create a program to add rows dynamically using Javascript in HTML Table using the Add Row Button. There seems to be an error.
<html>
<head>
<title>Home - First Website</title>
<style>
table{
width: 100%;
}
td{
padding: 8px;
border: 1px solid;
}
input[type="text"]{
width: 100%;
}
</style>
<script type="text/javascript">
function add(){
var num=parseInt(document.getElementById("t1").length+1);
var a=document.createElement("td");
var anode=document.createTextNode(num);
a.appendChild(anode);
document.getElementById("t1").appendChild(a);
a=document.createElement("td");
anode=document.createElement("input");
var b=document.createAttribute("type");
b.value="checkbox";
anode.setAttributeNode(b);
a.appendChild(anode);
document.getElementById("t1").appendChild(a);
a=document.createElement("td");
anode=document.createElement("input");
b=document.createAttribute("type");
b.value="text";
anode.setAttributeNode(b);
a.appendChild(anode);
document.getElementById("t1").appendChild(a);
}
</script>
</head>
<body>
<table name="t1">
<tr>
<input type="button" value="Add Row" onclick="add()">
</tr>
<tr>
<td>1.</td><td><input type="checkbox"></td><td><input type="text" style="width:100%;"></td>
</tr>
</table>
</body>
</html>
There are multiple problems in the code :
1) for adding row why are you doing this :
var num=parseInt(document.getElementById("t1").length+1);
: please note you haven't given your table any id.
I think you need count to number your rows. You can get that by :
var num =document.getElementById("t1").rows.length;
2) For adding a row, you have not created <tr> element!
Here's the corrected jsFiddle :
http://jsfiddle.net/thecbuilder/kCm2D/1/
update : changed the way to get number of rows.
js
function add() {
var num = var num =document.getElementById("t1").rows.length;
console.log(num);
var x = document.createElement("tr");
var a = document.createElement("td");
var anode = document.createTextNode(num);
a.appendChild(anode);
x.appendChild(a);
a = document.createElement("td");
anode = document.createElement("input");
var b = document.createAttribute("type");
b.value = "checkbox";
anode.setAttributeNode(b);
a.appendChild(anode);
x.appendChild(a);
a = document.createElement("td");
anode = document.createElement("input");
b = document.createAttribute("type");
b.value = "text";
anode.setAttributeNode(b);
a.appendChild(anode);
x.appendChild(a);
document.getElementById("t1").appendChild(x);
}
html
<table id="t1" name="t1"> <!-- "t1" is id as well -->
<tr>
<input type="button" value="Add Row" onclick="add()" />
</tr>
<tr>
<td>1.</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="text" style="width:100%;" />
</td>
</tr>
</table>
You're using getElementById but your table has a name not an id.
<table name="t1">
to
<table id="t1">
The error is on document.getElementById("t1"), but your table doesn't have an id="t1", it has a name="ti".
Update to this:
<table id="t1">
I need your help.
Because of the way IE7 chooses to ignore the TD: whitespace: nowrap, I am forced to put and use spans in front of my TD's so here's the delema. When I click on a table row that has no spans in between the td's, the coding is able to extract the data and highlight the row.
However, when I introduce a span in between my td's and click to select a single cell in the table row with the spans's I get the following error: "cells.0 is null or not an object." I know that if I click a little bit off the side of the table cell it works, but I need to be able to also click on the <TD> and <SPAN> areas and have the code work.
Since I am making a table that will have all <span></span>'s in between all the <TD>'s how can the existing coding be reformatted to accomodate the difference from <td>data</td> to <td><span>data</span></td>?
No jQuery please.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#data tr.normal td {
color: #235A81;
background-color: white;
}
#data tr.highlighted td {
color: #FFFFFF;
background-color: #235A81;
}
</style>
<script type='text/javascript'>
function test() {
var table = document.getElementById("data");
var thead = table.getElementsByTagName("thead")[0];
var tbody = table.getElementsByTagName("tbody")[0];
var ishigh
tbody.onclick = function (e) {
e = e || window.event;
var td = e.target || e.srcElement
var row = td.parentNode;
if (ishigh&&ishigh!=row){
ishigh.className='';
}
row.className = row.className==="highlighted" ? "" : "highlighted";
ishigh=row;
getdata(row)
}
document.onkeydown = function(e){
e = e || event;
var code = e.keyCode, rowslim = table.rows.length - 2, newhigh;
if(code === 38){ //up arraow
newhigh = rowindex(ishigh) - 2;
if(!ishigh || newhigh < 0){return GoTo('data', rowslim);}
return GoTo('data', newhigh);
} else if (code === 40){ //down arrow
newhigh = rowindex(ishigh);
if(!ishigh || newhigh > rowslim){return GoTo('data', 0);}
return GoTo('data', newhigh);
}
}
function GoTo(id,nu){
var obj=document.getElementById(id),
trs=obj.getElementsByTagName('TR');
nu = nu + 1;
if (trs[nu]){
if (ishigh&&ishigh!=trs[nu]){
ishigh.className='';
}
trs[nu].className = trs[nu].className=="highlighted" ? "" : "highlighted";
ishigh=trs[nu];
}
getdata(trs[nu]);
}
function rowindex(row){
var rows = table.rows, i = rows.length;
while(--i > -1){
if(rows[i] === row){return i;}
}
}
function getdata(row) {
document.getElementById('firstname').value = row.cells[0].innerHTML;
document.getElementById('lastname').value = row.cells[1].innerHTML;
document.getElementById('age').value = row.cells[2].innerHTML;
document.getElementById('total').value = row.cells[3].innerHTML;
document.getElementById('discount').value = row.cells[4].innerHTML;
document.getElementById('diff').value = row.cells[5].innerHTML;
find_option('fname',row.cells[0].innerHTML)
}
}//end of nested function
function find_option(id,value) {
var sel = document.getElementById(id)
for (var i = 0; i < sel.length; i++){
//alert(sel.options[i].text+" "+sel.options[i].value)
if (sel.options[i].value == value) {
sel.selectedIndex = i;
return
}
}
}
</script>
</head>
<body>
<table id="data" cellspacing="1" border="1">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>diff</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>peter</span></td>
<td><span>parker</span></td>
<td><span>28</span></td>
<td><span>9.99</span></td>
<td><span>20.3%</span></td>
<td><span>+3</span></td>
</tr>
<tr>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>19.99</td>
<td>25.1%</td>
<td>-7</td>
</tr>
<tr>
<td>clark</td>
<td>kent</td>
<td>18</td>
<td>15.89</td>
<td>44.2%</td>
<td>-15</td>
</tr>
<tr>
<td>bruce</td>
<td>almighty</td>
<td>45</td>
<td>153.19</td>
<td>44%</td>
<td>+19</td>
</tr>
<tr>
<td>benjamin</td>
<td>evans</td>
<td>56</td>
<td>153.19</td>
<td>23%</td>
<td>+9</td>
</tr>
</tbody>
</table>
<br>
Firstname is:
<input type="text" id="firstname" />
<br>Lastname is:
<input type="text" id="lastname" />
<br>Age is:
<input type="text" id="age" />
<br>Total is:
<input type="text" id="total" />
<br>Discount is:
<input type="text" id="discount" />
<br>Diff is:
<input type="text" id="diff" />
<br>
<input type="button" value="testme" onclick="test()">
<br><br>
<select id="fname">
<option value="bruce">bruce</option>
<option value="clark">clark</option>
<option value="benjamin">benjamin</option>
</select>
</body>
</html>
Change this line:
var row = td.parentNode;
to:
var row = (td.tagName == "DIV") ? td.parentNode.parentNode : td.parentNode;
You can look at the elemet's tag name and determine whether the user has clicked on a TD or a SPAN, then adjust select the element's parent (the TD) if you have a span.
var td = e.target || e.srcElement
alert(td.tagName)
Alternately, you can add a CSS class name to all of your SPANS and then check to see if the selected element has that class name. If it does, it's a SPAN, if it doesn't, it's a TD.
I would also suggest using a DIV, not a SPAN.
I need your help.
With the help of existing javascript experts, I was able to create a table where a user could scoll to (using their up and down arrow keys) as well as to allow a user click on a row to select and highlight it.
Now comes time where i'd like to modify my existing function such that, whenever the user clicks on or uses their arrow keys to navigate to the selected row in the table, id like to pull the information (data) from the row and use it to populate the list of input boxes below. How could the javascript coding be modified so as to allow me to do this?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#mstrTable tr.normal td {
color: #235A81;
background-color: white;
}
#mstrTable tr.highlighted td {
color: #FFFFFF;
background-color: #235A81;
}
</style>
<script type='text/javascript'>
function test() {
var table = document.getElementById("mstrTable");
var thead = table.getElementsByTagName("thead")[0];
var tbody = table.getElementsByTagName("tbody")[0];
var ishigh;
tbody.onclick = function (e) {
e = e || window.event;
var td = e.target || e.srcElement
var row = td.parentNode;
if (ishigh&&ishigh!=row){
ishigh.className='';
}
row.className = row.className==="highlighted" ? "" : "highlighted";
ishigh=row;
}
document.onkeydown = function(e){
e = e || event;
var code = e.keyCode, rowslim = table.rows.length - 2, newhigh;
if(code === 38){ //up arraow
newhigh = rowindex(ishigh) - 2;
if(!ishigh || newhigh < 0){return GoTo('mstrTable', rowslim);}
return GoTo('mstrTable', newhigh);
} else if (code === 40){ //down arrow
newhigh = rowindex(ishigh);
if(!ishigh || newhigh > rowslim){return GoTo('mstrTable', 0);}
return GoTo('mstrTable', newhigh);
}
}
function GoTo(id,nu){
var obj=document.getElementById(id),
trs=obj.getElementsByTagName('TR');
nu = nu + 1;
if (trs[nu]){
if (ishigh&&ishigh!=trs[nu]){
ishigh.className='';
}
trs[nu].className = trs[nu].className=="highlighted" ? "" : "highlighted";
ishigh=trs[nu];
}
}
function rowindex(row){
var rows = table.rows, i = rows.length;
while(--i > -1){
if(rows[i] === row){return i;}
}
}
}//end of nested function
</script>
</head>
<body>
<table id="mstrTable" cellspacing="1" border="1">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>diff</th>
</tr>
</thead>
<tbody>
<tr>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>9.99</td>
<td>20.3%</td>
<td>+3</td>
</tr>
<tr>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>19.99</td>
<td>25.1%</td>
<td>-7</td>
</tr>
<tr>
<td>clark</td>
<td>kent</td>
<td>18</td>
<td>15.89</td>
<td>44.2%</td>
<td>-15</td>
</tr>
<tr>
<td>bruce</td>
<td>almighty</td>
<td>45</td>
<td>153.19</td>
<td>44%</td>
<td>+19</td>
</tr>
<tr>
<td>bruce</td>
<td>evans</td>
<td>56</td>
<td>153.19</td>
<td>23%</td>
<td>+9</td>
</tr>
</tbody>
</table>
<br>
Firstname is:
<input type="text" id="firstname" />
<br>Lastname is:
<input type="text" id="lastname" />
<br>Age is:
<input type="text" id="age" />
<br>Total is:
<input type="text" id="total" />
<br>Discount is:
<input type="text" id="discount" />
<br>Diff is:
<input type="text" id="diff" />
<br>
<input type="button" value="testme" onclick="test()">
</body>
</html>
You can write another function to populate necessary fields. Example:
function populateFields(row) {
el('firstname').value = row.cells[0].innerHTML;
el('lastname').value = row.cells[1].innerHTML;
el('age').value = row.cells[2].innerHTML;
el('total').value = row.cells[3].innerHTML;
el('discount').value = row.cells[4].innerHTML;
el('diff').value = row.cells[5].innerHTML;
}
// el() is shortcut for document.getElementById
Where you pass corresponding row to the function to get data from.
http://jsfiddle.net/dfsq/HDu8n/