I have a table and using javascript I give the user the option to remove table rows from the table by putting the display style to none.
If the user wants to see the rows again, I need to put the display style away from none and my problem is that I don't know what style to use. I thought table-row-group is the most sensible, but it messes up the rows...
I created a fiddle here and copied the code below
https://jsfiddle.net/b2s3dpo5/#&togetherjs=7EwfsBJIfw
<fieldset style="display: inline-block;">
<div style="display: inline-block;">
<input type="checkbox" name="{{ category.name }}" id="category" checked> remove rows
</div>
</fieldset>
<div class="panel panel-default col-xs-12">
<table class="table table-striped">
<thead>
<tr>
<th><strong>ID</strong></th>
<th><strong>test test test</strong></th>
<th><strong>Institute/Organisation</strong></th>
<th><strong>test deadline test</strong></th>
</tr>
</thead>
<tbody>
<tr class="category">
<th class="col-xs-1" scope="row">
test
</th>
<td class="col-xs-5">
test
</td>
<td class="col-xs-4">
test
</td>
<td class="col-xs-2">
test
</td>
</tr>
</tbody>
</table>
</div>
and the necessary javascript
document.getElementById('category').onclick = function() {
toggleSub_by_class(this, 'category');
};
function toggleSub_by_class(box, select_class) {
// get reference to related content to display/hide
var el = document.getElementsByClassName(select_class);
var flag;
if (box.checked) {
for (var i = 0, j = el.length; i < j; i++) {
el[i].style.display = 'table-row-group';
}
} else {
for (var i = 0, j = el.length; i < j; i++) {
var classList = el[i].className.split(' ')
flag = 0
for (var h = 0, k = classList.length; h < k; h++) {
if (document.getElementById(classList[h])) {
if (document.getElementById(classList[h]).checked) {
flag = 1
}
}
}
if (flag == 0) {
el[i].style.display = 'none';
}
}
}
}
Try visibility:hidden or height:0px or both.
I figured it out myself... the correct display style is empty
el[i].style.display = '';
that works fine for me
carl
First off, for readability purposes, try to create more concise headers when you share it with the rest of the community (although I understand that this is not a big deal).
I would try
visibility:hidden
Related
I have this function to do a filter by jquery, and it is returning this error:
Cannot read property 'getElementById' of undefined
function VerificaCheck() {
var input, filter, table, tr, td, i, filtro;
input = document.getElementById("busca2");
filter = input.value.toUpperCase();
table = document.getElementById("tablepesquisa2");
tr = table.getElementsByTagName("tr");
filtro = document.getElementById("filtroPesquisa2").value;
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[filtro];
var tipoProduto = tr[i].getElementById("tipoProduto").value;
if (td) {
if (tipoProduto == $('#Produtos').prop("checked")) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
This is the HTML of my table, and the checkbox. If the checkbox is checked it should look for in the table the fields of typeProduct that are true
<div class="form-group">
<div class="col-sm-3">
<select id="filtroPesquisa2" class="form-control">
<option value="0">Código</option>
<option value="1">Descrição</option>
</select>
</div>
<div class="col-sm-7">
<input type="text" id="busca2" placeholder="Pesquisa.." onkeyup="myFunction2();" class="form-control" />
</div>
</div>
<div class="modal-body">
<div class="table-overflow col-sm-12">
<table class="table table-responsive table-hover" id="tablepesquisa2">
<thead>
<tr>
<th>Código</th>
<th>Nome</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Produto)
{
<tr>
<td>#item.Codigo</td>
<td>#item.nome</td>
<td align="right">
<i class="fa fa-check-circle fa-lg"></i>
</td>
<td id="tipoProduto" value="#item.TipoProduto">#item.TipoProduto</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<input type="checkbox" asp-for="Produtos" onclick="checkProduto();" name="Produtos" id="Produtos"/>
getElementById is available on the document, not on tr.
Documentation
change the following line to
var tipoProduto = document.getElementById("tipoProduto").value;
However, this may not get what you want, based on my guesses that you have multiple elements by this id in your table. Post your html and what you are trying to do, may be there's another way to do this.
UPDATE:
As suspected, your td repeats in the loop, so you multiple td with same id. I'd suggest to remove id from it.
Since the value you are looking is the last td, what you can possibly do to get the value you are looking for is (one way that is):
td[td.length-1].innerHTML
So the loop would look more like:
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[filtro];
if (td) {
var tipoProduto = td[td.length-1].innerHtml;
if (tipoProduto == $('#Produtos').prop("checked")) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
I can not understand how to grab for example href attribute inside table row cell. When I'm trying to do that it seems that second loop does not work for selected TR elements
function asd(){
this.container = document.getElementsByClassName("cart-contents")[0];
if (!this.container){
return false;
}
this.itemsContainer =
this.container.getElementsByClassName("minicart-table")[0];
this.itemsTable = this.itemsContainer.getElementsByClassName("views-table")[0];
this.cartDetails = [];
for (var i = 0, row; row = this.itemsTable.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
console.log(col[0].getElementsByTagName("a")[0].getAttribute("href"));
}
console.log('________________');
}
}
asd();
<div class="cart-contents">
<div class="minicart-table">
<table class="views-table">
<tbody>
<tr>
<td class="views-field-field-product-image">text</td>
<td class="tg-yw4l"></td>
</tr>
</tbody>
</table>
</div>
</div>
Use col instead col[0]
function asd(){
this.container = document.getElementsByClassName("cart-contents")[0];
if (!this.container){
return false;
}
this.itemsContainer =
this.container.getElementsByClassName("minicart-table")[0];
this.itemsTable = this.itemsContainer.getElementsByClassName("views-table")[0];
this.cartDetails = [];
for (var i = 0, row; row = this.itemsTable.rows[i]; i++) {
// only the first column
col = row.cells[0];
var anchor = col.getElementsByTagName("a")[0];
if (anchor !== undefined) {
console.log(anchor.getAttribute("href"));
}
console.log('________________');
}
}
asd();
<div class="cart-contents">
<div class="minicart-table">
<table class="views-table">
<tbody>
<tr>
<td class="views-field-field-product-image">text</td>
<td class="tg-yw4l"></td>
</tr>
</tbody>
</table>
</div>
</div>
Use querySelector() for that. It is safe to use. Example:
var anchor = document.querySelector(".cart-contents a:first-child");
console.log(anchor.getAttribute("href"));
<div class="cart-contents">
<div class="minicart-table">
<table class="views-table">
<tbody>
<tr>
<td class="views-field-field-product-image">text</td>
<td class="tg-yw4l"></td>
</tr>
</tbody>
</table>
</div>
</div>
Also, here is how to fix your code:
for (var i = 0, row; row = this.itemsTable.rows; i++) {
for (var j = 0, col; col = row[i].cells; j++) {
console.log(col[j].getElementsByTagName("a")[0].getAttribute("href"));
}
}
I am trying to change the name of cloned radio button (which are creating dynamically) so that these radio buttons can be select from all . Current only one radio button can be selected.
Please find below the HTML
<table class="ebTable" style="border-left:1px solid #e6e6e6;border-right:1px solid #e6e6e6;">
<thead>
<tr>
<th>{{fieldName}}</th>
<th>{{fieldType}}</th>
<th>{{mandatory}}</th>
<th>
<button class="ebBtn" e-id="start" name="start">
<i class="ebIcon ebIcon_add"></i>
<span>Add</span>
</button>
</th>
</tr>
</thead>
<tbody>
<tr id="repeat">
<td>
<e-forminput type="text" e-id="fieldName" />
</td>
<td>
<e-forminput type="select" value="{{selectType}}" items="IA5String" e-id="fieldType" />
</td>
<td>
<e-forminput type="radio" e-id="mandatory" name="mandatory" options="true:{{yes}},false:{{no}}" />
</td>
<td>Delete Button</td>
</tr>
</tbody>
</table>
Please find below the JavaScript code
onViewReady: function() {
var i = 0;
this.view.findById("start").addEventHandler("click", function() {
var original = document.getElementById('repeat');
var clone = original.cloneNode(true); // for clone
clone.id = "repeat" + ++i; // there can only be one element with an ID
var size = document.getElementsByName("mandatory").length;
console.log(size);
for (var j = 0; j < size; j++) {
if (clone.childNodes[j].nodeName.toLowerCase() == 'input' && clone.childNodes[j].nodeType == 'radio') {
clone.childNodes[j].name = "mandatory" + i;
}
}
original.parentNode.appendChild(clone);
}.bind(this));
}
Hi there can someone please help me with this code:
So this is the blade
<table class="optionsForm" style="width:100%">
<thead>
<tr >
<th><button type="button" class="add">Add</button></th>
#for($c = 1; $c<=4; $c++)
<th id="column{{ $c}}">
<input type="text" name="columns[{{ $c }}]"
class="form-control" placeholder="Column {{ $c }} ">
</th> #endfor
<th><button type="button" style="width: 100px; height: 25px" class="addColumn">Add Column</button></th>
</tr>
</thead>
<tbody> #for($r = 1; $r<=4; $r++)
<tr class="prototype">
</tr> #endfor
</tbody>
</table>
and this one is the js code, I need to be able to add only one row, here it is adding 4 rows, I need first to be shown 4 rows, but than when I click add I need to be added only one row how can I achieve this can someone please help me with this thing I am stuck, thank you so much for any efforts.
$(document).ready(function () {
var id = 0;
// Add button functionality
$("table.optionsForm button.add").click(function () {
id++;
var master = $(this).parents("table.optionsForm");
// Get a new row based on the prototype row
var prot = master.find(".prototype").clone();
prot.attr("class", "")
prot.find(".id").attr("value", id);
master.find("tbody").append(prot);
});
// Remove button functionality
$("table.optionsForm button.remove").on("click", function () {
$(this).parents("tr").remove();
});
$("table.optionsForm button.addColumn").click(function () {
var $this = $(this), $table = $this.closest('table')
$('<th><input type="text" name="options" class="form-control" placeholder="Column"></th>').insertBefore($table.find('tr').first().find('th:last'))
var idx = $(this).closest('td').index() + 1;
$('<td><input type="radio" name="col' + idx + '[]" value="" /</td>').insertBefore($table.find('tr:gt(0)').find('td:last'))
});
});
The add button code is creating a collection of four elements with class "prototype" and then cloning four elements:
var prot = master.find(".prototype").clone()
To add a single element, try selecting the first DOM element from the collection and converting it to a JQuery object before applying clone:
var prot = $(master.find(".prototype")[0]).clone()
As a minimal test/demonstration case (not using blade)
var master = $("#master");
var prot = $(master.find(".prototype")[0]).clone();
master.append(prot);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="master">
<span class="prototype">proto 1</span><br>
<span class="prototype">proto 2</span><br>
<span class="prototype">proto 3</span><br>
<span class="prototype">proto 4</span><br>
</div>
I've tried a few things , but not versed enough in coding to get it done myself obviously
I setup a jsfiddle here - https://jsfiddle.net/7ojfmxn2/17/
I have a show tabs function to display tab content below , i have a header text for the tabs and i'd like to change that text to the name of the current tab each time one is clicked "League Tabs" i'd like renamed to Tab 0 , Tab 1 , Tab 2 ect , whenever one is selected, any help ?
function show_tab(tab_id) {
var done = false;
var counter = 0;
while (!done) {
var this_tab_content = document.getElementById("tabcontent" + counter);
var this_tab = document.getElementById("tab" + counter);
if (!this_tab_content) {
done = true;
} else {
if (counter == tab_id) {
this_tab_content.style.display = '';
this_tab.className = "currenttab";
} else {
this_tab_content.style.display = 'none';
this_tab.className = "";
}
}
counter++;
}
location.hash = tab_id;
}
if (location.hash) {
show_tab(location.hash.substr(1));
} else {
show_tab(0);
}
I'm not sure it is what you're asking for, but if you want substitute "League Tabs" with the Tab name, you could do as follows
1- give an ID to the span where the tab header is stored , for example id=tabheader
2- in the part of code where you set the visible tab, also set the content of that span (the element with id=tabheader)
Here's the code
HTML
...
<div class="myfantasyleague_tabmenu"><span id="tabheader">LEAGUE TABS</span>
....
JS
....
if (counter == tab_id) {
this_tab_content.style.display = '';
this_tab.className = "currenttab";
var tabheader = document.getElementById("tabheader");
tabheader.innerHTML="tab " + counter;
}
...
See updated fiddle
https://jsfiddle.net/7ojfmxn2/30/
EDIT
If you want the title LEAGUE TABS be displaied at the beginning, you've to comment your init code in a way no tab is selected.
/*
if (location.hash) {
show_tab(location.hash.substr(1));
} else {
show_tab(0);
}
*/
EDIT 2
To avoid showing all tabs you can use
show_tab(-1);
instead of
show_tab(0);
see fiddle https://jsfiddle.net/7ojfmxn2/50/
EDIT 3
In the case you want to see the 'main' tab name on page load, having anyway the tab 0 loaded, you may
1- change the show_tab, adding an input param. This boolean param determines what to show (main tab name or displaied tab name ), as follows
function show_tab(tab_id, show_main_tab_name) {
.....
//here is where the tab title is displaied
var tabheader = document.getElementById("tabheader");
if(show_main_tab_name){
tabheader.innerHTML="LEAGUE TABS";
}
else {
tabheader.innerHTML="tab " + counter;
}
....
2- call on init the show tab with the param set to true
(I put your original function)
if (location.hash) {
show_tab(location.hash.substr(1));
} else {
show_tab(0,true);
}
See my new fiddle https://jsfiddle.net/7ojfmxn2/55/
You need to set an id on the title of the element that contains the tabs, so you can later select it and change it's content.
Then you can pass a 2nd parameter to your show_tab function which would be the tab title you want to display.
Here's the updated code (I had to delete the CSS to be able to post it here due to post size limits)
Here's the working Fiddle with all the CSS https://jsfiddle.net/7ojfmxn2/39/
function show_tab(tab_id, tab_title) {
var done = false;
var counter = 0;
while (!done) {
var this_tab_content = document.getElementById("tabcontent" + counter);
var this_tab = document.getElementById("tab" + counter);
if (!this_tab_content) {
done = true;
} else {
if (counter == tab_id) {
this_tab_content.style.display = '';
this_tab.className = "currenttab";
} else {
this_tab_content.style.display = 'none';
this_tab.className = "";
}
}
counter++;
}
location.hash = tab_id;
document.getElementById('tab_title').innerHTML = tab_title || 'LEAGUE TABS';
}
if (location.hash) {
show_tab(location.hash.substr(1));
} else {
show_tab(0);
}
<div id="contentframe">
<div id="withmenus">
<div class="myfantasyleague_tabmenu"><span id="tab_title">LEAGUE TABS</span>
<input id="sub100" type="checkbox">
<label for="sub100"><span></span></label>
<ul id="homepagetabs">
<li id="tab0" onclick="javascript:show_tab('0', 'Tab 0');"><a class="no-sub">Tab 0<input id="sub100" type="checkbox"><label for="sub100"></label></a></li>
<li id="tab1" onclick="javascript:show_tab('1', 'Tab 1');"><a class="no-sub">Tab 1<input id="sub100" type="checkbox"><label for="sub100"></label></a></li>
<li id="tab2" onclick="javascript:show_tab('2', 'Tab 2');"><a class="no-sub">Tab 2<input id="sub100" type="checkbox"><label for="sub100"></label></a></li>
<li id="tab3" onclick="javascript:show_tab('3', 'Tab 3');"><a class="no-sub">Tab 3<input id="sub100" type="checkbox"><label for="sub100"></label></a></li>
</ul>
</div>
<div id="tabcontent0" class="homepagetabcontent">
<div class="mobile-wrap">
<table align="center" cellspacing="1" class="homepagemodule report" id="brief_standings">
<caption><span>Tab 0 CONTENT</span></caption>
<tbody>
<tr>
<td id="division00" colspan="3">
<h3>Division 1</h3></td>
</tr>
<tr>
<th class="fname" title="Franchise Name">Franchise</th>
<th class="h2hwlt" title="Overall Wins, Losses and Ties">W‑L‑T</th>
<th class="pf" title="Points For (Total Year-to-Date Point Scored)">PF</th>
</tbody>
</table>
</div>
</div>
<div id="tabcontent1" class="homepagetabcontent">
<div class="mobile-wrap">
<table align="center" cellspacing="1" class="homepagemodule report" id="brief_standings">
<caption><span>Tab 1 CONTENT</span></caption>
<tbody>
<tr>
<td id="division00" colspan="3">
<h3>Division 1</h3></td>
</tr>
<tr>
<th class="fname" title="Franchise Name">Franchise</th>
<th class="h2hwlt" title="Overall Wins, Losses and Ties">W‑L‑T</th>
<th class="pf" title="Points For (Total Year-to-Date Point Scored)">PF</th>
</tbody>
</table>
</div>
</div>
<div id="tabcontent2" class="homepagetabcontent">
<div class="mobile-wrap">
<table align="center" cellspacing="1" class="homepagemodule report" id="brief_standings">
<caption><span>Tab 2 CONTENT</span></caption>
<tbody>
<tr>
<td id="division00" colspan="3">
<h3>Division 1</h3></td>
</tr>
<tr>
<th class="fname" title="Franchise Name">Franchise</th>
<th class="h2hwlt" title="Overall Wins, Losses and Ties">W‑L‑T</th>
<th class="pf" title="Points For (Total Year-to-Date Point Scored)">PF</th>
</tbody>
</table>
</div>
</div>
<div id="tabcontent3" class="homepagetabcontent">
<div class="mobile-wrap">
<table align="center" cellspacing="1" class="homepagemodule report" id="brief_standings">
<caption><span>Tab 3 CONTENT</span></caption>
<tbody>
<tr>
<td id="division00" colspan="3">
<h3>Division 1</h3></td>
</tr>
<tr>
<th class="fname" title="Franchise Name">Franchise</th>
<th class="h2hwlt" title="Overall Wins, Losses and Ties">W‑L‑T</th>
<th class="pf" title="Points For (Total Year-to-Date Point Scored)">PF</th>
</tbody>
</table>
</div>
</div>
</div>
</div>
Add an id to your HTML's <title> tag, like so:
<title id="myTitle"></title>
Using jQuery you could just do this:
$('#myTitle').html(this_tab.className);
With JavaScript it would be
document.getElementById("myTitle").innerText = this_tab.className;