HTML Radio button table need to build it dynamically - javascript

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++;
}

Related

Html to DataTable -> Loop all rows of table instead of looping the ones only in the current page

I have a datatable like below in my asp.net-4.5 page:
Name City Value Action
A B 10 delete
X Y 10 delete
T R 10 delete
ALL ALL 30
An HTML table is converted into such a datatable via $(#example).datatable()
When the "Delete" link is clicked, the regarding row is being deleted and the value of the row including ALL is being updated in javascript. So here, if I remove the first row, the table will be like below WITHOUT any page refresh.
Name City Value Action
X Y 10 delete
T R 10 delete
ALL ALL 20
One issue here is that the row having ALL TOTAL can be anywhere else, it is not always at the end of the table. The user can re-sort the table by clicking a column. For example, if Value column is clicked, the row including ALL will be the first row.
At this point, I want to locate where the row is located. To do that I have a for loop like below:
for (var i = 0, r; r = document.getElementById("example").rows[i]; i++) {
if ($('#example').find("tr:eq(" + i + ")").find("td:eq(2)").html() == 'ALL') {
locateALLrow = i;
break;
}
}
This for loop above works perfectly, when there is 1 page of data only (One page includes 10 rows). So my questions:
1 - How I can traverse the other rows located in other pages as well? This loop above only works for the first 10 rows and stops. How can I extend it to all table?
2- Is there a better way to locate the index of the row including ALL (as Name column).
Any advice would be appreciated. Thanks!
EDIT: Tried the loop like below, didn't fix:
for (var i = 0; i<document.getElementById("example").getElementsByTagName("tr").length; i++)
{...}
1 - How I can traverse the other rows located in other pages as well? This loop above only works for the first 10 rows and stops. How can I extend it to all table?
Instead of traversing the html table which shows only first n rows data when using pagination, try working with the datatable API. You'll be able to loop through complete data with that.
https://datatables.net/reference/api/rows().data()
2- Is there a better way to locate the index of the row including ALL (as Name column).
Same as above.Use datatable API instead of looping through current html shown data.

Inject a row after X number of rows in an HTML table

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>")
}
});

HTML: Get value from input with no ID

Been looking around and I cant seem to find an answer to this so maybe im wording it wrong but here it goes.
So I have a table displaying data from a database. In jQuery I have made it so a row can be added with empty inputs and then submitted to the database, this works fine.
I am now attempting to be able to edit it. So each row will have a button to edit that row, the button will put the row values into inputs so you can change the value and update the database. How can I do this? I was looking into using this here but Im not sure how I can get the value of the input boxes without them having some sort of ID.
jQuery I was trying to use:
$('#tbl').on('click','.xx',function() {
$(this).siblings().each(
function(){
if ($(this).find('input').length){
$(this).text($(this).find('input').val());
}
else {
var t = $(this).text();
$(this).text('').append($('<input />',{'value' : t}).val(t));
}
});
});
Am I over thinking this? Should I just be grabbing the values and then putting them in pre-made input boxes?
Update:
HTML:
sb.AppendLine("<table style='width: 80%;'>")
sb.AppendLine("<tr class='inputRowbelow'>")
sb.AppendLine("<td style='width: 20%;' class='ui-widget-header ui-corner-all'>Area</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Details</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Options</td>")
sb.AppendLine("</tr>")
For Each w In workItems
sb.AppendLine("<tr>")
sb.AppendLine("<td>" & w.area & "</td>")
sb.AppendLine("<td>" & w.details & "</td>")
sb.AppendLine("<td><a href='#' class='fg-button ui-state-default ui-corner-all edit'><img src='/images/spacer.gif' class='ui-icon ui-icon-pencil' /></a></td>")
sb.AppendLine("</tr>")
Next
sb.AppendLine("</table>")
There are a couple of ways to do this, including changing your VB code to add extra data to the html, but I will answer this from a pure javascript/JQuery solution.
First of all you need to handle the click event for each edit button, after that you find the matching row, and then you can get the first to td elements of that row...
$(".edit").click(function(e){
e.preventDefault();//prevent the link from navigating the page
var button = $(this);//get the button element
var row = button.closest("tr");//get the row that the button belongs to
var cellArea = row.find("td:eq(0)");//get the first cell (area)
var cellDetails = row.find("td:eq(1)");//get the second cell (details)
//now you can change these to your inputs and process who you want
//something like this...
ConvertToInput(cellArea, "area");
ConvertToInput(cellDetails, "details");
});
function ConvertToInput(element, newId){
var input = $("<input/>");//create a new input element
input.attr("id", newId);//set an id so we can find it
var val = element.html();//get the current value of the cell
input.val(val);//set the input value to match the existing cell
element.html(input);//change the cell content to the new input element
}
Here is a working example
From that you can then do the saving that you say you have already implemented, using the ID values of each field to get the values to save.
Instead of using a For Each ... in ... Next loop, use a a For loop with a counter. give each button and each row an ID with the current counter value at the end. You can then use Jquery to make each row editable separately, because each row has a row number now.

Dynamically add form elements with linked jQuery functions

I have a website where a user can configure a list of items before submitting the list. Each item is represented by a row of cascading comboboxes (each selection updates the possible values in the following comboboxes).
The user can add as many items as they want, configure them, then submit.
To do the add operation, I have a javascript function like this:
function newAction() {
// Get value of index so we can form our ids
var index = $("#ItemTable").find("#Item").length;
//copy the table row
var newItemRow = $("#Item:last-of-type").clone(true);
// Update all of the ids
var rowTextBefore = newItemRow.html();
var rowText = rowTextBefore.replace("[" + index - 1 + "]", "[" + index + "]");
newItemRow.html(rowText);
// Append the row to the end of the table
$("#ItemTable").append(newItemRow);
}
This is all working great.
But to enable the cascading comboboxes, there's a bunch of jQuery stuff that gets generated for each row. It looks like this:
jQuery(document).ready(function(){
jQuery('#Items[0]_Name').tComboBox({highlightFirst:false,
cascadeTo:'Items[0]_Accessories', data:[{...data here...]});
jQuery('#Items[0]_Accessories').tComboBox({highlightFirst:false,
// etc.
}
How can I clone this stuff along with the document elements so that my dynamically added rows implement the cascading comboboxes as well?

Counting how many rows are added to table via javascript

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);

Categories