Ok, I have a table and I need to move data in the cells over one cell. For instance in the following table I need the data in cells to move one, as in...cell 6 to move to cell 9 and cell 9 to move to cell 8 8 to cell 7 and so on. So only the outside cells move. Cell number 5 stays still. This all happens onclick of a button. How can this be done? Maybe an array?
HTML
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr><tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<button id="moveStuff">Move!</button>
Here I move the cell value using the button as you need.
FiddleDemo:Demo
Script:
$(document).ready(function () {
$("#moveRow").click(function () {
var MyRows = document.getElementById("cellMove");
var ninecell = MyRows.rows[2].cells[2].innerHTML;
MyRows.rows[2].cells[2].innerHTML=MyRows.rows[1].cells[2].innerHTML;
MyRows.rows[2].cells[1].innerHTML = ninecell;
});
});
Related
I'm making a dinamic table and i have a problem with my code. He is checking every TD and aligning it individuality.
I want to put a rule like this:
If (ThereIsAnyLetterInThisColumn) -> AlignAllThisColumnToLeft
Here is a Example Plunker: https://plnkr.co/edit/5HtbKh8B1mJEk0yqQIkd?p=preview
In this example, for example, all values must be left-aligned, because in the column there are numbers and letters. If the column were all numeric, it should be aligned to the right
Can anyone help me?
Thanks a lot!!
in the third column, since there i 4s in the last row, ENITRE columnis aligned right.
the second column s aligned left since there is no letter
the first column is alinged right since all are letters.
$('td').each(function(){
if(isNaN($(this).text())){
var idx = $(this).index();
$('tr').each(function(){ $(this).children('td:eq('+idx+')').addClass('left-align');})
}
});
.left-align{ text-align:left;}
td{border:1px solid #ccc; text-align:right}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width=500 cellborder=1>
<tr>
<td>one</td>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>two</td>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>three</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>four</td>
<td>4</td>
<td>4s</td>
</tr>
</table>
I think this code should work for you.
$('td').each(function(){
var text_td = $(this).html();
if (text_td.indexOf('yourletter') > -1) {
$(this).css('text-align','right');
}
}
The idea is to move a particular table row to a different location
HTML
<table id="grid1" class="table table-zebra">
<tbody>
<tr>
<td>Cont 1 tr 1</td>
</tr>
<tr>
<td>Cont 2 tr 2</td>
</tr>
<tr>
<td>Cont 3 tr 3</td>
</tr>
<tr>
<td>Cont 4 tr 4</td>
</tr>
<tr>
<td>Cont 5 tr 5</td>
</tr>
<tr>
<td>Cont 6 tr 6</td>
</tr>
<tr>
<td>Cont 6 tr 6</td>
</tr>
<tr>
<td>Cont 7 tr 7</td>
</tr>
<tr>
<td>Cont 8 tr 8</td>
</tr>
<tr>
<td>Cont 9 tr 9</td>
</tr>
<tr>
<td>Cont 10 tr 10</td>
</tr>
<tr>
<td>Cont 11 tr 11</td>
</tr>
<tr>
<td>Cont 12 tr 12</td>
</tr>
<tr>
<td>Cont 13 tr 13</td>
</tr>
<tr>
<td>Cont 14 tr 14</td>
</tr>
</tbody>
</table>
That is the basic table, now, how do I can I move the TR 11 in a away that it will be under TR 4, I'm sorry that I don't post any JS but I have no idea how to do it... I was looking at this JSbin which is nice but can't use it..
Move the 11th tr to under the 4th:
$("tbody tr:nth-child(11)").insertAfter("tbody tr:nth-child(4)");
Working demo
If you prefer vanilla, you need the selectors the other way around.
document.querySelector("tbody tr:nth-child(4)").insertAdjacentElement("afterend", document.querySelector("tbody tr:nth-child(11)"));
In the context of an HTML table with rows that look like this:
<tr class="form-grid-view-row">
<td>
<a class="up" href="#">⇑</a>
</td>
<td>
<a class="down" href="#">⇓</a>
</td>
<td>
<span id="index1" class="form-label">1</span>
</td>
<td>
<span id="span1" class="form-label">Value 1</span>
</td>
</tr>
And this script:
$('.up,.down').click(function () {
var row = $(this).parents('tr:first');
if ($(this).is('.up')) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
$('.up,.down').click(function () {
This is selecting every DOM element with the class "up" and every element with the class "down", e.g. $('.up,.down').click(function () {. The function sets up a click handler for each element.
var row = $(this).parents('tr:first');
$(this) refers to the DOM element which is the target of the click handler (one of the "up" or "down" elements which was selected above). .parents() looks for tr:first, the first <tr> element starting with <a> and travelling up the DOM. It'll end up selecting the entire row.
if ($(this).is('.up')) {
This is checking to see whether or not the element selected has the class "up" or not.
row.insertBefore(row.prev());
This takes the row that was clicked, and moves it right above the upper-most sibling of the row that was clicked.
The jQuery methods used (insertBefore, prev, is, parents, etc.) are described in greater detail in the jQuery documentation.
You can do it by using JQuery Library.
// selecting tbody is bad instead you need to give an id or class to this tag and select according to this
var fourth = $( "tbody tr:nth-child(4)" ),
eleventh = $( "tbody tr:nth-child(11)" );
$( "tbody tr:nth-child(11)" ).insertAfter(fourth);
In order to move dynamically your elements you can add an event to all tbody children. What I basically do is select one element on first click then I move it after second element clicked.
$(document).on("ready", function () {
var $tbody = $("#grid");
var selected = null;
$tbody.children().on("click", function () {
if (selected == null)
selected = this;
else
{
$(selected).insertAfter(this);
selected = null;
}
});
});
It move after an element but is just an idea, you can customize it.
Your html should be like this.
<table>
<tbody id="grid">
<tr> <td> 1 </td> </tr>
<tr> <td> 2 </td> </tr>
<tr> <td> 3 </td> </tr>
<tr> <td> 4 </td> </tr>
</tbody>
</table>
I'm trying to move cell values within a three by three table. But I am moving one cell at a time with the click of a button. Is this possible with jQuery or JS? I have the following table:
[1][2][3]
[4][5][6]
[7][8][9]
and I want to click a button to move right like so:
[4][1][2]
[7][5][3]
[8][9][6]
and so on..
this is my HTML:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr><tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<button id="moveStuff">Move!</button>
This is so hacky and I don't necessarily advise it, but it should give you a place to start out from. Basically what you can do is create a function that grabs all the tds and based on their index value, rearrange them. Every time the function is called, it recreates the cells variable, meaning it will always start out fresh with the correct index values associated with the correct cells.
Source: http://jsfiddle.net/9nfvc/
Demo: http://jsfiddle.net/9nfvc/show
HTML
<table id="rotation">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr><tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<button id="moveStuff">Move!</button>
javascript
document.getElementById('moveStuff').onclick = (function(){
var cells = document.getElementById('rotation').getElementsByTagName('td');
var rows = document.getElementById('rotation').getElementsByTagName('tr');
rows[2].appendChild(cells[5].parentNode.removeChild(cells[5]));
rows[1].appendChild(cells[2].parentNode.removeChild(cells[2]));
rows[1].insertBefore(cells[5].parentNode.removeChild(cells[5]), cells[3]);
rows[0].insertBefore(cells[2].parentNode.removeChild(cells[2]), cells[0]);
});
EDIT
I like this way better.
Source: http://jsfiddle.net/ZquQL/
Demo: http://jsfiddle.net/ZquQL/show
javascript
document.getElementById('moveStuff').onclick = (function(){
var parent = document.getElementById('rotation');
var cells = [];
var rows = parent.getElementsByTagName('tr');
var patern = [3,0,1,6,4,2,7,8,5];
for (var i = 0; i < rows.length; i++) {
while(rows[i].firstChild) {
var node = rows[i].removeChild(rows[i].firstChild)
if(node.nodeType === document.ELEMENT_NODE) cells.push(node);
}
}
row = -1;
for(i in cells) {
if(i%3 === 0) row++;
rows[row].appendChild(cells[patern[i]]);
}
});
I have a html table as below:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
On click of a td I am changing the color of it's next 4 td's and for that I have done it in jquery as below:
$(this).nextAll("td").slice(0, 4).addClass("selected");
Above code is working if I click on 1st TD then it selects further 4 td's but if I click on 4th td then it selects only 5th td. I want it to select another 3 td's in next row as well.
Please tell me how can I fix this?
jQuery .index() method returns the index of passed element in the current set. By using returned index you can .slice() the collection, this is more efficient than querying the DOM on each click, especially when you have a big table:
var $tds = $('#table td').on('click', function() {
var i = $tds.index(this);
$tds.slice(++i, i+4).addClass("selected");
});
http://jsfiddle.net/MamYX/
You can simply add the td of the following row. :
$(this).nextAll("td").add($(this).closest('tr').nextAll().find('td'))
.slice(0, 4).addClass("selected");
Demonstration
var $tds = $('table td').click(function(){
var idx = $tds.index(this);
$tds.filter(':gt(' + idx + '):lt(4)').addClass('selected')
})
Demo: Fiddle
html JS FIDDLE HERE
See first example home,Scripts,Snippet. if Script Parent is 1 it should under home tr,if Snippet parent id is 6 it is under the Script menu
<table id="sort-table">
<tbody>
<tr>
<th>Id</th>
<th>Parent</th>
<th>Title</th>
</tr>
<tr>
<td>1</td>
<td>0</td>
<td>home</td>
</tr>
<tr>
<td>2</td>
<td>0</td>
<td>Code</td>
</tr>
<tr>
<td>3</td>
<td>0</td>
<td>Contact</td>
</tr>
<tr>
<td>4</td>
<td>10</td>
<td>PHP</td>
</tr>
<tr>
<td>5</td>
<td>2</td>
<td>CSS</td>
</tr>
<tr>
<td>6</td>
<td>1</td>
<td>Scripts</td>
</tr>
<tr>
<td>8</td>
<td>4</td>
<td>Archive</td>
</tr>
<tr>
<td>9</td>
<td>6</td>
<td>Snippet</td>
</tr>
<tr>
<td>10</td>
<td>0</td>
<td>samitha</td>
</tr>
<tr>
<td>7</td>
<td>4</td>
<td>help</td>
</tr>
</tbody>
</table>
<span></span>
<br>
<button class="sort-table asc">sort</button>
jquery
$('.sort-table').click(function (e) {
var table = $("table tbody");
table.find('tr').each(function () {
var $tds = $(this).find('td'),
id = $tds.eq(0).text(),
parent = $tds.eq(1).text(),
title = $tds.eq(2).text();
if (parent === 0) {
}
});
});
output
Id Parent Title
1 0 home
2 0 Code
3 0 Contact
4 10 PHP
5 2 CSS
6 1 Scripts
8 4 Archive
9 6 Snippet
10 0 samitha
7 4 help
I want to sort it like bellow
2nd table
Id Parent Title
1 0 home
6 1 Scripts
9 6 Snippet
2 0 Code
5 2 CSS
3 0 Contact
10 0 samitha
4 10 PHP
8 4 Archive
7 4 help
I want if the parent Id is the id of menu it need to be sort like above 2nd table.I did something with and i need to go though on this ?
As there is no apparent system to sort by, I guess you have to define something yourself :
$('.sort-table').click(function (e) {
var sort = [1,6,9,2,5,3,10,4,8,7],
table = $("table tbody"),
tr = table.find('tr');
$.each(sort, function(_,index) {
tr.filter(function() {
return parseInt($('td:first', this).text(), 10) == index;
}).appendTo(table);
});
});
FIDDLE
EDIT:
I think maybe I get it, but I probably don't?
If you are trying to add each TR element after the TR element that has the ID of the given parent element in the current TR etc... ???
Anyway, try this :
$('.sort-table').click(function (e) {
var table = $("table tbody"),
tr = table.find('tr');
$.each(tr, function(_,el) {
var par = parseInt($(el).find('td').eq(1).text(), 10);
if (par !== 0) {
var par_el = tr.find('td:first').filter(function() {
return parseInt($(this).text(),10) == par;
}).closest('tr');
par_el.after(el);
}
});
});
FIDDLE