When adding columns dynamically how can I set the <th>'s in a grids header.
<vaadin-grid id="grid">
<table>
<colgroup>
</colgroup>
<thead>
<tr>
<th>adfdfa</th>
<th>adfdfa</th>
</tr>
</thead>
</table>
</vaadin-grid>
_addCols: function() {
var inputs = this.selectedForm.inputs;
var grid = this.$.grid;
grid.columns = [];
for(var i = 0; i < inputs.length; i++) {
var input = inputs[i];
grid.addColumn({name: input.$key}, i);
}
},
No matter found this in the docs.
grid.header.getCell(0, 0).content = 'Project Name';
Documentation
Related
How do i make the table below to be hidden until i search content from the search bar? i want the table to not show until the table is filtered with the search bar
<html>
<div class="students">
Students
<input type="text" id="studsearch" onkeyup="StudentSearch()" placeholder="Search Student Number">
<body>
<table border ="1" cellpadding="0" id="studtable">
<tr>
<th>Student No.</th>
<th>Full Name</th>
</tr>
<tr id="stud1">
<td>1</td>
<td>John</td>
</tr>
<tr id="stud2">
<td>2</td>
<td>Mike</td>
</tr>
</table>
</body>
</div>
<script>
function StudentSearch() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("studsearch");
filter = input.value.toUpperCase();
table = document.getElementById("studtable");
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 = "";
foundHit = true;
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</html>
Im expecting the table to be hidden until searched
To hide the table initially and only show it when there is a search result, you can add a CSS style to the table element to set its initial display to "none". Then, modify your JavaScript code to show the table only when there is at least one search result.
You can try this:
<html>
<head>
<style>
#studtable {
display: none;
}
</style>
</head>
<body>
<div class="students">
Students
<input type="text" id="studsearch" onkeyup="StudentSearch()" placeholder="Search Student Number">
</div>
<table border="1" cellpadding="0" id="studtable">
<tr>
<th>Student No.</th>
<th>Full Name</th>
</tr>
<tr id="stud1">
<td>1</td>
<td>John</td>
</tr>
<tr id="stud2">
<td>2</td>
<td>Mike</td>
</tr>
</table>
<script>
function StudentSearch() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("studsearch");
filter = input.value.toUpperCase();
table = document.getElementById("studtable");
tr = table.getElementsByTagName("tr");
var foundHit = false;
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 = "";
foundHit = true;
} else {
tr[i].style.display = "none";
}
}
}
if (foundHit) {
table.style.display = "";
} else {
table.style.display = "none";
}
}
</script>
</body>
</html>
With this code, the table will be hidden when the page first loads. Only when there is at least one search result, the table will be shown.
Add a css style to hide the table
table {
display: none;
}
Assuming there is a filter button/ search button
<input type="text" id="filter-input">
<button id="filter-button">Filter</button>
Add an event listener to the filter button that will show the table and filter its content when clicked,
//Filtering
const filterButton = document.getElementById("filter-button");
filterButton.addEventListener("click", function() {
// Get the filter criteria from the input field
const filter = document.getElementById("filter-input").value;
// Filter the table rows based on the criteria
const tableRows = document.getElementsByTagName("tr");
for (let i = 0; i < tableRows.length; i++) {
const row = tableRows[i];
const cells = row.getElementsByTagName("td");
let shouldShowRow = false;
for (let j = 0; j < cells.length; j++) {
const cell = cells[j];
if (cell.textContent.includes(filter)) {
shouldShowRow = true;
break;
}
}
if (shouldShowRow) {
row.style.display = "";
} else {
row.style.display = "none";
}
}
// Show the table
const table = document.getElementsByTagName("table")[0];
table.style.display = "";
});
I am trying to print a 2-d array that i get from an http request to the variable value using this code
<table style="width:100%">
<tr>
<th>Name</th>
<th>Age</th>
<th>School</th>
</tr>
<script>
var x ="", i;
var y ="", j;
for (i=0; i<value.length; i++) {
x ="<tr>" +
for (j=0; j<3; j++){
y = "<td>" + {{ value[i][j] }} + "</td>";
}
+ "</tr>";
}
</script>
</table>
Any ideas why it isn't working? :P
Tag <script> not displayed in any way, you need to use JavaScript methods for DOM manipulation
const values = [
["name1", "age1", "school1"],
["name2", "age2", "school2"],
];
const tbody = document.querySelector("tbody");
for (let i = 0; i < values.length; i++) {
const tr = document.createElement("tr");
const fields = values[i];
for (let j = 0; j < fields.length; j++) {
const field = fields[j];
const td = document.createElement("td");
td.textContent = field;
tr.appendChild(td);
}
tbody.appendChild(tr);
}
<table style="width: 100%;">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>School</th>
</tr>
</thead>
<tbody></tbody>
</table>
You are trying to concatenate string with a for loop. You cannot do that. Also, declare i and j variables inside the for loop so they are automatically removed when the loop is done. You do not need the y variable because you can create a long string as x and then use it as innerHTML somewhere. Lastly, the value array was incorrectly used. {} is used to create an object. For example var b = {}; When you want to actually use the object, you refer to it by its name, but you said you have an array already.
<script>
var x ="";
for (var i=0; i<value.length; i++) {
x +="<tr>";
for (var j=0; j<value[i].length; j++){
x += "<td>" + value[i][j] + "</td>";
}
x += "</tr>";
}
//use your output x variable here
</script>
I am having some issues on <tr> background color, having the same <tr id="">
Here is my Table.
<table class="table">
<tr id="2552">
<td>Roll No 1</td>
<td>800</td>
</tr>
<tr id="2552">
<td>Roll No 1</td>
<td>700</td>
</tr>
<tr id="4444">
<td>Roll No 11</td>
<td>800</td>
</tr>
<tr id="4444">
<td>Roll No 11</td>
<td>900</td>
</tr>
<tr id="7676">
<td>Roll No 12</td>
<td>800</td>
</tr>
<tr id="7676">
<td>Roll No 12</td>
<td>900</td>
</tr>
</table>
What I want.
Every 2 <tr> have same id But these ids are dynamic.
I want the <tr> having same id get different background-color.
Now in this table there are 3 ids are used. So 3 different colors can be there.
I have applied many jquery codes but failed.
Please help me
I Developed Dynamic table row id based color set and i hope its solve your problem. Code Reference
var table = document.getElementsByTagName("table")[0];
var secondRow = table.rows[1];
var count=0;
var trid =[];
var clr =[];
for(var i=0;i<table.rows.length;i++)
{
trid.push(table.rows[i].id);
}
var uniqueArray = [];
for(i=0; i < trid.length; i++){
if(uniqueArray.indexOf(trid[i]) === -1) {
uniqueArray.push(trid[i]);
}
}
for(var i = 0; i < uniqueArray.length; i++)
{
clr.push('#'+Math.floor(Math.random()*16777215).toString(16));
}
for (var i = 0; i < table.rows.length; i++) {
for(var j = 0; j < uniqueArray.length; j++)
{
if(table.rows[i].id ==uniqueArray[j]){
table.rows[i].style.backgroundColor = clr[j];
}
}
}
Hi Use looping in Jquery, loop through each tr and determine its ID, then apply bg color
$( "tr" ).each(function( index ) {
var ID = $(this)..attr('id');
if(ID == '2221')
{
$(this).css('background-color', 'red');
}
else if(ID == '2223')
{
$(this).css('background-color', 'blue');
}
});
How about something like this?
const used_ids = []
$( "tr" ).each(function( index ) {
const id = $(this).attr.('id')
if (!used_ids.includes(id)) {
// If the id has not been met before, add it to the array.
used_ids.push(id)
}
// Get index of id from array of used ids
const index = used_ids.indexOf(id)
// If index is an even number, set background colour to grey, otherwise white
if (index%2 === 0) $(this).css('background-color', 'white');
else $(this).css('background-color', 'grey');
})
It builds an array of unique ids, then assigns white to those with an even index in the array and grey to the odd indices.
I am havign an issue where there is only one item being shown in my table (usually the most recent bug entered)
could you let me know if there is an error with my code?
Here is it
//Web service call to get the data
var getAllBugsData = $.get("https://m2052626.scm.tees.ac.uk/AST_14/Bugg.ly2/index.php/bug/GetAllBugs",
function(data)
{
var j = 0;
var myTotal = data.length ;
for(var i =0; i < data.length;i++)
{
var item = data[i];
bug_id = item.bug_id;
BugType = item.BugType;
Bugaddress = item.Bugaddress;
admin_id = item.admin_id;
status = item.status;
Description = item.description;
type = item.type;
var bugDetails = '<div class="PropDetails">Bug Id: '+bug_id+'</div><div class="PropDetails">Type of Bug: '+BugType+'</div><div class="PropDetails">Admin Number :'+admin_id+'</div><div class="PropDetails">Type Of Bug: '+type+'</div>';
$('.listAllBugs').append('<tr class="table-stroke"><td>'+bugDetails+'</td><td>Edit</tr>');
And the table code is this
<!--Data Table Goes HERE-->
<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
<tr>
<th width="100%">Bug Details</th>
</tr>
</thead>
<tbody class="listAllBugs">
</tbody>
</table>
Hi there,
I created an HTML table and what I need is to find the column index of a particular value,
but I don't know how to access each value of a table. That is why I am unable to get the index of the column.
Here is my table.
<table>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
</tr>
<tr>
<td>04</td>
<td>05</td>
<td>06</td>
</tr>
<tr>
<td>07</td>
<td>08</td>
<td>09</td>
</tr>
</table>
and I want the index of the value 03.
The following is a working code, first traverse the table to get the values in this, then compare with your required value and find the index of it..,
<html>
<head>
<script>
function cellvalues() {
var table = document.getElementById('mytable');
for (var r = 0, n = table.rows.length; r < n; r++) {
for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
var hi=table.rows[r].cells[c].innerHTML;
if(hi==03)
{
alert(table.rows[r].cells[c].cellIndex);
}
}
}
}
</script>
</head>
<body>
<table id="mytable">
<tr><td>01</td><td>02</td><td>03</td>
</tr>
<tr><td>04</td><td>05</td><td>06</td>
</tr>
<tr><td>07</td><td>08</td><td>09</td>
</tr>
</table>
<input type="button" onclick=cellvalues()>
</body>
</html>
You can try this (untested)
var tab = document.getElementsByTagName("table")[0];
var tr = tab.childNodes;
for (var i = 0; i < tr.length; i++) {
var td = tr[i].childNodes;
for (var j = 0; j < tr.length; j++) {
if (td[j].innerHTML == "03") {
alert(i + "," + j);
}
}
}
I suggest using jQuery index for this:
var trCollection = $('table tr');
$('table td').each(function () {
console.log(trCollection.index($(this).parent()));
});