How to stop scrolling on some part of table - javascript

I have a table in my page like following:
<div style="overflow-x: scroll; width:300px;">
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Now the table is scrolling in x direction. but i want to prevent the first and second column to scrolling. Please help

Related

select multiple tr and redirect on single tr click

I have a table. This is the sample code for it.
<table>
<thead>
<tr>
<td>filename</td>
<td>file size</td>
<td>date</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox">
file 1
</td>
<td>
1MB
</td>
<td>
13-01-12
</td>
</tr>
<tr>
<td>
<input type="checkbox">
file 2
</td>
<td>
2MB
</td>
<td>
23-12-17
</td>
</tr>
</tbody>
</table>
I have a check box input at each row to select multiple tr in tables. I also need to get redirected to the detail view of the file onclick. so, this is my JS code
$(document).on("click", "table tbody tr", function() {
window.location = $(this).data('href');
});
Now whenever I am trying to click the check box the tr is getting clicked. So, the page is getting redirected to another page. But select is not working. How to prevent page redirection on clicking on select.
Thanks in advance
UPDATE::
I want to implement functionality like Inbox mails in gmail. Whenever I click on any of the mail, it gets opened. If I check the checkbox the corresponding mail will be selected.
When an element is clicked, it bubbles up to the highest point in the DOM which has a click event attached. To prevent your checkboxes from triggering the click event on your <tr>'s, you need to stop the 'bubbling'.
Add this to your code:
$('input:checkbox').on("click", function(e){
e.stopPropagation();
});
Source: How do I prevent a parent's onclick event from firing when a child anchor is clicked?
Since the checkbox is a child of the table row, when you click the checkbox the click event is propagated up the DOM. This means it bubbles up to all its parent elements as well, and any click events defined on those parents are also triggered.
Therefore, the click event you placed on the table row is also executed when you click on the checkbox.
Fortunately, you can prevent this by handling the checkbox's click event and running the stopPropagation method, which turns off this "bubbling" behaviour.
Demo:
$(document).on("click", "table tbody tr", function() {
alert("click"); //just for testing
//window.location = $(this).data('href');
});
$(document).on("click", 'input[type="checkbox"]', function(event) {
event.stopPropagation();
});
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #cccccc;
padding 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>filename</td>
<td>file size</td>
<td>date</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox"> file 1
</td>
<td>
1MB
</td>
<td>
13-01-12
</td>
</tr>
<tr>
<td>
<input type="checkbox"> file 2
</td>
<td>
2MB
</td>
<td>
23-12-17
</td>
</tr>
</tbody>
</table>
use Event.Target
document.querySelector("table")
.addEventListener("click" , event=>{
if(( event.target ).tagName == "TD" || ( event.target ).tagName == "TR" ){
alert("redirect")
}
if(( event.target ).tagName == "INPUT" ){
alert("select")
}
})
<table>
<thead>
<tr>
<td>filename</td>
<td>file size</td>
<td>date</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox">
file 1
</td>
<td>
1MB
</td>
<td>
13-01-12
</td>
</tr>
<tr>
<td>
<input type="checkbox">
file 2
</td>
<td>
2MB
</td>
<td>
23-12-17
</td>
</tr>
</tbody>
</table>
Try following code:
<table>
<thead>
<tr>
<td>filename</td>
<td>file size</td>
<td>date</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox">
file 1
</td>
<td>
1MB
</td>
<td>
13-01-12
</td>
</tr>
<tr>
<td>
<input type="checkbox">
file 2
</td>
<td>
2MB
</td>
<td>
23-12-17
</td>
</tr>
</tbody>
</table>

How to change the visibility of a table row in Javascript?

I am trying to show/hide rows in a HTML table by javascript. Checking the check box shall show the additional rows, unchecking it shall hide them.
<html><body><form><table>
<tr>
<td> This row is always visible. </td>
</tr>
<tr>
<td>
<input id="cbox" type="checkbox" onchange="for(e in document.getElementsByClassName('switchMe')) e.style.display = document.getElementById('cbox').checked ? 'block' : 'none';"/>
<label for="cbox">Show more …</label>
</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td> This row will be shown after the user clicks the check box. </td>
</tr>
<tr class="switchMe" style="display: none; ">
<td> This row too. </td>
</tr>
<tr>
<td> This row is always visible. </td>
</tr>
</table></form></body></html>
However, nothing happens, and I get an e.style is undefined error in the console. How do I access the style attribute of the <tr> element correctly?
(I first tried putting the rows in question in a <div>. That doesn’t give any error, but the rows are always visible, and the <div> is absent in Firebug, so it is probably not allowed there.)
First, for..in is ideal for iterating over objects but not on NodeList.
Second, its a bad practice to have change event listener in html. Anyone can change markup using dev tools and manipulate behaviour of your system. You should use .addEventListener
Third, defining a variable without var will make it global.
Output of for..in
var el_list = document.querySelectorAll('.switchMe');
for(var el in el_list){
console.log(el)
}
<form>
<table>
<tr>
<td>This row is always visible.</td>
</tr>
<tr>
<td>
<input id="cbox" type="checkbox" />
<label for="cbox">Show more …</label>
</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row will be shown after the user clicks the check box.</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row too.</td>
</tr>
<tr>
<td>This row is always visible.</td>
</tr>
</table>
</form>
Sample
JSFiddle
document.querySelector('#cbox').addEventListener('click', function(e) {
var switchEl = document.querySelectorAll('.switchMe');
for (var i = 0; i < switchEl.length; i++)
switchEl[i].style.display = this.checked ? 'block' : 'none';
});
<form>
<table>
<tr>
<td>This row is always visible.</td>
</tr>
<tr>
<td>
<input id="cbox" type="checkbox" />
<label for="cbox">Show more …</label>
</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row will be shown after the user clicks the check box.</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row too.</td>
</tr>
<tr>
<td>This row is always visible.</td>
</tr>
</table>
</form>
You are having an issue with the use of the for...in loop. This isn't really the loop that you should choose for an Array or an (Array like) object, they should only be used for iterating through object keys and properties as they are very slow on array's where there are much faster methods available.
for...in also modifies state so you should have that available eg.
const thing = { one: 1, two: 2 }
for (key in thing) {
console.log(thing[key])
}
You are referencing the thing from the outer scope inside the loop
I Think this is a better way as you are not dealing with any external state when you do your iteration.
const rows = Array.from(document.getElementsByClassName('switchMe'))
const cbox = document.getElementById('cbox')
function changeHandler() {
rows.forEach(row => {
row.style.display = cbox.checked ? 'block' : 'none'
})
}
<html>
<body>
<form>
<table>
<tr>
<td>This row is always visible.</td>
</tr>
<tr>
<td>
<input id="cbox" type="checkbox" onchange="changeHandler()" />
<label for="cbox">Show more …</label>
</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row will be shown after the user clicks the check box.</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row too.</td>
</tr>
<tr>
<td>This row is always visible.</td>
</tr>
</table>
</form>
</body>
</html>
One way to implement what you were trying to do without creating a function as the other answers did would be to do it as shown below.
However this doesn't mean you should do it this way. In practice definitely use the other answers shown.
<html>
<body>
<form>
<table>
<tr>
<td>This row is always visible.</td>
</tr>
<tr>
<td>
<input id="cbox" type="checkbox" onchange="var arr = document.getElementsByClassName('switchMe'); for(var i = 0; i < arr.length; i++) arr[i].style.display = document.getElementById('cbox').checked ? 'block' : 'none';" />
<label for="cbox">Show more …</label>
</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row will be shown after the user clicks the check box.</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row too.</td>
</tr>
<tr>
<td>This row is always visible.</td>
</tr>
</table>
</form>
</body>
</html>

Sort table rows based on background-color using jquery

This is my FIDDLE
<table>
<tr>
<td>
<div style="background:blue;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:pink;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:blue;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:green;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:pink;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:green;color:white">hello</div>
</td>
</tr>
</table>
How do i rearrange the html table rows based on color? I want to group html table rows based on the background color of the rows.
Use sort() to sorting array of tr elements. You can get backgroud-color of element in function of sort and set arrangement of every element.
$("table tr").sort(function (a, b){
return $("div", b).css("background") < $("div", a).css("background") ? 1 : -1;
}).appendTo('table');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div style="background:blue">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:pink">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:blue">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:green">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:pink">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:green">hello</div>
</td>
</tr>
</table>
I reviewed your question, I think you want to differentiate each tr by there color, adding html, style and script for you here.
Here is the Html
<table>
</tbody>
<tr><td>123</td></tr>
<tr><td>123</td></tr>
<tr><td>123</td></tr>
<tr><td>123</td></tr>
<tr><td>123</td></tr>
</table>
Do add this script, by this function all your tr will have unique classes. you can add there background colors etc style on the base of class
<script>
// please do add jQuery file to prevent error
function adddClass() {
for(i=1; i<=6; i++) {
alert("");
jQuery('table tr:nth-child('+ i +')').addClass("color"+i);
}
}
adddClass();
</script>
Here is the style for background color of each table row tr
<style>
.color1{background-color:orange;}
.color2{background-color:teal;}
.color3{background-color:red;}
.color4{background-color:#717171;}
.color5{background-color:khaki;}
.color6{background-color:lightgray;}
tr, table, body{width:100%;}
</style>
Hope this will help, Thanks.!
You can easily do it in javascript.
Initiate an empty js object like this var colorRowmap = {}
Loop through all elements(tr elements) of table and get colorName from each tr. And if that color does not exist as a key of colorRowMap object do colorRowMap[colorName] = [currentTableRow] else do colorRowMap[colorName] = colorRowMap[colorName].push(currentTableRow)
Empty the table.
Loop through all keys of colorRowMap and push the tr roows to table.
Done. :)

How to prepend html text for a selected element in ckeditor 4

I am using CKEditor 4.3.3, Where i have added table .Now table structure looks like given below
<table>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Now i am able to select table using javascript as
CKEDITOR.instances.ficeditor.getSelection().getStartElement().getParent().getParent();
Now i want to add html text before <tbody> start and after <table> start .
CKEDITOR.instances.ficeditor.getSelection().getStartElement().getParent().getParent().appendHtml("<!-- <div>" +html+"</div> -->");
I am using this to append HTML. But for prepending HTML i am not able to find any API
Is there any alternatives?
I want output to be like this
<table>
<!-- <div>testing</div> -->
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody></table>
you can use any jquery functions by
var html=CKEDITOR.instances.ficeditor.getSelection().getStartElement().getParent().getParent().getParent();
$(html.$).prepend("hi");
You can use this
var editor = CKEDITOR.instances.ficeditor;
var data = $("<div>"+editor.getData()+"</div>");
data.prepend("top line");
editor.setData(data.html());

Toggle each table row until a table row with X class is reached

I'm integrating an accordion effect into a table.
The table rows with the class 'more' are children of the above table row. When that table row is clicked, I want the 'more' tr's to toggle. How do I just target those table rows and not the regular 'row' table rows.
<tr class="row first">
<td>
<span class="time">09.00–09.15</span>
<h3>
Welcome and introduction</h3>
</td>
<td>
person info</td>
</tr>
<tr class="row">
<td>
<span class="time">09.00–09.15</span>
<h3>
Welcome and introduction</h3>
</td>
<td>
person info</td>
</tr>
<tr class="more">
<td>
<h3>
hidden content</h3>
</td>
<td>
person info</td>
</tr>
<tr class="more">
<td>
<h3>
hidden info</h3>
</td>
<td>
person info</td>
</tr>
</div>
<tr class="row">
<td>
<span class="time">09.00–09.15</span>
<h3>
Welcome and introduction</h3>
</td>
<td>
person info</td>
</tr>
<tr class="row break">
<td>
<h3>
10.50–11.20 Coffee break</h3>
</td>
<td>
</td>
</tr>
Use a combination of .nextUntil() and :not.
$("table tr.row").each(function(){
var $this = $(this);
$this.click(function(){
$this.nextUntil(":not(.more)").toggle();
});
});
The selector :not(.more) matches all the elements that doesn't contain a more classname.
See it here.

Categories