So im building a table in which the client is allowed to add more rows inorder to add more data to the table.
How can i count the total number of rows that is added to the table?
here is the example which for whatever reason doesn't actually work on jsfiddle, but just to get an idea of the functionality.
http://jsfiddle.net/ScEzz/1/
so say the user adds 5 rows 3 times and 15 rows once, the result should be (5*3)15+15 +original 1 = 31
You should be able to keep track in your code, but aside from that, you can do this...
var count = document.getElementbyId("mytable").rows.length;
Or with jQuery if you want...
var count = $("#mytable > tr").length;
$("#mytable tr").length-1
This gets you teh number of trs minus 1 for the header.
Since you're already using jQuery, you can make the code a cleaner by doing some things in jQuery instead of JS.
Select elements with $('#mytable');
Create an element with just a begin tag in jQuery: var row = $('<tr>');
Use jQuery's append method table.append(row);
Related
I display tables on a website with ±100 rows.
Is it possible to add a row after every 25 rows in order to display adcode?
Since new data are imported often from a csv file, I can't add these rows displaying the add at the same time.
This row will have to span across all columns. so I assume I can just add a very high number.
<tr><td colspan=100> DISPLAY ADD HERE </td></tr>
I'm using wordpress and ninja forms, though I don't think this will influence the way this is implemented. I just need to know is it possible with any plain HTMl table.
you can simply iterate through table rows using a loop and add the row in between. Below is a code snippet,
var i=0;
$('#table_name > tbody > tr').each(function() {
i++;
if (i%25==0) {
$(this).after("<tr><td colspan=100> DISPLAY ADD HERE </td></tr>")
}
});
I am trying to do some work with tables and jQuery. Basically, I want to be able to go through an entire column based on its header and look for certain values. If those values are present I want to then delete the entire row. My code so far can select the correct column:
ownerIndex = $('th:contains("Outstanding")').index();
$('table tr td:nth-child('+ownerIndex+')').parent().hide();
From here I am unsure how to do an 'if' statement to look at the values. I am looking for all cells with the value of "0.00".
Thanks in advance.
Loop through each td element you selected using jQuery each function:
$('table tr td:nth-child('+ownerIndex+')').each( function(){
if($(this).html() == "0.00") {
// do your stuff
}
});
Looking at this topic, I can get the information for a table heading by it's class/tags. However, for the table I have I would like to get mine using the repeater.
I know I can get the rows using element.all(by.repeater('row in myRows')) but that only seems to include the tr rows themselves, and not the heading (th) row.
How can I use by.repeater to get the row of headings?
One option would be to get one repeater row and use ancestor to get the table parent element. Then, you can get to the th header elements from there:
var rows = element.all(by.repeater('row in myRows'));
var table = rows.first().all(by.xpath("ancestor::table")).last();
var headers = table.all(by.tagName("th"));
I was doing some re factoring for a page, In that page I have bunch of radio buttons group.Data for the radio buttons comes from database and sometimes from cache layer.
I will probably be having close to 100 radio buttons. I need to arrange them in 5 column 20 rows.
Data population happens via arraylist. I was thinking for converting this arraylist into json and then using it to lay out the radio buttons in the HTML table format.
I know there are many plugins out there for building tables,however they are not meeting my requirements.How do I built 5 rows 10 column table with my data on the fly.
Something like
<tr>
<td>radio1</td>
<td>radio2</td>
<td>radio10</td>
</tr>
<tr>
<td>radio11</td>
<td>radio12</td>
<td>radio20</td>
The caveat here is that I do not know in advance as how much data I m going to get for the table.
Appreciate some thoughts.
Loop through your JSON object.
Use mod ('%') to append a new tr every ten items
Output td items (with content) to the last tr added.
If you're using jQuery, try something like this:
var holderDiv = $('#myDivId');
var i = 0;
var myData = jQuery.parseJSON(response);
$.each(myData, function(key,value) {
if(i == 0 || i == i%10){
holderDiv.append('<tr>');
}
holderDiv.find('tr:last-child').append('<td>' + value + '</td>');
i++;
}
I have cloned the rows in my table editable.
The rows have 2 column editable, 1 with editable textarea and the other one with an input numer.
There is a function which sum the numbers in the two input numbers and give the total. You can try here, there is onblur : "submit"
I have cloned both Rows, they are editable but the function to calculate the Total does not work in the rows cloned.
How can i make my function working in the cloned rows?
you are cloning rows with id="sum", and you should not have duplicated ids in your page.
when i have to clone elements i generate dynamic ids so they don't get duplicated.
like this:
var lastid = $('[id^="clonedInput"]').length + 1;
$(".clonedInput").last().clone().attr('id', 'clonedInput' + lastid).appendTo("body")
you can test a full working example here: http://jsfiddle.net/RASG/MjMh5/
also, your jsfiddle is a total mess. please keep only the relevant code.
EDIT
ok, so you have other problems as well.
for instance, your function tally does not sum the cloned rows.
this function (not mention your whole code) could be a lot simpler.
function tally() {
var total = 0;
$('p.editable_number').each(function() {
total += parseInt($(this).text()) || 0;
$('#total').html(total);
})
}
test it here: http://jsfiddle.net/RASG/MA78A/