I am trying to filter through dynamically inserted "td" elements in the table element within the HTML. I want the user to be able to type in text within the filter input field and if the text matches any of the td elements text content I want to those td elements displayed. I created the "filter" method within the "Music" constructor the last method within the constructor, furthermore, I called the filter method within the "filter field event listener" the last bit of code in the script. Any help would be appreciated. Thanks (I understand this is a lot of code but I wanted to give some context to my question!)
//JavaScript
// Music Constructor
class Music {
constructor(artist, song, album, genre) {
this.artist = artist;
this.song = song;
this.album = album;
this.genre = genre;
}
// Add song to music list
addSongToList(music) {
// Select Music List in UI
const list = document.querySelector('#music-list');
//Create Element
const row = document.createElement('tr');
row.className = 'row-data';
row.innerHTML =
` <td class="tbl-data">${music.artist}</td>
<td class="tbl-data">${music.song}</td>
<td class="tbl-data">${music.album}</td>
<td class="tbl-data">${music.genre}</td>`;
list.appendChild(row);
}
// Clear Fields
clearFields() {
artist.value = '';
song.value = '';
album.value = '';
genre.value = '';
}
// Delete Song
deleteSong(target) {
if (target.className === 'tbl-data') {
target.parentElement.remove();
}
}
//Filter songs by genre
filter(input) {
let songs = document.querySelectorAll('td');
songs.forEach(function(song) {
let songRow = song.textContent;
if (songRow.toLowerCase().includes(input)) {
song.style.display = 'block';
}
})
}
// Welcome message
static welcomeMsg(message, className) {
// Create element
const div = document.createElement('div');
div.className = 'welcomeMessage';
div.appendChild(document.createTextNode(message));
// Select parent
const parent = document.querySelector('.container');
const card = document.querySelector('.card');
parent.insertBefore(div, card);
setTimeout(function() {
div.remove();
}, 6000);
}
}
// Document object event listener
document.addEventListener('DOMContentLoaded', function() {
// Welcome Message call
Music.welcomeMsg('Welcome, enter your favorite artist, songs, albums, and genre in the input fields below! Double click songs you want to delete once added!');
})
// Event listener on Form
document.querySelector('form').addEventListener('submit', function(e) {
// UI Form Input
const artist = document.querySelector('#artist').value;
const song = document.querySelector('#song').value;
const album = document.querySelector('#album').value;
const genre = document.querySelector('#genre').value;
//Instantiate Music Constructor
const music = new Music(artist, song, album, genre);
console.log(music);
// Call prototype method
music.addSongToList(music);
music.clearFields()
e.preventDefault();
})
// Music list event listener
document.querySelector('#music-list').addEventListener('dblclick', function(e) {
//Instantiate Music Constructor
const music = new Music(artist, song, album, genre);
//Remove method call
music.deleteSong(e.target);
});
// Filter field event listener
document.querySelector('#filter').addEventListener('keyup', function() {
let filter = document.querySelector('#filter').value;
//Instantiate Music Constructor
const music = new Music(artist, song, album, genre);
// Call filter prototype method
music.filter(filter);
});
//HTML
<body>
//Container with the input fields
<div class="primary-container ">
<div class="container">
<h1 class="text-center mb-3">Favorite Music Archive</h1>
<div class="card mx-auto px-4">
<form action="">
<label for="basic-url" class="form-label form-text">Music Artist</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3"><img src="icons/guitar.png" alt="artist" class="icon-img"></span>
<input type="text" class="form-control" id="artist" placeholder="Enter Musical Artist">
</div>
<label for="basic-url" class="form-label form-text">Song</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3"><img src="icons/music.png" alt="song" class="icon-img"></span>
<input type="text" class="form-control" id="song" placeholder="Enter Song">
</div>
<label for="basic-url" class="form-label form-text">Album</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3"><img src="icons/music-album.png" alt="Album" class="icon-img"></span>
<input type="text" class="form-control" id="album" placeholder="Enter Album or Single">
</div>
<label for="basic-url" class="form-label form-text">Genre</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3"><img src="icons/dj.png" alt="genre" class="icon-img"></span>
<input type="text" class="form-control" id="genre" placeholder="Enter Genre">
</div>
<div class="d-flex justify-content-center p-3">
<button type="submit" class="subBtn">Submit Song</button>
</div>
</form>
</div>
</div>
</div>
<div class="second-container">
//Filter Input field
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1"><img src="icons/filter.png" alt="filter" class="icon-img"></span>
<input type="text" class="form-control filter-input" placeholder="Filter by genre" id="filter"> //Filter Input End
<table class="table table-dark table-striped">
<thead>
<tr class="row-head">
<th scope="col">Artist</th>
<th scope="col">Song</th>
<th scope="col">Album</th>
<th scope="col">Genre</th>
</tr>
</thead>
// Dynamically inserted TD elements will go into tbody
<tbody id="music-list">
</tbody>
</table>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
The easiest way to search a table (if you are open to using JQuery) is to use JQuery DataTables. It allows you to search a table quite easily. All you have to do is include JQuery and the JQuery DataTable CDN to get it working:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" type="text/css" crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" crossorigin="anonymous" href="//cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js" crossorigin="anonymous"></script>
</head>
<body>
<table id="myTable" class="table table-secondary table-striped">
<thead>
<tr class="row-head">
<th scope="col">Artist</th>
<th scope="col">Song</th>
<th scope="col">Album</th>
<th scope="col">Genre</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some artist 1</td>
<td>Some song 1</td>
<td>Some album 1</td>
<td>Some genre 1</td>
</tr>
<tr>
<td>Some artist 2</td>
<td>Some song 2</td>
<td>Some album 2</td>
<td>Some genre 2</td>
</tr>
<tr>
<td>Some artist 3</td>
<td>Some song 3</td>
<td>Some album 3</td>
<td>Some genre 3</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
// Initiate the data table:
$("#myTable").DataTable();
});
</script>
</body>
</html>
All you do is initiate it as a DataTable and it will automatically provide a search input (that live searches the table), "Show X Entries", "Showing X to Y of Z entries", and pagination. Now, you can customize it further to only show the input search box if you would like, but I will refrain from further elaboration unless you are interested.
This will also work for any dynamically created td tags. If you are only dynamically inserting td tags before user interaction with the table (so right on render), then you can simply initialize the table ($("#myTable").DataTable();) after you are done dynamically creating the table's tbody. If you are steadily inserting td tags even after the table has been rendered for the user to use, then you can add rows dynamically and redraw the DataTable:
let table = $("#myTable").DataTable();
// This adds a new row after the DataTable was already rendered:
table.row.add([
"Some artist 4",
"Some song 4",
"Some album 4",
"Some genre 4"
]);
// This redraws the DataTable to reflect those changes:
table.draw();
Related
I'm trying to use deferRender for my datatables to limit the number of values that first show up. But it does not appear to be making any difference.
The data I am working with has thousands of rows, and I need to use client-side processing (I'm hosting a static page on github pages). The problem I am facing is simply that there are too many values and my page is loading far too slowly.
It needs to still be responsive to several click/search events, so that when the user searches or clicks several filters, the datatable updates - but I would again prefer that it only shows the first page of results.
const url = 'https://raw.githubusercontent.com/________________.json';
async function populate() {
const response = await fetch(url);
const evidenceData = await response.json();
console.log(evidenceData)
// Build Table
function buildTable(data) {
var table = document.getElementById('myTable')
table.innerHTML = data.map(function(row) {
let [country, title, category, date, link, image] = row;
return `<tr>
<td>
<br><br>
<a href="${link}" target='_blank'>
<img class="tableThumbnail" src=${image}><br><br>
</td></a>
<td>
<span class="tableTitle"><br><br><a href="${link}" target='_blank'>${title}</a><br></span>
</td>
<td>${country}</td>
<td>${category}</td>
<td>${date}</td>
</tr>`;
}).join('');
}
$(document).ready(function() {
var oTable = $('.mydatatable').DataTable({
"dom": "<<t>ip>",
"columnDefs": [{
targets: [2, 3, 4],
visible: false,
searchable: true,
}]
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Datatables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
</head>
<body>
<form class="form">
<div>
<input type="text" id="searchInput" class="form-control" placeholder=" Search">
</div>
</form>
<div class="main">
<table class="table mydatatable" id="mydatatable">
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody id="myTable">
</tbody>
</table>
</div>
</body>
I have below code in my GetCourseList.cshtml file (view) that show fetched information from database :
#model IEnumerable<WebApplication8.Models.Courses>
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width" />
<title>GetCourseList</title>
<style>
.table thead th,
.table tbody td {
text-align: center;
}
</style>
</head>
<body>
<table class="table table-striped">
<thead>
<tr>
<th scope="col" class="border-top-0 text-center">course name</th>
<th scope="col" class="border-top-0">unit</th>
<th scope="col" class="border-top-0">term</th>
<th scope="col" class="border-top-0">choose</th>
<th scope="col" class="border-top-0"></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td class="align-middle">#item.name</td>
<td class="align-middle">#item.unit</td>
#if (item.term == 0)
{
<td class="align-middle">custom</td>
<td>
<input class="btn btn-success" type="checkbox" value=#item.name id=#item.course_id/>
</td>
}
else
{
<td class="align-middle">#item.term</td>
<td><input type="checkbox" value=#item.name id=#item.course_id /></td>
}
<td class="text-right align-middle">
#*<button type="button" class="btn btn-success">choose</button>*#
</td>
</tr>
}
</tbody>
</table>
</body>
</html>
and I get below result from this view when I run the project :
I want that user choose favorite records , with those checkboxes , and then when pressed final button (this button is out of frame in my picture), id of this checkboxes insert in my database(related table).
think I should get checked checkboxes id's from my html page (but I don't know how?! please help me!) and pass this id's to the action and then execute insert query in my action .
so : I should pass each checked checkboxes id to the specific controller and collect them (for example collect all elements id's in an array) some one tell's me that i can map my view elements to the this array . but I don't give result from this approach . this is issue!
please help me to find out how can I do this . thank you
you can add property IsSelect in Model
Public bool IsSelect {get;set;}
and used
#Html.CheckBoxFor(m => m.IsSelect)
and in server checked which one of items selected
var idList = items.Where(x=>x.IsSelect).Select(x=>x.Id).ToList();
i am struggling to get it to work since this is my first try making something on my own.
I want to take input from the input field inside the form, click the submit button, and on each row i want a new input[type='text'] in a table.
for example: david, jan, mark
each of the above names needs to be added on a new row separetly, randomly chosen, below each other
hope this makes sense.
in the example below, it adds the input next to each other.
// when the page is loaded
// hiding the table in the DOM = document object model
$(document).ready(function() {
$('.table').hide();
});
// Get input from 'inputNames' text area
$('#button').click(function() {
var name = $('input[type="text"]').val().split(',');
// checking to see if the "input[type='text']" value is empty
if ($('#inputNames').val() !== '') {
// iterate over de names
$('#inputNames').each(function() {
for (var i = 0; i < name.length; i++) {
name[i];
//Create a new td add to tr
$('.inserted').append('<td>' + name[i] + '</td>');
}
});
// log the variable name to see the object
console.log(name);
// slide in the table
$('.table').fadeIn(2500);
// without it wont load the fadeIn effect
return false;
} else {
alert('You need to fill in the input field');
};
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Roulatie Schema</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Roulatie Schema</h1>
<p class="lead">Gewoon een simpel roulatie schema, waarbij alleen de namen van de betreffende mensen hoeft te worden ingevuld</p>
<hr class="my-4">
<form id="myForm">
<div class="form-group">
<label for="inputNames">Fill in the names separated by a comma</label>
<input type="text" class="form-control" id="inputNames" required='true' aria-describedby="emailHelp" placeholder="Example name, name">
<small id="emailHelp" class="form-text text-muted">the field above can not be empty!!</small>
</div>
<button id="button" type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
<table class="table" align='center'>
<thead class="thead-dark">
<tr>
<th>#Rounds</th>
<th>#First Round</th>
<th>#Second Round</th>
<th>#Third Round</th>
</tr>
</thead>
<tbody>
<tr class="inserted">
<td>Luxe lades</td>
</tr>
<tr class="inserted">
<td>Meta lades</td>
</tr>
<tr class="inserted">
<td>Inpak</td>
</tr>
<tr class="inserted">
<td>Controle 100%</td>
</tr>
<tr class="inserted">
<td>Lades inhangen</td>
</tr>
<tr class="inserted">
<td>Deuren</td>
</tr>
<tr class="inserted">
<td>Planken</td>
</tr>
<tr class="inserted">
<td>Panelen</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Ok, so this answer has two steps, in the hope that I understood what you want to do correctly.
Step #1:
You are currently fishing the names properly but instead of adding them to the table in new rows you just add them as cells to each and every row. So changing the append() content can fix that:
$('#inputNames').each(function() {
for (var i = 0; i < name.length; i++) {
name[i];
$('tbody').append('<tr class="inserted"><td>' + name[i] + '</td></tr>');
}
});
Step #2:
Now you want them to be added randomly. There are many ways to go about this but I will just offer one, which in the code actually comes before the 1st step:
randomize the name array.
how? simple:
var name = $('input[type="text"]').val().split(',');
name.sort(function(a, b){return 0.5 - Math.random()});
notice you do not to set name=name.sort() the method already sets it for you.
Now the code takes the names, randomizes them, and appends them as new rows in the table.
I have a table with multiple columns (for this question I only made two columns) and I want the user to be able to search through a column by the index depending on an option that the user can select. I have working code, but in order to change the search option, I had to copy the function for each input.
How can I search by the index? If a user selects an option like (name), then the javascript function will change the index that it is searching to [0]. if the user selects (location), the function will change the index to [1] and search through that column.
Is this possible? Any help would be appreciated.
const searchName = document.getElementById('searchName');
const searchLoc = document.getElementById('searchLoc');
custSelect.addEventListener('click', () => {
if (custSelect.value == 'custname') {
searchName.style.display = 'block';
searchLoc.style.display = 'none';
} else {
searchName.style.display = 'none';
searchLoc.style.display = 'block';
}
});
// Search for customer, or search for location, index will change based on option selected.
function tableSearch(id, index) {
// Declare variables
var filter, input, table, tr, td, i;
input = document.getElementById(id);
filter = input.value.toUpperCase();
table = document.getElementById(id);
tr = table.getElementsByTagName('tr');
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0]; // index will change based on option selected.
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="custDiv">
<div class="addBtns">
<input id="searchName" onkeyup="tableSearch('searchName','custList'[0])" type="text" placeholder="search name" />
<!-- this searches through the first index or [0] -->
<input id="searchLoc" onkeyup="tableSearch('searchLoc','custList'[1])" style="display: none;" type="text" placeholder="search location" />
<!-- this searches through the second index or [1] -->
<div id="custSelectDiv" style="width: 175px; height: 35px; max-height: 35px; margin: 0 auto;">
<select id="custSelect" style="position: absolute;">
<option value="custname">name</option> <!-- if user selects this, the corresponding input is displayed, which changes the index to search through -->
<option value="location">location</option> <!-- if user selects this, the corresponding input is displayed, which changes the index to search through -->
</select>
</div>
</div>
<table id="custListTop" contenteditable="false">
<tr>
<td style="border-top-left-radius: 5px;">Customers</td>
<td style="border-top-right-radius: 5px;">Main Location</td>
</tr>
</table>
<table id="custList" contenteditable="true">
<tr>
<td>josh</td>
<td>hawkins</td>
</tr>
<tr>
<td>hanna</td>
<td>big sandy</td>
</tr>
<tr>
<td>bonne</td>
<td>big sandy</td>
</tr>
<tr>
<td>thomas</td>
<td>big sandy</td>
</tr>
</table>
</div>
<script src="test.js"></script>
</body>
</html>
This should get you on track
var table = document.getElementById('tab'),
col = document.getElementById('col'),
val = document.getElementById('val');
col.max = table.rows[0].cells.length - 1;
function search() {
var regex = new RegExp(val.value || '', 'i');
for (var i = table.rows.length; i-- > 1;) {
if (regex.test(table.rows[i].cells[+col.value].innerHTML)) {
table.rows[i].style.display = 'table-row';
} else
table.rows[i].style.display = 'none';
}
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid;
}
<label for="col">Column :</label>
<input type="number" id="col" placeholder="column" onkeyup="search()" min="0" step="1" />
<br>
<label for="val">Find :</label>
<input type="text" id="val" placeholder="cell" onkeyup="search()" />
<table id="tab">
<tr>
<th>Customers</th>
<th>Main Location</th>
</tr>
<tr>
<td>josh</td>
<td>hawkins</td>
</tr>
<tr>
<td>hanna</td>
<td>big sandy</td>
</tr>
<tr>
<td>bonne</td>
<td>big sandy</td>
</tr>
<tr>
<td>thomas</td>
<td>big sandy</td>
</tr>
</table>
I think they are two simplier ways to do that research :
Use an object array to search what you need, reorganize it at each research and re-make your html table each time the table changes.
Or use dataTable, which is a very simple tool to sort table.
I am new to angularjs and stuck with the below problem.
There will be a table of rows created which reads data from JSON. Say there are 6 rows displayed.But in real time number rows will vary.
Each row has an accordion(+ symbol) in its first td. If this accordian is clicked then the children rows of that row should be displayed by reading the data from one more different JSON.
Similarly for the remaining 5 rows as well it should display the children rows for the respective row's accordion is clicked.
I have created the table with the 6 rows displayed.
But the challenge I am facing is how to link child rows to the existing rows dynamically when clicked. Here is the plunkr - https://plnkr.co/edit/FTbjn9ZbAOTqc3b6j52h?p=preview
Any help is appreciated.
<html>
<head>
<script src="angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="font-awesome.min.css"/>
<link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body data-ng-app="testApp" data-ng-controller="treeTable">
<hr>
<button type="button" class="btn btn-success" data-dismiss="modal" data-ng-click="save()">SaveFilter</button>
<button type="button" class="btn btn-Default" data-dismiss="modal" data-ng-click="delete()">Delete</button>
<div class="row">
<div class="col-md-9">
<div style=" margin-left:50px;" class="tableheight">
<table class="table-nested ">
<thead>
<tr>
<!-- <th >
<input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
</th> -->
<th>
Repository
</th>
<th >
Version
</th>
<th >
Size
</th>
<th >
Modified By
</th>
<th >
Labels
</th>
<th >
Description
</th>
</tr>
</thead>
<tbody style="font-size:12px" data-ng-repeat="item in list">
<tr >
<td ><button style="background-color: #fff;" class="accordion"></button>
{{item.name}}
</td>
<td >
{{item.Version}}
</td>
<td >
{{item.Size}}
</td>
<td >
{{item.ModifiedBy}}
</td>
<td >
{{item.Labels}}
</td>
<td >
{{item.Description}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
See the Plunkr solution
You want a 2nd <tr> with ng-repeat following the first:
<tr ng-if="item.Labels==child.Labels" ng-show="item.opened" ng-repeat="child in children">
<td>{{child.name}}</td>
...etc
</tr>
This will build additional rows where the bundle .Labels matches the repo .Labels and will be shown only when the repo's opened property is true. The + button will toggle the opened property for each item. You'll need two minor edits to your data to make this work:
Add children data to the $scope (for access in the 2nd ng-repeat).
Add default opened: false property to all repos (except the first, which is true).
This won't show the components, but hopefully you get the idea.
See the Plunkr solution
If you want to inset row after row clicked use this:
<style>
#tableid {
font-size: 14px;
}
#tableid .childRow {
font-size:10px;
}
#tableid .childRow td:first-of-type {
padding-left:10px;
}
</style>
<table id="tableid">
<tr onclick="AddRow(this)">
<td>abcd</td>
</tr>
</table>
<script>
function AddRow(e)
{
for (var i = 0; i < 5; i++)
{
var index = e.rowIndex;
var table = document.getElementById("tableid");
var row = table.insertRow(index + 1 + i);
row.setAttribute('class', 'childRow');
var cell = row.insertCell(0);
cell.innerHTML = "efgh";
}
}
</script>