Hide column in javascript - javascript

I want to hide the value of column in table, the data of table is bind from database
This is my html code
<table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th id="th_id_event">Id Event Category</th>
<th>Event Category</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<% objLOV.forEach(function (lov) { %>
<tr onclick="callme(this)">
<td id="td_id_event">
<%= lov.id %>
</td>
<td>
<%= lov.event_category %>
</td>
<td>
<%= lov.description %>
</td>
</tr>
<% }) %>
</tbody>
</table>
<% objLOV.forEach(function (lov) { %> is to get data from database
I have tried like this, but the only first column first row get hide, I want hide all the value of the column id
window.onload = function () {
document.getElementById("td_id_event").style.display = "none";
document.getElementById("th_id_event").style.display = "none";
};
my table
my table after i tried to disable
can anyone help me? thank you..

You can only validly have one element with a given id so attempting to reference multiple elements with the same id is unlikely to work. You could use a class for the element instead i.e. replace
<td id="td_id_event"
with
<td class="id_event"
and then use
window.onload = function () {
var ids = document.getElementsByClassName("id_event");
for (var i = 0; i < ids.length; i++) {
ids[i].style.display = "none";
}

Related

Get table row value based on button click using Jquery/Javascript

I need to get the table row value from onclick event. Below the table, I am using
Group name|Manage group
Test 1 | Button
Test 2 | Button
If I click 'Button' from the table row, I need to get the respective group name value from the table row.
Below the script, I am trying. But it is printing only the first group name value "Test 1" for both buttons.
var table = document.getElementById("user_table");
var rows = table.rows;
for (var i = 1; i < rows.length; i++) {
rows[i].onclick = (function (e) {
var rowid = (this.cells[0].innerHTML);
var j = 0;
var td = e.target;
while( (td = td.previousElementSibling) != null )
j++;
alert(rows[1].cells[j].innerHTML);
});
}
alert(rows[1].cells[j].innerHTML) printing group name value Test 1 and if I click second row button it is showing Test 1 only.But I need to get Test 2 if I click second row button.
Html file
<table id="user_table" style='overflow-x:scroll;overflow-y:scroll;width:100%;height:auto' class="table table-bordered" >
<thead>
<tr class="info">
<th>Group Name</th>
<th>User Group</th>
</tr>
</thead>
<tbody id="table_body">
<br>
<% #array.each do |user| %>
<tr>
<td >
<%=user['group_name']%>
</td>
<td>
<button id='manageusrbtn' name="button" type="button" class="editbtn" onclick="manageUserGroups()" style="background-color: #008CBA; color: white; border-radius: 6px;" >Manage User Groups</button>
</td>
<% end %>
</tr>
</tbody>
</table>
I would suggest to attach the click event handler to the button and not to each cell.
For this you can use:
querySelectorAll
forEach
addEventListener
closest
The snippet:
var table = document.querySelectorAll('#user_table tr button');
table.forEach(function(ele) {
ele.addEventListener('click', function (e) {
var rowid = (this.closest('td').previousElementSibling.innerHTML);
console.log(rowid);
})
});
<table id="user_table">
<tr>
<th>Group name</th>
<th>Manage group</th>
</tr>
<tbody>
<tr>
<td>Test 1</td>
<td><button>Button</button></td>
</tr> <tr>
<td>Test 2</td>
<td><button>Button</button></td>
</tr>
</tbody>
</table>

I'm sending a value when clicking on checkbox in a html table it has to display selected value in text area. But uncheck is not working

Here is my code
Html :
<table id="customGroupupdatepersonTable" class="table table-bordered"">
<thead>
<tr class=" info">
<th>check box</th>
<th>Person Name</th>
</tr>
</thead>
<tbody class="person_table">
<% #all_person_names.each do |name| %>
<tr id="tr_prsn_<%=name['id'] %>">
<td>
<input type="checkbox" class="checkBox" name="checkBox_custom_B[]" onchange="clickedUpdateParamBox('<%=name['person_name']%>')">
</td>
<td style="word-break:break-all;">
<%= name['person_name']%>
</td>
</tr>
<% end %>
</tbody>
</table>
JavaScript:
function clickedUpdateParamBox(source) {
var values = "," + source;
if (!values.includes('{i}')) {
document.getElementById("person_object_update").value =
values.join("\n");
} else if (values.includes('{i}')) {
document.getElementById("person_object_i_value").value = values;
var x = document.getElementById("update_person_i_value");
}
}
description:
when I click on checkbox it is adding that value into appropriate checkbox but if it has {i} in that value is displaying in a text area and if it is not having {i} it is showing in another checkbox. I am not able to apply to unselect code to this checkbox function.
Help me to how to apply to uncheck code for this checkbox function now when I click for uncheck also it is adding that value into the text area.

Merging rows using javascript

This is the Category model:
var mongoose = require("mongoose");
var categorySchema = new mongoose.Schema({
name:String,
image:String,
description:String,
series: [
{
type: mongoose.Schema.Types.ObjectId,
ref: "Series"
}
]
});
module.exports= mongoose.model("Category",categorySchema);
And This is the series model
var mongoose=require("mongoose");
//making the schema
var seriesSchema = new mongoose.Schema({
name:String,
type:String,
application:String,
product:[{
type: mongoose.Schema.Types.ObjectId ,
ref:"Product"
}]
});
module.exports=mongoose.model("Series",seriesSchema);
So each Category includes some series that has a name and an application and series in an array.
My table and this is the original code:
<table class="table">
<thread>
<tr>
<th scope="col" class="mytable">Series Name</th>
<th scope="col" class="mytable">Series Application</th>
</tr>
</thread>
<tbody>
<% Category.series.forEach(function(series){ %>
<tr>
<td><strong><%=series.name%></strong></td>
<td><em><%=series.application%></em></td>
</tr>
<% }); %>
</tbody>
</table>
I want to merge rows that have the same content. I tried to use a for loop which ended up screwing the whole thing new results:
<table class="table">
<thread>
<tr>
<th scope="col" class="mytable">Series Name</th>
<th scope="col" class="mytable">Series Application</th>
</tr>
</thread>
<tbody>
<% for(var i=1;i<series.length;i++){ %>
<tr>
<td><strong><%=series[i-1].name%></strong></td>
<% var j=1;%>
<% console.log(series[i]);%>
<% if(series[i-1].application==series[i].application){ %>
<% j++; %>
<td rowspan="<%=j%>"><em><%=series[i-1].application%></em></td>
<% } else { %>
<td><em><%=series[i-1].application%></em></td>
<% } %>
<% j=0;%>
</tr>
<% }; %>
</tbody>
</table>
As far as I can see, you really don't have rows with equal content in them. They either differ in the first column or in both. Anyway, it appears to me as if you'd try to combine the rows if their contents are equal in the second column.
In case it is OK to loose the information inside the first column, you'll want to just skip the entire row. Just move the comparison before you render the <tr>. Don't forget that you have to render the first row in any case. For example:
<table class="table">
<thread>
<tr>
<th scope="col" class="mytable">Series Name</th>
<th scope="col" class="mytable">Series Application</th>
</tr>
</thread>
<tbody>
<% for(var i = 0; i < series.length; i++){ %>
<% if(i < 1){ %>
<tr>
<td>
<strong>
<a href="/categories/<%=Category._id%>/series/<%=series[i]._id%>/products"><%=series[i].name%>
</a>
</strong>
</td>
<td>
<em><%=series[i].application%></em>
</td>
</tr>
<% } else if(series[i-1].application !== series[i].application){ %>
<tr>
<td>
<strong>
<a href="/categories/<%=Category._id%>/series/<%=series[i]._id%>/products"><%=series[i].name%>
</a>
</strong>
</td>
<td>
<em><%=series[i].application%></em>
</td>
</tr>
<% }; %>
<% } %>
</tbody>
</table>
The other possibility would be to combine the values of the first column. Solving that inside the loop is going to get fuzzy. It's easier to combine the information before you render them, although you have to utilize a bit more extra JavaScript for it. The JS changes the structure in such a way, that it merges contents in the first column together (link in the code below) if they have the same application:
function mergeEqApplications (series) {
return series.reduce(function (acc, s) {
if (!acc.hasOwnProperty(s.application)) {
acc[s.application] = {
link: [{name: s.name, id: s._id}],
application: s.application
};
} else {
acc[s.application].link.push({name: s.name, id: s._id});
}
return acc;
}, {});
}
function objToArray (obj) {
return Object.keys(obj).map(function (key) { return obj[key]; });
}
function convert (series) {
return objToArray(mergeEqApplications(series));
}
Category.series = convert(Category.series);
<table class="table">
<thread>
<tr>
<th scope="col" class="mytable">Series Name</th>
<th scope="col" class="mytable">Series Application</th>
</tr>
</thread>
<tbody>
<% Category.series.forEach(function (series) { %>
<tr>
<td>
<strong>
<% series.link.forEach(function (info) { %>
<a href="/categories/<%= Category._id %>/series/<%= info.id %>/products">
<%= info.name %>
</a>
<% }); %>
</strong>
</td>
<td>
<em><%= series.application %></em>
</td>
</tr>
<% }); %>
</tbody>
</table>

unable to pass table td value to JS function variable

I'm trying pass a table td value of HTML to JS variable but the value is not passing from html to js function.
HTML -
<table id="persontable" class="table table-bordered">
<thead>
<tr>
<th>person name</th>
<th>address</th>
</tr>
</thead>
<tbody class="person_table">
<% #my_persons.all.each do |person| %>
<tr>
<td id="selectedPerson" style="word-break:break-all;">
<%=person.name%>
</td>
<td>
<b id="person_address" style="float: right;">Not available </b>
<!-- <b id="confirm_person"></b>-->
</td>
</tr>
</tbody>
</table>
JS -
function getSelectedPerson() {
var person_name = document.getElementById("selectedPerson").value;
alert(person_name)
}
I'm getting a null value.
Not all elements support value property. See this for element supporting value property.
For td, you can use innerText as document.getElementById("selectedPerson").innerText

How to populate table based on button click

I have a table which contains some data about car makes.
It looks like this:
Now in the table appears data for all makes, but I need to show data only for the make that I've clicked. For example if I click on Audi to show data only for this make.
This is my view where I have populated the table:
<div class="row">
#{var testList = Model.ProductMatchingVehicles.GroupBy(p => p.Make.Name).ToList(); foreach (var item in testList) {
<div class="btn btn-danger btnMake" data-id="#item.Key" id=btnMake onclick="myFunction()">#item.Key</div>
} }
</div>
<div class="row">
<div class="col-xs-12">
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Engine</th>
<th>Data</th>
<th></th>
</tr>
</thead>
<tbody>
#if (Model.ProductMatchingVehicles != null) { foreach (var item in Model.ProductMatchingVehicles) {
<tr>
<td>#item.Make.Name</td>
<td>#item.Model.Name</td>
<td>#item.Engine.Name</td>
</tr>
} }
</tbody>
</table>
</div>
</div>
Can you please advise me how to achieve this in javascript or jquery? Thanks!
You can try with following code:
1) Modify <tbody> as follows:
<tbody>
#if (Model.ProductMatchingVehicles != null) { foreach (var item in Model.ProductMatchingVehicles) {
<tr class="vehicle_rows" data-refId="#item.Key">
<td>#item.Make.Name</td>
<td>#item.Model.Name</td>
<td>#item.Engine.Name</td>
</tr>
} }
</tbody>
Here we have added the class and data-refId attribute to each <tr>
2) Modify the button click function a bit:
<div class="btn btn-danger btnMake" data-id="#item.Key" id=btnMake onclick="myFunction(this)">#item.Key</div>
Here passing this reference to function
3) The function myFunction will have logic something like this:
function myFunction(obj){
var $button = $(obj);
var car_make = $button.data("id"); //reading the data-id of clicked button
//hide all rows first
$(".vehicle_rows").hide();
//show only currenly clicked buttons associated rows
$(".vehicle_rows[data-refId="+car_make+"]").show();
}

Categories