What are some techniques for styling the content within a table?

Question

What are some techniques for styling the content within a table?

I have a function that dynamically creates tables:

function generateTableContent(data) {
    var table = $('<table id="tblResultsList">');
    var tr;
    var td;

    $.each(data.d.foundItems, function(i, item) {

        var button = $('<button/>', {
            text: item.code, 
            click: function () { CellClicked(item.x,item.y,"") }
        }); 
        i % 3 === 0 && (tr = $('<tr>').appendTo(table));

        tr.append('<td>').prepend(button).end();
    });

    $('#rstSearch').append(table);
}

Here's the current view after implementing the function:

https://i.sstatic.net/AVX5o.png

View the actual content design here in this Fiddle.

And here is how I want the content to look:

https://i.sstatic.net/2MIri.png

Check out the desired design in this Fiddle.

However, I am currently facing a challenge. I need assistance with centering the content and making it square-shaped.

javascript jquery html css

Answer 1

Answer №1

I made a slight adjustment to your approach:

td = $('<td>').appendTo(tr)
button.appendTo(td);

Additionally, I incorporated some custom styles into the code. You can view the updated fiddle here: https://jsfiddle.net/o2gxgz9r/14666/

If you are looking to create square tds, check out this helpful solution:

Feel free to reach out if you have any questions or need further clarification.

Answer 2

I made a slight adjustment to your approach:

td = $('<td>').appendTo(tr)
button.appendTo(td);

Additionally, I incorporated some custom styles into the code. You can view the updated fiddle here: https://jsfiddle.net/o2gxgz9r/14666/

If you are looking to create square tds, check out this helpful solution:

Feel free to reach out if you have any questions or need further clarification.

Answer 3

Answer №2

There is a mistake in this line:

tr.append('<td>').prepend(button).end();

The actual behavior is that it appends '<td>' and button to the element tr. This is because the return value of append is tr, not the newly created td element. An alternative approach would be:

$('<td>').append(button).appendTo(tr);

Answer 4

There is a mistake in this line:

tr.append('<td>').prepend(button).end();

The actual behavior is that it appends '<td>' and button to the element tr. This is because the return value of append is tr, not the newly created td element. An alternative approach would be:

$('<td>').append(button).appendTo(tr);

Answer 5

Answer №3

If you want to enhance your understanding of handlebars, it's recommended to delve deeper into its concepts. These files contain actual HTML which can be loaded dynamically. Check out the following link for more information: Handlebars Official Website. To install handlebars, simply use the command npm install handlebars.

Answer 6

If you want to enhance your understanding of handlebars, it's recommended to delve deeper into its concepts. These files contain actual HTML which can be loaded dynamically. Check out the following link for more information: Handlebars Official Website. To install handlebars, simply use the command npm install handlebars.

Answer 7

Answer №4

To organize your information:

 var elements = [{"id":1,"name":"Lisa"},{"id":2,"name":"John"},{"id":3,"name":"Alice"},{"id":4,"name":"Peter"},{"id":5,"name":"Mary"},{"id":6,"name":"Bob"},{"id":7,"name":"Sarah"},{"id":8,"name":"Daniel"},{"id":9,"name":"Olivia"},{"id":10,"name":"Ethan"}];

var table_content='<table id="tblContentList" border="1"></table>';
$('#contentSection').append(table_content);
var counter=0;
var total_counter=0;
var row_content='';
for(key in elements){
    counter++;
    total_counter++;
    if(counter==1){
        row_content='<tr>';
    };
    row_content+='<td><input data-id="'+elements[key].id+'" class="my-btn" type="button" value="'+elements[key].name+'"></td>';
    if(counter==4){
         row_content+='</tr>';
         counter=0;
          $('#tblContentList').append(row_content);
          row_content='';

     }
     if(elements.length==total_counter){
          row_content+='</tr>';
          $('#tblContentList').append(row_content);
     }
};
var max_btn_width = 0;
$('.my-btn').each(function(){
     var test_size=$(this).outerWidth(true);
     max_btn_width = Math.max(max_btn_width, test_size);
});
$('.my-btn').css({'width':max_btn_width, 'height':max_btn_width});


$('.my-btn').click(function(){
    var identifier=$(this).attr('data-id');
    alert(identifier);
});

similar to this presentation:

Answer 8

To organize your information:

 var elements = [{"id":1,"name":"Lisa"},{"id":2,"name":"John"},{"id":3,"name":"Alice"},{"id":4,"name":"Peter"},{"id":5,"name":"Mary"},{"id":6,"name":"Bob"},{"id":7,"name":"Sarah"},{"id":8,"name":"Daniel"},{"id":9,"name":"Olivia"},{"id":10,"name":"Ethan"}];

var table_content='<table id="tblContentList" border="1"></table>';
$('#contentSection').append(table_content);
var counter=0;
var total_counter=0;
var row_content='';
for(key in elements){
    counter++;
    total_counter++;
    if(counter==1){
        row_content='<tr>';
    };
    row_content+='<td><input data-id="'+elements[key].id+'" class="my-btn" type="button" value="'+elements[key].name+'"></td>';
    if(counter==4){
         row_content+='</tr>';
         counter=0;
          $('#tblContentList').append(row_content);
          row_content='';

     }
     if(elements.length==total_counter){
          row_content+='</tr>';
          $('#tblContentList').append(row_content);
     }
};
var max_btn_width = 0;
$('.my-btn').each(function(){
     var test_size=$(this).outerWidth(true);
     max_btn_width = Math.max(max_btn_width, test_size);
});
$('.my-btn').css({'width':max_btn_width, 'height':max_btn_width});


$('.my-btn').click(function(){
    var identifier=$(this).attr('data-id');
    alert(identifier);
});

What are some techniques for styling the content within a table?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using AngularJS translation capabilities with UI Router

Pressing a button within an HTML table to retrieve the corresponding value in that row

Guide on implementing the recently established attribute ID using jQuery

Mocha maintains the integrity of files during testing

Create an HTML document with a bottom section that shows up on every page when printed

Decoding entities in a jQuery AJAX form

The UnboundLocalError occurred when trying to access the local variable 'playlist' before it was assigned

Managing Dropdown Values in JQuery/JavaScript - Date Selection Widget

What is the procedure for adding a NULL value to an INT field in a database?

Analyzing similarities between objects and arrays to find and return the matches

Finding text located between specific characters and a unique symbol

What did I miss writing here?

Testing a jQuery button click using C# Selenium RC

Retrieving two sets of AJAX data at the same time

Upload dojo.js to my server for use

Demonstrating various elements within an application using Vue3

Jade form submission results in an empty req object

Struggling with efficiently sorting data within a list on Angular.js

Hover effects can enhance user experience by changing text color dynamically. - jasper

Interact with AngularJS and ASP.NET MVC by invoking controller actions