Table content replaced with new one in JavaScript - javascript

If I click on the submit button, then insert new cell, and click more than one time cells inserts again and again in a table i want to only add items only one time in table not again and again.
i want to call clear previous data and add new one when call fillTable().
my code is below here
<html>
<body>
<input type="button" onclick="fillTable()" value="submit">
<div id="out" >
<h2>Results are</h2>
<table id="tblData" border="1">
<tr>
<th>Name</th>
<th>Share</th>
</tr>
</table>
</div>
<script>
function fillTable(){
clearCells(); // clear previous
var tableRef = document.getElementById("tblData");
var rowcount = tableRef.rows.length;
var newRow = tableRef.insertRow(rowcount);
// Insert a cell in the row at index 0
var newCell = newRow.insertCell(0);
var newCell2 = newRow.insertCell(1);
var newText1 = document.createTextNode("Hello");
var newText2 = document.createTextNode("12000");
newCell.appendChild(newText1);
newCell2.appendChild(newText2);
newCell.appendChild(newText1);
newCell2.appendChild(newText2);
}
function clearCells(){
var tableRef = document.getElementById("tblData");
tableRef.deleteCell(0);
tableRef.deleteCell(1);
}
</script>
</body>
</html>

your problem was in your clearCell method, I fixed it for you:
function clearCells(){
var tableRef = document.getElementById("tblData");
if(tableRef.rows.length > 1){
tableRef.deleteRow(1);
}
}

Related

How to add a row with data into html table using array, function partly working

I would appreciate the help. I am trying to add new rows into a html table, where on click button, it adds row at random. My add function is not able to add the data from the array to row but creates the rows.
HTML Code
<!DOCTYPE html>
<html>
<head>
<script src="./javascript1.js"></script>
</head>
<body>
<table id="member">
<tr>
<th>Name</th><th>Email</th><th>Remove</th>
</tr>
<tr>
<td>Iza K</td><td>iza#mail.com</td><td><button type="button" onclick="deleteRow(this)">Delete</button></td>
</tr>
<tr>
<td>Mima T</td><td>mimat#mail.com</td><td><button type="button" onclick="deleteRow(this)">Delete</button></td>
</tr>
</table>
<button type="button" onclick="addFunction()">Click Me!</button>
JavaScript Code
// function deleteRow(r) {
// var i = r.parentNode.parentNode.rowIndex;
// document.getElementById("member").deleteRow(i);
// }
}
var dataArray = [{
name: "Brandon I",
email: "b.i#mail.com",
remove: "<button type='button' onclick='deleteRow(this)'>Delete</button>"
}, {
name: "John Bishops",
email: "johnb#mail.com",
remove: "<button type='button' onclick='deleteRow(this)'>Delete</button>"
}];
// need to add to select user at random when clicked add button
const randomElement = dataArray[Math.floor(Math.random() * dataArray.length)];
function addFunction()
{
var table = document.getElementById('members');
for (var i = 0; i < dataArray.length; i++)
{
var row = table.insertRow(-1);
var name = row.insertCell(0);
var email = row.insertCell(1);
var remove = row.insertCell(2);
name.innerHTML = dataArry[0];
email.innerHTML = dataArray[0];
remove.innerHTML = dataArray[0];
}
}
First of all, u have typo on getElementById() void, it should be .member rather than .members. After your randomElement variable needs to be into your function, otherwise return value of this variable will be always the same. And finally, you can directly access your properties object dataArray thanks to randomElement variable in order to set your content.
Complete code :
let dataArray = [{
name: "Brandon I",
email: "b.i#mail.com",
remove: "<button type='button' onclick='deleteRow(this)'>Delete</button>"
}, {
name: "John Bishops",
email: "johnb#mail.com",
remove: "<button type='button' onclick='deleteRow(this)'>Delete</button>"
}];
function addFunction()
{
// need to add to select user at random when clicked add button
const randomElement = dataArray[Math.floor(Math.random() * dataArray.length)];
var table = document.getElementById('member');
var row = table.insertRow(-1);
var name = row.insertCell(0);
var email = row.insertCell(1);
var remove = row.insertCell(2);
name.innerHTML = randomElement.name;
email.innerHTML = randomElement.email;
remove.innerHTML = randomElement.remove;
}
<html>
<head>
</head>
<body>
<table id="member">
<tr>
<th>Name</th><th>Email</th><th>Remove</th>
</tr>
<tr>
<td>Iza K</td><td>iza#mail.com</td><td><button type="button" onclick="deleteRow(this)">Delete</button></td>
</tr>
<tr>
<td>Mima T</td><td>mimat#mail.com</td><td><button type="button" onclick="deleteRow(this)">Delete</button></td>
</tr>
</table>
<button type="button" onclick="addFunction()">Click Me!</button>
</body>
</html>

Changing JavaScript code to jQuery of my own script

I need a help on changing the JavaScript code to jQuery of my own code.
TASK:
When I click the '+' button on the tree, it shows/adds a new row to the table also the button changes to '-'(minus). After that, again I click on the minus(-) button, it hides the row.
The above task is done in javascript. I need to convert it to jQuery. Is it possible? If yes means, please help me. Thanks in advance.
The code is as follows:
<html>
<head>
<title>Appending table row in a table</title>
<script language = "javascript">
function changeImage(that,x)
{
var clickedrow = document.getElementById("append"+x);
var subrow = document.getElementById("append"+x+"a");
var table = document.getElementById("mytable");
if(that.src === "http://renko-server/sample/arun/jquery/images/plus.gif")
{
that.src = "http://renko-server/sample/arun/jquery/images/minus.gif";
if(subrow)
{
subrow.style.display="";
}
else
{
subrow = table.insertRow(clickedrow.rowIndex+1);
subrow.id="append"+x+"a";
var cell1 = subrow.insertCell(0);
var cell2 = subrow.insertCell(1);
var cell3 = subrow.insertCell(2);
cell1.innerHTML = "";
cell2.innerHTML = "Kumar";
cell3.innerHTML = "Madurai";
}
}
else
{
that.src = "http://renko-server/sample/arun/jquery/images/plus.gif";
subrow.style.display="none";
}
}
</script>
</head>
<body>
<table id="mytable" class="appendtable">
<tr><td></td><td><b>Name</b></td><td><b>Location</b></td></tr>
<tr id="append1"><td><img id="plus1" onclick="javascript:changeImage(this,1);" src="http://renko-server/sample/arun/jquery/images/plus.gif" / ></td><td>Arun</td><td>Sivakasi</td></tr>
<tr id="append2"><td><img onclick="javascript:changeImage(this,2);" id="plus2" src="http://renko-server/sample/arun/jquery/images/plus.gif"/></td><td>Raj</td><td>Kovai</td></tr>
<tr id="append3"><td><img id="plus3" src="http://renko-server/sample/arun/jquery/images/plus.gif" onclick="javascript:changeImage(this,3);"/></td><td>Jerome</td><td>Bangalore</td></tr>
</table>
</body>
</html>
change you html like this:-
<table id="mytable" class="appendtable">
<tr><td></td><td><b>Name</b></td><td><b>Location</b></td></tr>
<tr id="append1"><td><img id="plus1" onclick="changeImage(this);" src="http://renko-server/sample/arun/jquery/images/plus.gif" /> ></td><td>Arun</td><td>Sivakasi</td></tr>
// ^^^ this is change
<tr id="append2"><td><img onclick="changeImage(this);" id="plus2" src="http://renko-server/sample/arun/jquery/images/plus.gif" /></td><td>Raj</td><td>Kovai</td></tr>
<tr id="append3"><td><img id="plus3" src="http://renko-server/sample/arun/jquery/images/plus.gif" onclick="javascript:changeImage(this);" /></td><td>Jerome</td><td>Bangalore</td></tr>
</table>
and your jquery function is:-
function changeImage(that) {
var clickedrow = $(that);
var subrow = $('#' + clickedrow.attr('id') + 'a');
var table = $("#mytable");
if (clickedrow.attr('src') === "http://renko-server/sample/arun/jquery/images/plus.gif") {
clickedrow.attr('src', "http://renko-server/sample/arun/jquery/images/minus.gif");
if (subrow.length) {
subrow.show();
}
else {
subrow = $('<tr><td></td><td>Kumar</td><td>Madurai</td></tr>').insertAfter(clickedrow.parents('tr'));
}
}
else {
clickedrow.attr('src', "http://renko-server/sample/arun/jquery/images/plus.gif");
subrow.hide();
}
}
Demo
Or if you don't want to use onclick direct on image Try this

How to add row to the beginning of table using javascript

I clone a row and append it to the end of a table the following function add_record().
My question is how to append it to the beginning of the table.
I tried using
$("#main_table_id tbody").prepend(clone)
and
$("#main_table_id tbody").prepend(clone.innerHtml)
but it didn't work.
function add_record(){
var row = document.getElementById("template_no_1_id");
var table = document.getElementById("main_table_id");
var clone = row.cloneNode(true);
clone.id = "newID";
table.appendChild(clone);
}
Use native function insertRow.
<table id="TableA">
<tr>
<td>Old top row</td>
</tr>
</table>
<script type="text/javascript">
function addRow(tableID) {
// Get a reference to the table
var tableRef = document.getElementById(tableID);
// Insert a row in the table at row index 0
var newRow = tableRef.insertRow(0);
// Insert a cell in the row at index 0
var newCell = newRow.insertCell(0);
// Append a text node to the cell
var newText = document.createTextNode('New top row');
newCell.appendChild(newText);
}
// Call addRow() with the ID of a table
addRow('TableA');
</script>
Credit: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement.insertRow

Trouble with setting id for dynamically generated table

Never mind. This was my mistake. This code works fine.
I have a function that's supposed to create and populate a table. I'm also trying to set the id element of some of the columns, but the function that I have isn't working and I can't seem to figure out why.
This is my code:
HTML:
<div id="result_table">
<table border="0" cellspacing="3" cellpadding="3" id="summaryTable" class="tablesorter table table-striped">
<thead>
<tr style="font-weight: bold; text-align: center;">
<th>Well ID</th>
<th>Dominant Gene</th>
<th>%</th>
<th>Secondary Gene</th>
<th>%</th>
<th>No. of Reads that Mapped</th>
<th>No. of Mutations</th>
<th>Mutation Information</th>
<th>View</th>
</tr>
</thead>
<tbody id="summaryBody">
</tbody>
</table>
</div>
Javascript:
function structureTable(test){
if (kiloseqResult==null){
throw "Error: no databse defined"
};
document.getElementById("summaryTable").style.visibility="visible";
kiloseqDatabase = JSON.parse(kiloseqResult);
var table = document.getElementById("summaryBody");
for (i=0;i<kiloseqDatabase.length;i++){
var row = table.insertRow(i);
var kiloseqKeys = Object.keys(kiloseqDatabase[i])
var keyLength = Object.keys(kiloseqDatabase[i]).length;
// Painstakingly setting up the cells...
var cell = row.insertCell(0);
cell.innerHTML = kiloseqDatabase[i]['id']
var cell = row.insertCell(1);
cell.innerHTML = kiloseqDatabase[i]['gene1'].substr(5)
var cell = row.insertCell(2);
cell.innerHTML = parseFloat(kiloseqDatabase[i]['percent1']).toFixed(2)
var cell = row.insertCell(3);
if (kiloseqDatabase[i]['gene2']=="None"){
cell.innerHTML = "None"
} else {
cell.innerHTML = kiloseqDatabase[i]['gene2'].substr(5)
}
var cell = row.insertCell(4);
cell.innerHTML = parseFloat(kiloseqDatabase[i]['percent2']).toFixed(2)
var cell = row.insertCell(5);
cell.innerHTML = kiloseqDatabase[i]['count']
var cell = row.insertCell(6);
cell.innerHTML = ""
var cell = row.insertCell(7);
cell.innerHTML = ""
var cell = row.insertCell(8);
cell.innerHTML = ""
};
$(document).ready(function()
{
$("#summaryTable").tablesorter(
{sortList: [[0,0], [1,0]]}
);
}
);
for (i=0;i<kiloseqDatabase.length;i++){
document.getElementById("summaryBody").rows[i].cells[6].id = "test";
};
};
kiloseqResult is a variable that checks whether kiloseqDatabase is populated. kiloseqDatabase contains the information that's supposed to populate the table.
Oddly enough, the for-loop that sets up the ID (and yes, I did try including this in the first for-loop but tried breaking it up when that didn't work) is fine when I run it in my Chrome's console. But it doesn't seem to work within the function.
Any help would be much appreciated. Thank you!
Have you tried putting your ID assignment logic within the document.ready scope? You can't assign an ID to an element or select it from the DOM before it's rendered:
$(document).ready(function()
{
$("#summaryTable").tablesorter(
{sortList: [[0,0], [1,0]]}
);
for (i=0;i<kiloseqDatabase.length;i++){
document.getElementById("summaryBody").rows[i].cells[6].id = "test";
};
}
);

Dynamics table creator Or <td> <tr> creator

If i have a table with 5 rows and 4 column.but i have to add values on the next row.there is no database related dependency.I have ADD button and i want to code it like when ever i will click on ADD button there is aaddition of new row.......
I mean the creaton of Rows in the table willbe dynamically...
Can ayy one sho me any sample code /Link on
http://jsfiddle.net/ or just give me any Url that contains the demo code for that
See this tutorial. It show how to add new row and column.
I don't know how to do on jsFiddle but made one demo on my machine and is as follows:
<html>
<head>
<title>Demo</title>
<script>
function appendRow(tblId)
{
var tbl = document.getElementById(tblId);
var newRow = tbl.insertRow(tbl.rows.length);
var newCell = newRow.insertCell(0);
newCell.innerHTML = 'Hello World!';
}
</script>
</head>
<body>
<table id="tabl" border="1">
<tr>
<td>Old one</td>
</tr>
</table>
<input type="button" value="AddRow" onClick="appendRow('tabl')">
</body>
It might be help full JQuery add row in to table
Here you go:
http://jsfiddle.net/dgMET/1/
var table = document.getElementById("table");
var row = table.insertRow(table.rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(0);

Categories