it was working on when i split them into two but when i combine them the save button isnt working i tried changing the document.getElementById to document.getElementByClassName but it stops the function of both here is the code
<html>
<head>
<body>
<div class="container">
<table class="table table-hover table-bordered" id = "table1">
<thead>
<tr>
<th><center>Item Name</center> </th>
<th><center>Brand</center> </th>
<th><center>Selling Price</center> </th>
<th><center>Quantity</center> </th>
</tr>
</thead>
<tbody id = tbody1>
<tr>
<td>Cake</td>
<td>Pastry</td>
<td>100</td>
<td>5</td>
</tr>
<tr>
<td>Wat</td>
<td>But</td>
<td>100</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<table class="table table-hover table-bordered" id = "table2">
<thead>
<tr>
<th><center>Item Name</center> </th>
<th><center>Brand</center> </th>
<th><center>Selling Price</center> </th>
<th><center>Quantity</center> </th>
</tr>
</thead>
<tbody id = "myNewTableBody" class = "tbody2">
<tr class = "tr2">
</tr>
</tbody>
</table>
</div>
<input type = "submit" value = "save" name = "btnsave" onclick = "myFunction()" style = "position : absolute; top : 550px; left : 20px; font-size: 20px;"/></input>
</body>
<script>
var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
e = e || window.event;
var data = [];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") {
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
data.push(cells[i].innerHTML);
}
}
var trnode = document.createElement("tr");
for(var i = 0; i < data.length; i++){
var tdnode = document.createElement("td");
var textnode = document.createTextNode(data[i]);
tdnode.appendChild(textnode);
trnode.appendChild(tdnode);
}
document.getElementById("myNewTableBody").appendChild(trnode);
};
function myFunction() {
var rows = document.getElementById("table2")
.getElementsByClassName("tbody2")
[0].getElementsByClassName("tr2").length;
var a = 1;
var b = 1;
for(var i = 0; i < rows; i++){
var x =
document.getElementById("table2").rows[a].cells.item(0).innerHTML
var y =
document.getElementById("table2").rows[a].cells.item(4).innerHTML
var a = a + 1;
var b = b + 1;
alert(x);
alert(y);
}
}
</script>
<html>
<head>
heres the seperate code of the save button that's working
<html>
<head>
<body>
<div class="container">
<table id = "table1">
<thead>
<tr>
<th><center>ID</center> </th>
<th><center>Item Name</center> </th>
<th><center>Category</center> </th>
<th><center>Selling Price</center> </th>
<th><center>Quantity</center> </th>
</tr>
</thead>
<tbody class = "tbody2">
<tr class = "tr2">
<td>1</td>
<td>Cake</td>
<td>Pastry</td>
<td>100</td>
<td>5</td>
</tr>
<tr class = "tr2">
<td>2</td>
<td>Bread</td>
<td>Pastry</td>
<td>5</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
<input type = "submit" value = "save" name = "btnsave"
onclick = "myFunction()" /></input>
</body>
<script>
function myFunction() {
var rows = document.getElementById("table1")
.getElementsByClassName("tbody2")[0]
.getElementsByClassName("tr2").length;
var a = 1;
var b = 1;
for(var i = 0; i < rows; i++){
var x = document.getElementById("table1").rows[a].cells.item(0).innerHTML
var y = document.getElementById("table1").rows[a].cells.item(4).innerHTML
var a = a + 1;
var b = b + 1;
alert(x);
alert(y);
}
}
</script>
</html>
In this code, second table, table with id table2 is empty. When you take, first column, in it's second row(table body), you get a null. Then you trying to access innerHTML property on a null element. Add some content to table2 and run check it again.
Again same problem comes when you say, document.getElementById("table2").rows[a].cells.item(4).innerHTML. Here you are trying to access 5th cell of a row, which contains only 4 cells.
Related
I am trying to make a data table from user input. i found out this solution that i am making objects from user input and pushing them to an array. after that, I am doing a for loop to make td. but somehow those datas are not coming line by line but they are coming side by side. what I am doing wrong here and every time I am refreshing the page the array is getting empty how to prevent this help me out tnx.
const form = document.getElementById("form");
const carDatas = [];
class Car {
constructor(plate, carMaker, carModel, carOwner, carPrice, carColor) {
(this.plate = plate),
(this.carMaker = carMaker),
(this.carModel = carModel),
(this.carOwner = carOwner),
(this.carPrice = carPrice),
(this.carColor = carColor);
}
}
form.addEventListener("submit", (e) => {
const plate = document.getElementById("plate").value;
const carMaker = document.getElementById("carMaker").value;
const carModel = document.getElementById("carModel").value;
const carOwner = document.getElementById("carOwner").value;
const carPrice = document.getElementById("carPrice").value;
const carColor = document.getElementById("carColor").value;
const carDetails = new Car(
plate,
carMaker,
carModel,
carOwner,
carPrice,
carColor
);
carDatas.push(carDetails);
console.log(carDetails);
for (let i = 0; i < carDatas.length; i++) {
document.getElementById(
"data"
).innerHTML = ` <td>${carDatas[i].plate} </td>
<td>${carDatas[i].carMaker} </td>
<td>${carDatas[i].carModel} </td>
<td>${carDatas[i].carOwner} </td>
<td>${carDatas[i].carPrice} </td>
<td>${carDatas[i].carColor} </td>`;
}
e.preventDefault();
});
and here is my HTML for the table
<div class="database">
<h1>Cars Database</h1>
<table>
<tr>
<th>LICENCE</th>
<th>MAKER</th>
<th>MODEL</th>
<th>OWNER</th>
<th>PRICE</th>
<th>COLOR</th>
</tr>
<tr id="data"></tr>
</table>
</div>
<pre>This is what I recommend I changed your code to add <tr></tr> to each line that's to be created and wrap your <tr> inbetween and tbody tag and use the first line has a head.</pre>
<pre>For the code:</pre>
<code>
for (let i = 0; i < carDatas.length; i++) {
document.getElementById(
"data"
).innerHTML = `<tr><td>${carDatas[i].plate} </td>
<td>${carDatas[i].carMaker} </td>
<td>${carDatas[i].carModel} </td>
<td>${carDatas[i].carOwner} </td>
<td>${carDatas[i].carPrice} </td>
<td>${carDatas[i].carColor} </td> </tr>`;
}
e.preventDefault();
<body>
<div class="database">
<h1>Cars Database</h1>
<table>
<thead>
<tr>
<th>LICENCE</th>
<th>MAKER</th>
<th>MODEL</th>
<th>OWNER</th>
<th>PRICE</th>
<th>COLOR</th>
</tr>
</thead>
<tbody id="data"> <tbody>
</table>
</div>
</body>
</code>
I try to get datatable footer sum in a Label out of th footer in HTML using javascript
here is the code
<table id="tbldata" class="table table-bordered table-striped table-responsive" style="width:100%">
<thead>
<tr>
<th>Investigation.</th>
<th>Rs.</th>
<th style="width:5%">Delete.</th>
</tr>
</thead>
#foreach (investigationonly p in Model.investigationonly)
{
<tbody>
<tr>
<td>
#p.investigation
</td>
<td class="countable">
#p.price
</td>
<td style="width:5%">
Delete
</td>
</tr>
</tbody>
}
<tfoot>
<tr>
<th colspan="3" style="text-align:right">Total:<label id="lbltotal"></label></th>
</tr>
</tfoot>
</table><label id="txttotalpayble"></label>
Here is a screenshot of table working in footer successfully
as you can see its showing total sum in the footer but I try to show in label also
here is the javascript function
<script>
var cls = document.getElementById("tbldata").getElementsByTagName("td");
var sum = 0;
for (var i = 0; i < cls.length; i++) {
if (cls[i].className == "countable") {
sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
}
}
document.getElementById("lbltotal").innerHTML = sum;
document.getElementById("txttotalpayble").innerHTML = sum;
I solved the problem my self problem is simple and the solution is very simple.
I just change Inner.html to value
<script>
var cls = document.getElementById("tbldata").getElementsByTagName("td");
var sum = 0;
for (var i = 0; i < cls.length; i++) {
if (cls[i].className == "countable") {
sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
}
}
document.getElementById("lbltotal").innerHTML = sum;
document.getElementById("txttotalpayble").value = sum;
Here are code and its working fine as I expected.
I was trying to make a search function using pure javascript . I have a small code snippet to work on . But this does not work if we have inner tables in multiple tr. How we can achieve this ?
<!DOCTYPE html>
<html>
<head></head>
<body>
<input type="text" size = "4" id="myInput" onkeyup="myFunction()">
<table id="myTable">
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>
Why this script function is not working if my HTML is like below
<table id="myTable">
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>USA</td>
</tr>
<tr>
<td>UK</td>
</tr>
</table>
</td>
</tr>
</table>
You can check the contents of each td to see if it contains a table and then recursively check that table to see if its contents should be shown or not. I've done it here with some of your code, but I'd break the functions up even further.
This code returns a boolean representation of whether the inner table is completely hidden or not to use as part of the logic to hide the rows that contain inner tables. If the inner tables are hidden but another element in the row is not, the inner table rows are shown again.
function myFunction() {
const input = document.getElementById("myInput"),
filter = input.value.toUpperCase(),
table = document.getElementById("myTable");
filterTableRows(table, filter)
}
function filterTableRows(table, filter) {
const rows = table.getElementsByTagName('tr');
let hiddenRows = 0;
for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
let show = false;
const columns = rows[rowIndex].getElementsByTagName('td');
for (let columnIndex = 0; columnIndex < columns.length; columnIndex++) {
const innerTables = columns[columnIndex].getElementsByTagName('table');
if (innerTables.length) {
for (let tableIndex = 0; tableIndex < innerTables.length; tableIndex++) {
if ( ! filterTableRows(innerTables[tableIndex], filter)) {
show = true;
}
}
} else {
let txtValue = columns[columnIndex].textContent || columns[columnIndex].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
show = true;
}
}
}
if (show) {
rows[rowIndex].style.display = "";
for (let columnIndex = 0; columnIndex < columns.length; columnIndex++) {
const innerTables = columns[columnIndex].getElementsByTagName('table');
if (innerTables.length) {
for (let tableIndex = 0; tableIndex < innerTables.length; tableIndex++) {
showTable(innerTables[tableIndex]);
}
}
}
} else {
rows[rowIndex].style.display = "none";
hiddenRows++;
}
}
return hiddenRows == rows.length;
}
function showTable(table) {
const rows = table.getElementsByTagName('tr');
for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
rows[rowIndex].style.display = "";
}
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<input type="text" size="4" id="myInput" onkeyup="myFunction()">
<table id="myTable">
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Pierre Truffant</td>
</tr>
</table>
</td>
<td>France</td>
</tr>
</table>
</body>
</html>
I have a table with dynamically generated content. Each row comes with a button that is meant to serve that row. In my case I want my button's outerHTML to adopt the name of the name on its row.
I am having trouble assigning this to my onclick event. As is, clicking either button will only repeat the name on the first row. I am unsure of the exact proper syntax for getting the button to change to its appropriate row name.
var erray = ["Todd", "Bill", "Sam"];
var pname = document.querySelectorAll('.pname');
var adoptname = document.querySelectorAll('.adoptname');
for (var i = 0; i < erray.length; i++){
var adoptname = document.querySelectorAll('.adoptname');
pname[i].innerText = erray[i];
adoptname[i].onclick = adoption;
function adoption(){
for (var i = 0; i < pname.length; i++)
this.outerHTML = pname[i].innerHTML;
}
}
table { border: 1px solid black; }
<table>
<thead><tr>
<th>Name</th>
<th>Adopt</th>
</tr></thead>
<tbody>
<tr><td class="pname"></td><td><button class="adoptname">Adopt</button></td></tr>
<tr><td class="pname"></td><td><button class="adoptname">Adopt</button></td></tr>
</tbody>
</table>
Consider your html is like this;
<table>
<thead>
<th>Name</th>
<th>Adopt</th>
</thead>
<tbody id="table_body">
</tbody>
</table>
Now look at the js
var array=["Todd","Bill","Sam"];
var html="";
for(var i=0;i<array.length;i++)
{
html=html+"<tr><td>"+array[i]+"</td><td><button id=\"adopt-"+array[i]+"\">Adopt</button>";
}
$("#table_body").html(html);
Now look at the click event;
$("#table_body").on("click","[id^=adopt]",function(){
var id=$(this).attr("id");
var name=id.split("-")[1];
alert(name);
})
<table>
<thead><tr>
<th>Name</th>
<th>Adopt</th>
</tr></thead>
<tbody id="table_body">
<tr><td class="pname"></td><td><button class="adoptname">Adopt</button></td></tr>
<tr><td class="pname"></td><td><button class="adoptname">Adopt</button></td></tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
window.onload=function()
{
var array=["Todd","Bill","Sam"];
for(var i=0;i<array.length;i++)
{
$("#table_body tr:nth-child("+(i+1)+") .pname").html(array[i]);
$("#table_body tr:nth-child("+(i+1)+") .adoptname").attr("id","adopt-"+array[i]);
}
$("#table_body").on("click","[id^=adopt]",function(){
var id=$(this).attr("id");
var name=id.split("-")[1];
alert(name);
});
}
</script>
i need help guys i want to know how to transfer a table row value into another table row using onclick already know how to get the value using the onclick but dont know how to transfer the values into the table
<html>
<body>
<table class='list'>
<thead>
<tr>
<th class='idno'>ID No.</th>
<th class='itemn'>Item</th>
<th class='quant'>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Chocolate</td>
<td>99</td>
</tr>
<tr>
<td>2</td>
<td>Bread</td>
<td>99</td>
</tr>
</tbody>
</table>
<script>
var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
e = e || window.event;
var data = [];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") {
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
data.push(cells[i].innerHTML);
}
}
alert(data);
};
</script>
</body>
</html>
You need to create some nodes. Create a <tr> first. Then loop the following: create a <td>, then a text node from the data that you have already collected, append the text into the <td> then the <td> into the <tr> and repeat the loop. Finally append the <tr> to the table body. Run the code snippet below.
<html>
<body>
<table class='list'>
<thead>
<tr>
<th class='idno'>ID No.</th>
<th class='itemn'>Item</th>
<th class='quant'>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Chocolate</td>
<td>99</td>
</tr>
<tr>
<td>2</td>
<td>Bread</td>
<td>99</td>
</tr>
</tbody>
</table>
<br><br>
MY NEW TABLE
<table class='list'>
<thead>
<tr>
<th class='idno'>ID No.</th>
<th class='itemn'>Item</th>
<th class='quant'>Quantity</th>
</tr>
</thead>
<tbody id='myNewTableBody'></tbody>
</table>
<script>
var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
e = e || window.event;
var data = [];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") {
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
data.push(cells[i].innerHTML);
}
}
var trnode = document.createElement("tr");
for(var i = 0; i < data.length; i++){
var tdnode = document.createElement("td");
var textnode = document.createTextNode(data[i]);
tdnode.appendChild(textnode);
trnode.appendChild(tdnode);
}
document.getElementById("myNewTableBody").appendChild(trnode);
alert(data);
};
</script>
</body>
</html>
I have modified your code, look into this
var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
// get other table you want to insert in
var t2 =document.getElementById("othertable");
tbody.onclick = function (e) {
e = e || window.event;
var data = [];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") {
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td");
//insert at zero index
var tr = t2.insertRow(0)
for (var i = 0; i < cells.length; i++) {
data.push(cells[i].innerHTML);
var cell = tr.insertCell(i);
cell.innerHTML = cells[i].innerHTML;
}
}
alert(data);
};
<table class='list'>
<thead>
<tr>
<th class='idno'>ID No.</th>
<th class='itemn'>Item</th>
<th class='quant'>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Chocolate</td>
<td>99</td>
</tr>
<tr>
<td>2</td>
<td>Bread</td>
<td>99</td>
</tr>
</tbody>
</table>
<hr/>
<table id="othertable"></table>