I have a jquery code that displays results in one row and multiple columns as follows
function () {
var i = noDays;
var days = 30;
while (i < days) {
$('tr').append('<td> ' + i + ' </td>');
i++;
},
}
When I have more than 10 results (10 columns), the row stretch outside the page
How can I divide the row into multiple rows for instance?
if I have 30 columns in 1 row
I would like to instead have 6 columns and 5 rows
Not sure exactly where you're appending the data, but look at the code here: http://jsfiddle.net/kdst5/1/ - using the modulus operator on "i" can tell you when you to move to a new line; Additionally, instead of using $("tr"), you should use a specific selector, not necessarily the variable that I used, but something more specific than a general "every TR" selector.
It is better to create an element and use a reference to it, as opposed to having jquery fire off a selector in every pass.
Here is a working solution and its jsfiddle:
var $table = $("#myTable");
var i = 1;
var days = 30;
var $tr = $("<tr>");
while (i <= days) {
$tr.append('<td>' + i++ + '</td>');
if (i %6 == 1) {
$table.append($tr);
$tr = $("<tr>");
}
};
$("#myTable").append($tr);
Related
I have set of three times in the format of Minute:Seconds:Miliseconds which I need to add to together and get the total time..
for example the one I have used is : 0:31.110 + 0:50.490 + 0:32.797
which = 1:54.397
so how to do this in javascript?
Here is JS Code
var sp1 = $('#table tr td:nth-child(2)').text()
var sp2 = $('#table tr td:nth-child(3)').text()
var sp3 = $('#table tr td:nth-child(4)').text()
var1 = sp1 + sp2 + sp3
$('td:nth-child(5)').html(var1);
I don't know where to begin but I have just come up with the above code..
I need the output to be 1:54.397 in the last td, but I get this 0:31.1100:50.4900:32.797 shown in this example http://jsfiddle.net/q1kumbea/
You may use moment.js for this. That would make it very easy, as you can just parse the times in the correct format, add the moments together ...
var sp1 = $('#table tr td:nth-child(2)').text()
var sp2 = $('#table tr td:nth-child(3)').text()
var sp3 = $('#table tr td:nth-child(4)').text()
var1 = moment(sp1, "mm:ss.SSS") + moment(sp2, "mm:ss.SSS") + moment(sp3, "mm:ss.SSS")
$('td:nth-child(5)').html(moment(var1).format("mm:ss.SSS"));
... and voila
Updated fiddle
I don't know any native functionality, but you can always(almost:) ) use some maths to achieve what you want. like below
var plusTimes = function(arr) {
var resultTime =0;
for(var i = 0; i < arr.length; i ++) {
resultTime += (parseInt((arr[i].split(':')[0]) * 60 * 1000) + ( parseInt(arr[i].split(':')[1].split('.')[0]) * 1000 ) + parseInt(arr[i].split('.')[1]))
}
var ms = (resultTime / 1000).toString().split('.')[1];
var sec = parseInt((resultTime / 1000).toString().split('.')[0]) % 60;
var min = (parseInt((114397 / 1000).toString().split('.')[0]) - parseInt((114397 / 1000).toString().split('.')[0]) % 60) / 60;
return min + ':' + sec + '.' + ms;
}
plusTimes(['0:31.110','0:50.490', '0:32.797']) // outputs "1:54.397"
you can add as many numbers as you wish to array unless you keep their format the same
I'm trying to add to a HTML table a feature that highlights all those values that, compared to others, are different. Comparison is made row by row.
With great effort I managed to achieve the following JQuery/Javascrit code. I'm pretty sure this is not an efficient/elegant/fast way to do it but it's the only way I work it out.
The HTML table is quite big and complex so it's hard to publish it here.
The issue I'm encountering is that the script works fine out of a loop, but it hangs if I put it inside a FOR - LOOP and I don't understand why.
var numRows = $('.ctable tbody tr').length, numCols = $('.ctable tbody tr:first th').length, v, undefined;
var values = new Array(numRows);
var noDuplicates = new Array(numCols);
var result = new Array(numCols);
for (i = 1; i = numRows; i++) {
// Get a row and copy into an array the values of each VISIBLE cell
$(".ctable tbody tr:eq(" + i + ") td.values:visible").each(function(){
v = $(this).text();
values.push(v.trim());
});
// Remove from the array the 'undefined' values
values = values.filter(function(item){
return item !== undefined;
});
// Push into new array duplicate values
noDuplicates = return_duplicates(values);
// Compare the two arrays and get the differences (uses underscore.js)
result = _.difference(values, noDuplicates);
// This is a 'highlight' plugin and you may pass to it an array
$(".ctable tbody tr:eq(" + i + ") td.values:visible").highlight(values);
}
function return_duplicates(arr) {
var len=arr.length, out=[], counts={};
for (var i=0;i<len;i++) {
var item = arr[i];
counts[item] = counts[item] >= 1 ? counts[item] + 1 : 1;
}
for (var item in counts) {
if(counts[item] > 1)
out.push(item);
}
return out;
}
Try
for (i = 1; i < numRows; i++) {
instead of
for (i = 1; i = numRows; i++) {
I have this code sample which updates cells within the html table.
for (var i = 0; i < o.Rows.length; i++) {
var row = $("tr").filter("[data-id='" + o.Rows[i].Id + "']");
row.find("td:eq(3)").text(o.Rows[i].Status);
row.find("td:eq(4)").text(o.Rows[i].Date);
}
Executing of this sample of code takes a long time if o.Rows.length is 100 000. Is there any more efficient way to do this?
You probably shouldn't have a table with 100,000 rows, but...
You could speed up things a little bit by querying all of them upfront:
var trs = $('tr');
for (var i = 0, l = o.Rows.length; i < l; i++) {
var tr = trs.eq(i);
var o = o.Rows[i];
tr.find('td:first').html(o.Status).next().html(o.Date);
}
Here's a jsperf showing it on 100 lines: http://jsperf.com/table-update/2
I am searching my Table Column for the string "None". It does this but I am unable to get the row number after. I am attempting to use the "rowIndex" attribute. Not sure why it is pulling "Not a Number" (NaN). Table is 50 rows 10 cols. I am assuming it may have to do with that I am pulling from a column instead of Row.
function F0416()
{
var tab = document.getElementById('part1Table');
var l = tab.rows.length;
var s = '';
for ( var i = 0; i < l; i++ )
{var tr = tab.rows[i];
var cll = tr.cells[2];
s += ' ' + cll.innerText;
}
var y = (s.indexOf('None') != -1)
document.write(this.rowIndex + 1)
Instead of concatenating all the values of the column into a string and searching the string, you could instead test the value of each cell in the column for the value 'None'. Then you would know the row number from the loop counter, and you could halt the loop if you find it instead of iterating over every row.
It would look more like this:
for ( var i = 0; i < l; i++ ) {
var tr = tab.rows[i];
var cll = tr.cells[2];
if(cll.innerText.indexOf('None') != -1) {
document.write(i + 1);
break;
}
}
You could also return the value of the row instead of outputting it.
I would recommend using a rich javascript library like JQuery.
Then given the following HTML:
<table>
<tr><td>Row 1- Column 1</td><td>Row 1 - Column 2</td>
<tr><td>none</td><td>Row 2 - Column 2</td>
<tr><td>Row 3- Column 1</td><td>Row 3 - Column 2</td>
</table>
You can use the following to get all the rows containing none:
var rows = $('table tr').filter(":contains('none')");
Have a look at this Fiddle example.
I'm trying to make a table that has 3 cells to a row, and into those three cells, I have a string that I get from a textbox from a HTML form that I created an array from. I'm using JavaScript to do this, and I have it to where I have each word in their own cell, but if there is an empty cell, it won't create a cell. How can I fill that empty cell with another word like "empty".
This is what I have so far.
arrays=tx_val.split(' ');
table="< table border='1' bgcolor=gray>"
for(x=0;x< arrays.length-2;x=x+3)
{
if(x<arrays.length-2)
{
table=table+"< tr>< td>"+arrays[x]+"< /td> <td>"+arrays[x+1]+
"< /td>< td>"+arrays[x+2]+"</td><td>";
}
else
{
table=table+"< /tr>< /table>"
}
}
|| 'empty'
as in
(arrays[x] || 'empty')
or
var empty = '--empty--';
if(x) table += "<tr><td>" + (arrays[x] || empty) + "</td> " + (arrays[x+1] || empty) + "</td><td>" + (arrays[x+2] || empty) + ""
There are errors in your logic that might be causing you problems:
for(x=0;x< arrays.length-2;x=x+3)
{
if(x<arrays.length-2)
Based on the for loop, the if statement will always evaluate to true. As such, for every iteration, you are adding a table row without an ending tr element and you are adding a table cell without an ending td element. The result will be ill-formed HTML that might not be rendering as you desire, even if you get some 'empty' value put in a cell.
Try this:
arrays = tx_val.split( ' ' );
table = "< table border='1' bgcolor=gray>";
currItem = 0;
for( x = 0; x < Math.ceil( arrays.length / 3 ); x = x + 1 )
{
table = table + "<tr>";
for( y = 0; y < 3; y = y + 1 )
{
if( arrays[currItem] == "" )
{
displayItem = "";
}
else
{
displayItem = arrays[currItem];
}
table = table + "<td>" + displayItem + "</td>";
currItem = currItem + 1;
}
table = table + "</tr>";
}
Basically, I changed the loops to form the table code per row first, then per column.
The outer for loop is the one responsible for adding code for each row. The Math.ceil( arrays.length / 3 ) formula determines the number of rows the table should have depending on the number of values in the array. The inner for loop creates 3 cells for each row.
If you want to change the dimensions of the table want to create you can just change the divisor in the Math.ceil function in the outer loop as well as the number used in the condition in the inner loop ( y < 3 ).