Develop Reference

javascript function doesn't show html table

I tried to make a html table using java script
function CreateTable(data) {
alert(data);
/*
1 - Loop Through Array & Access each value
2 - Create Table Rows & append to table
*/
for (var i in data) {
var row = `<tr>
<td>${data[i].Billing_Count}</td>
<td>${data[i].Flag_Type}</td>
</tr>
`
var table = $("#table-body")
table.append(row)
}
}
and my html :
<div id="chartdiv">
<table id="our-table">
<thead>
<tr>
<th>میزان مصرف</th>
<th>نوع مشترک</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
</div>
i used the alert() in my js to see if my data can be read, and it was ok. but still there were no result in my web page and the table-body's div.
I also have no specific error

Two issues in your code:
You are missing the id symbol (#) in the selector, should be $("#table-body").
You have to close the row with </tr>.

You're missing a # in your selector.
$("#table-body") or document.querySelector("#table-body") will fix it.
https://codepen.io/Choppy/pen/eYzLMgL

issue 1: - while creating the row, you missed out the end tr tag
issue 2: - $("table-body") - # symbol was missing.
function CreateTable(data){
/*
1 - Loop Through Array & Access each value
2 - Create Table Rows & append to table
*/
for (var i in data){
var row = `<tr>
<td>${data[i].Billing_Count}</td>
<td>${data[i].Flag_Type}</td> </tr>
`
var table = $("#table-body");
table.append(row)
}
}
const data = [{Billing_Count: 'Count1', Flag_Type: 'Flap1'},
{Billing_Count: 'Count2', Flag_Type: 'Flap2'},
{Billing_Count: 'Count2', Flag_Type: 'Flap2'}]
CreateTable(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chartdiv">
<table id="our-table">
<thead>
<tr>
<th>میزان مصرف</th>
<th>نوع مشترک</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
</div>

how to get tbody header titles using with javascript jquery?

I am creating html table and getting table values using JavaScript.
How to get table header titles?
Date CAIFI
Jun-14 2.217
Jun-15 2.154
Jun-16 1.556
This is my table.
I wrote the code
var value = $("#whatifanalysisTable tbody tr:nth-child(1)").find("td:eq(1)").text();
alert(value);
getting value 2.217
but how to get table name with "Date" and "CAIFI"?

I added your version and changed version in snipped which is also mentioned by Rory in comments. Hope its helpfull.
tbody to thead
td to th
var value = $("#whatifanalysisTable tbody tr:nth-child(1)").find("td:eq(1)").text();
console.log(value);
var headerValue = $("#whatifanalysisTable thead tr:nth-child(1)").find("th:eq(1)").text();
console.log(headerValue);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tg" id="whatifanalysisTable">
<thead>
<tr>
<th class="tg-0lax">DATE</th>
<th class="tg-0lax">CAIFI</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Jun - 14</td>
<td class="tg-0lax">2.217</td>
</tr>
</tbody>
</table>

Using a variable to select a row from a html table

I'd like to use this code to select a particular row
var table = document.getElementById("mytable");
table.rows[0].cells[3].innerHTML = 'here';
and instead of entering the row number I want to put a variable holding a number inside so I can locate a specific row.
The number of rows on the table can change.
Is there any other way to do this?

var table = document.getElementById("mytable");
table.rows[0].cells[3].innerHTML = 'here';
<table id="mytable" border="2">
<tr>
<td>25</td>
<td>25</td>
<td>25</td>
<td>25</td>
</tr>
</table>

an easy way to get all the table rows from a table without using a loop

Is there an easy way to get all the table rows from a table without using a loop.
I thought that this would work but it only alerts the first row.
http://jsfiddle.net/THPWy/
$(document).ready(function () {
var O = $('#mainTable').find('tr');
//var O = $('#mainTable tr');
alert(O.html());
//alerts <th>Month</th><th>Savings</th>
});
<table id ="mainTable" border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
<tr>
<td>March</td>
<td>$50</td>
</tr>
<tr>
<td>a</td>
<td>$50</td>
</tr>
<tr>
<td>m</td>
<td>$50</td>
</tr>
<tr>
<td>j</td>
<td>$50</td>
</tr>
<tr>
<td>july</td>
<td>$50</td>
</tr>
<tr>
<td>aug</td>
<td>$50</td>
</tr>
<tr>
<td>sep</td>
<td>$50</td>
</tr>
</table>

Whatever you use will be iterating through each row to get the inner HTML out of it. So no, you cannot do it without a loop.
Here is an alternate method that gets the message in one line if that's what you're after, it's slightly less efficient than going with a loop though as it needs to make a new array.
jsFiddle
$(document).ready(function () {
var rows = $('#mainTable tr');
var message = $.map(rows, function (v) {
return v.innerHTML;
}).join('\n');
alert(message);
});
I would recommend just doing it in a regular loop.
FYI .html() only alerts the first row because that's what it was designed to do as that is what would be most useful.
Description: Get the HTML contents of the first element in the set of matched elements.

What about:
// get all tr (excluding the caption)
var O = $('table#mainTable').children().slice(1);
http://jsfiddle.net/THPWy/7/

What you have in your code already retrieves all table rows as an array of jQuery elements:
var trs = $('#mainTable').find('tr');
If you want to print the html contents of each row then you would have to use a loop:
trs.each(function (index, element) {
alert($(this).html());
});

You can get by using
gt(), lt(),eq()
.gt(index) // will get all the rows greater than specified index
.lt(index) // will get all the rows less than specified index
.eq(index) // will get all the rows equal to specified index
For Example
$('#mainTable tr').eq(1) will give second row
But when you want to know all the table rows data then go with Konstantin D - Infragistics solution

Hide a `tr` based on the values of `td` in the table using jQuery

I have table that is filled with dynamic content from a query from a database on the backend. I want to hide any tr that contains only zeros.
Here is what my table looks like:
<table id="table1" " cellspacing="0" style="width: 800px">
<thead id="tablehead">
</thead>
<tbody id="tabledata">
<tr class="odd">
<td>0</td>
<td>0</td>
<td>0</td>
<td>0.00%</td>
<td>0.00%</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
</tr>
</tbody>
Now if the first three td's in tbody are == 0 then I would like to add a class to the tr that will effectively hide that row. How would I go about doing this using jQuery?
EDIT:
Sorry forgot to add what I have tried. The following is a test script I tried to see if I could collect all the td's
$(document).ready(function() {
$("#table1 td").filter(function() {
return $(this).text == 0;
}).css("text-color", "red");
});

You can do this :
$('tr').each(function(){
var tr = $(this);
if (tr.find('td:eq(0)').text()=="0"
&& tr.find('td:eq(1)').text()=="0"
&& tr.find('td:eq(2)').text()=="0"
) tr.addClass('hidden');
});
Demonstration (the hidden class changes the color to red, it's clearer...)
Depending on your need, you might have to trim the texts, or to parse them.
For more complex tests, you might find useful to work directly with an array of the cell contents. You can get it using
var celltexts = tr.find('td').map(function(){return $(this).text()}).toArray();