JavaScript multiple incrementing variable solution - javascript

I have a variable ver i = 1.
I have a table as follows;
<table>
<tr class="testrow">
<td class="prev"> </td>
<td class="data"> </td>
<td class="next"> </td>
</tr>
<tr class="testrow">
<td class="prev"> </td>
<td class="data"> </td>
<td class="next"> </td>
</tr>
<tr class="testrow">
<td class="prev"> </td>
<td class="data"> </td>
<td class="next"> </td>
</tr>
<tr class="testrow">
<td class="prev"> </td>
<td class="data"> </td>
<td class="next"> </td>
</tr class="testrow">
<tr>
<td class="prev"> </td>
<td class="data"> </td>
<td class="next"> </td>
</tr>
</table>
The table may have more rows. I want a variable to increase value by 1 when I click next and decrease by 1 for prev. This can be done easily. But I want some variable which is row dependent. When I clicknext in first row, the variable value should be 2, but it should not change when I click either next or prev in any other row. Also this should be the case in all other rows. The minimum value of variable should be 1.
It will be helpful if someone provide me a fiddle with the variable displayed in the middle cell of each row. Note that in this demo, it should not be something to ++ or -- the text or data in the middle cell.
Here is my fiddle.

I'd use jQuery.data() to store the variable in each row, changing it when the user clicks prev/next:
$(function() {
$(".testrow").each(function() {
var $row = $(this);
// set the initial value
$row.data("currentIndex", 1);
$row.find(".prev").click(function() {
$row.data("currentIndex", $row.data("currentIndex") - 1);
alert("currentIndex: "+$row.data("currentIndex"));
});
$row.find(".next").click(function() {
$row.data("currentIndex", $row.data("currentIndex") + 1);
alert("currentIndex: "+$row.data("currentIndex"));
});
});
});
jsFiddle: http://jsfiddle.net/5TPCK/12/

$('table tr .next').click(function() {
alert($(this).closest('tr').index());
});
http://jsfiddle.net/ThiefMaster/5TPCK/2/
Btw, </tr class="testrow"> is horribly wrong - it should only be </tr>.

Couldn't you keep an array of these counters (this would work if the number of rows is known beforehand and static)? Otherwise you could attach the counter to each <tr> element using the jquery data() function.
See: http://api.jquery.com/jQuery.data/

Related

How to make rowspan add 1 and new row added last with javascript jquery?

Here I want to add new row under name and age. The colspan of ApplyPeople will be added to 1.But I failed, here is my JS code:
$(document).ready(function()
{
$('#add').click(function () {
newrow = '<tr><td style="width:25%">John</td><td style="width:55%">20</td></tr>';
$('#apply').rowspan = $('#apply').rowspan + 1;
$('#staTable tr:xie').append(newrow);
});
}
Before click, html code:
<tr>
<td style="width:20%" rowspan=1 id="apply">
applyPeople<br />
<input type="button" id="add" value="add">
</td>
<td style="width:25%">name</td>
<td style="width:55%">age</td>
</tr>
<tr>
<td style="width:20%">zone</td>
<td style="width:80%" colspan=2>letter</td>
</tr>
After click, html code:
<tr>
<td style="width:20%" rowspan=2 id="apply">
apply<br />
<input type="button" id="add" value="add">
</td>
<td style="width:25%">name</td>
<td style="width:55%">age</td>
</tr>
<tr id="xie" >
<td style="width:25%">John</td>
<td style="width:55%">20</td>
</tr>
<tr>
<td style="width:20%">zone</td>
<td style="width:80%" colspan=2>letter</td>
</tr>
What is wrong with my code? Who can help me?
You can use jQuery's .attr() to achieve what you want:
Comments in code for js, - and also in your html, start your rowspan off as 2 (or the number of rows you start in your table) and get rid of the colspan in the second row - the rowspan handles the missing column
$('#addPeople').click(function () {
newrow = '<tr><td style="width:25%">John</td><td style="width:55%">20</td></tr>';
var rowspan = parseInt($('#appPeople').attr('rowspan')) + 1; // use attr to get the rowspan and parseInt to make it an int
$('#appPeople').attr('rowspan', rowspan); // use attr to set the rowspan
$('#staTable tr:eq(0)').after(newrow); // use after if you want to add it after the first row, eq(0) means get the first instance of
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="staTable">
<tr>
<td style="width:20%" rowspan=2 id="appPeople">
applyPeople<br />
<input type="button" id="addPeople" value="">
</td>
<td style="width:25%">name</td>
<td style="width:55%">age</td>
</tr>
<tr>
<td style="width:20%">zone</td>
<td style="width:80%">letter</td>
</tr>
</table>

How to check value of td element inside parent tr element from another child td element

I´m using the DataTables table plug-in for jQuery. I have 4 columns, one of them contains buttons (Edit&Delete). I need to check the value of another column (in the same parent tr element) upon clicking one of the buttons using JavaScript/jQuery.
<tr role="row" class="odd">
<td class="sorting_1">0 <!-- I need this number --> </td>
<td>Exercise 1</td>
<td>nl</td>
<td class=" dt-center"> <!-- this element conatains the buttons --> </td>
</tr>
Could someone helpt me out? Thanks in advance. =)
When you click on the button, then you can ask for the closest tr and then find the specific td and ask for the text inside it.
$(this).closest("tr").find(".sorting_1").text()
$('.getvalue').click(function() {
console.log($(this).closest("tr").find(".sorting_1").text())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr role="row" class="odd">
<td class="sorting_1">0 </td>
<td>Exercise 1</td>
<td>nl</td>
<td class=" dt-center"> <button class="getvalue">get value</button></td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1">2</td>
<td>Exercise 2</td>
<td>n2</td>
<td class=" dt-center"> <button class="getvalue">get value</button></td>
</tr>
</table>

Calculating sum of td classes using js or jQuery

I have a dropdown select menu with various options (i.e. 5, 10, 15, 20...) that represents # of computers. The default select menu value is 5. I am using some js to multiply the dropdown selection by an amount (i.e. 10) and populates a table td with a class of .price-1. So, for example if the user leaves the default selection of 5, the calculated value of .price-1 is 50.
This is working fine. 
However, I then need to sum .price-1 with a few other <td> classes (i.e. .price-2, .price-3, .price-4...) to get a grand total in $ values that shows in #result.
How can I use js or jQuery to sum these td classes to get the grand total?
Below is my html of my table I need to sum.
<table id="tableOrderTotal" class="table tableTotal">
<tbody>
<tr>
<td>Item1</td>
<td class="price-1">calculated amount populated here</td>
</tr>
<tr>
<td>Item2</td>
<td class="price-2">calculated amount populated here</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-3">13</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-4">30</td>
</tr>
<tr class="summary">
<td class="totalOrder">Total:</td>
<td id="result" class="totalAmount"> </td>
</tr>
</tbody>
</table>
Get all td elements either using attribute value contains selector or by second td element of tr using :nth-child(). Now iterate over them using each() method and get sum using the text inside.
var sum = 0;
$('td[class*="price-"]').each(function() {
sum += Number($(this).text()) || 0;
});
$('#result').text(sum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableOrderTotal" class="table tableTotal">
<tbody>
<tr>
<td>Item1</td>
<td class="price-1">calculated amount populated here</td>
</tr>
<tr>
<td>Item2</td>
<td class="price-2">calculated amount populated here</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-3">13</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-4">30</td>
</tr>
<tr class="summary">
<td class="totalOrder">Total:</td>
<td id="result" class="totalAmount"></td>
</tr>
</tbody>
</table>
With Array#reduce method as #rayon suggested.
$('#result').text([].reduce.call($('td[class*="price-"]'), function(sum, ele) {
return sum + (Number($(ele).text()) || 0);
}, 0));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableOrderTotal" class="table tableTotal">
<tbody>
<tr>
<td>Item1</td>
<td class="price-1">calculated amount populated here</td>
</tr>
<tr>
<td>Item2</td>
<td class="price-2">calculated amount populated here</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-3">13</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-4">30</td>
</tr>
<tr class="summary">
<td class="totalOrder">Total:</td>
<td id="result" class="totalAmount"></td>
</tr>
</tbody>
</table>
jQuery Object has a direct attribute referring to the number of the matched elements.
var sum = $('td[class*="price-"]').length;
$('#result').text(sum);

Manipulating rows and columns in HTML table with multi-row cells

I have an html table with cells that span multiple rows:
<table border="1" style=""><tbody id="x">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3">**</td>
<td>AAAA</td>
<td> </td>
</tr>
<tr id="row2">
<td>BBBB</td>
<td> </td>
</tr>
<tr>
<td>CCCC</td>
<td> </td>
</tr>
<tr>
<td style=""> </td>
<td id="ee">EEEE</td>
<td> </td>
</tr>
<tr>
<td style=""> </td>
<td id="dd">DDDD</td>
<td> </td>
</tr>
</tbody></table>
<script type="text/javascript">
alert ("index of dd before delete =" + document.getElementById("dd").cellIndex);
document.getElementById("row2").style.display="none";
alert ("index of dd after delete =" + document.getElementById("dd").cellIndex);
</script>
I am trying to manipulate it in Javascript, eg hide row2.
When I do that, the multi-row cell containing "**" moves down, shifting all the cells in row 3 by 1 to the right. Evidently I have to reduce its rowSpan.
But it seems when I am looking at row 1, I have no way of knowing that there is a multi-row cell intersecting this row - it seems I have to scan all the rows above row2 for multi-row cells.
Is there a better/quicker way to find out what multi-row cells affect the hiding (or deleting) operation?
Try this using javascript... It is working properly.
Change the value of currRowToDelete for Range [1 to 6].
Refer for working code: http://jsfiddle.net/arunkumrsingh/cdS2D/1/
<table id="tbl" border="1" runat="server" >
<tr id="row1">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row2">
<td rowspan="3">**</td>
<td>AAAA</td>
<td> </td>
</tr>
<tr id="row3">
<td>BBBB</td>
<td> </td>
</tr>
<tr id="row4">
<td>CCCC</td>
<td> </td>
</tr>
<tr id="row5">
<td style=""> </td>
<td id="ee">EEEE</td>
<td> </td>
</tr>
<tr id="row6">
<td style=""> </td>
<td id="dd">DDDD</td>
<td> </td>
</tr>
</table>
<script type="text/javascript">
var trs = document.getElementById("tbl").getElementsByTagName("tr");
var tds;
var bDeleted = false;
var currRowToDelete = 3;
for(var i=0;i<currRowToDelete;i++)
{
tds = trs[i].getElementsByTagName('td');
for(var j=0;j<tds.length;j++)
{
var currRowSpan = tds[j].rowSpan;
if(currRowSpan > 1)
{
if(eval(i + 1) == currRowToDelete)
{
var cell = document.createElement("td");
cell.innerHTML = tds[j].innerHTML;
trs[i + 1].insertBefore(cell, trs[i + 1].getElementsByTagName('td')[0]);
document.getElementById("tbl").deleteRow(i);
bDeleted = true;
document.getElementById("tbl").rows[i].cells[0].rowSpan = eval(currRowSpan -1);
}
else
{
if(eval(currRowSpan + i) >= currRowToDelete)
document.getElementById("tbl").rows[i].cells[0].rowSpan = eval(currRowSpan -1);
}
}
}
}
if(bDeleted == false)
document.getElementById("tbl").deleteRow(currRowToDelete -1);
</script>
I have a solution, in which you don't have to calculate the Rowspan and Colspan.
Step 1: Get the content of HTML (As mentioned above) and save as EXCEL file.
Step 2: Delete the particular Row (ie Row 2).
Step 3: Save as HTML file and Read the HTML content.
You will get the HTML in correct format.

Getting the 'co-ordinates' of a <TD> cell using jQuery

I'm building somewhat of a different website, below is my HTML markup and my question. Please don't be put off by this wall of text, I'm sure it's really not a difficult problem for someone who know's their stuff but it takes some explaining.
<div id="0" class="cell" style="top: 0px; left: 0px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr id="0">
<td id="0"> </td>
<td id="1"> </td>
<td id="2"> </td>
<td id="3"> </td>
<td id="4"> </td>
<td id="5"> </td>
<td id="6"> </td>
<td id="7"> </td>
<td id="8"> </td>
<td id="9"> </td>
<td id="10"> </td>
<td id="11"> </td>
<td id="12"> </td>
<td id="13"> </td>
<td id="14"> </td>
<td id="15"> </td>
</tr>
<tr id="1">
<td id="0"> </td>
<td id="1"> </td>
<td id="2"> </td>
<td id="3"> </td>
<td id="4"> </td>
<td id="5"> </td>
<td id="6"> </td>
<td id="7"> </td>
<td id="8"> </td>
<td id="9"> </td>
<td id="10"> </td>
<td id="11"> </td>
<td id="12"> </td>
<td id="13"> </td>
<td id="14"> </td>
<td id="15"> </td>
</tr>
</tbody>
</table>
</div>
This markup is repeated in a tiling sort of pastern in order to fill the entire page. A similar DIV might be:
<div id="1" class="cell" style="top: 144px; left: 0px;">
<!-- The rest of the table code here... -->
</div>
If you can't see it already, I'm creating a load of cells across the entire page sorted into DIVs. Now, when a user clicks into a cell (one of the <td>'s), I want to get it's co-ordinates represented by: 0, 1, 5.
In this example, 0, 1, 5 is the DIV with id of 0, the TR element inside that DIV with the ID of 1, and lastly the cell inside that TR element with an ID of 5. I wanted to write a javascript function to get these co-ordinates, but I am at a complete loss on what parameters to pass, and little idea how I can get out the co-ordinates.
From as far as I can think once I can pass a click event(?) to the function I can look at the <td>'s parent elements and get their IDs?
If anyone can provide a solution to this problem or provide any input, it'd be greatly appreciated.
Since it is not valid to begin an ID with a number, I'll offer a different solution.
Since your IDs are basically index numbers, you can use jQuery's .index() method to get what you need.
Test it here: http://jsfiddle.net/hBarW/
$('td').click(function(){
var $th = $(this);
var td_idx = $th.index();
var tr_idx = $th.closest('tr').index();
var div_idx = $(this).closest('div').index();
alert(td_idx + ' ' + tr_idx + ' ' + div_idx);
});
Use the closest jQuery function, which returns the parent element that you specify.
Like this:
$("td").click(function () {
var parentDIVId = $(this).closest("div").attr("id");
var parentTRId = $(this).closest("tr").attr("id");
var myId = $(this).attr("id");
}
try
$('td').click(function(){
var td = this.id;
var tr = $(this).closest('tr').attr('id');
var div = $(this).closest('div').attr('id');
});
you can test it here.
more on .closest() here
the easy thing would be
$('td').click(function(){
$this = $(this);
alert( $this.closest('div').attr('id') + ',' + $this.closest('tr').attr('id') + ',' + $this.attr('id'));
});
But you have some issues..
you cannot have numbers as IDs
IDs should be unique inside the DOM ...

Categories