My circumstances: I am new to jQuery and Stack Overflow, seeking assistance for my website project.
The challenge: Building a website using Bootstrap 3.3.6 with intricate data tables that need to be stacked dynamically on mobile devices using CSS. It is crucial for the column headers to be repeated for context. Additionally, as the website is bilingual, I require control over the mobile table header text.
The proposed solution involves a jQuery function that captures custom headers from the title attribute of each table's first row th element and adds them to the corresponding td elements within the tbody section using the CSS content property.
The hitch: The current function works effectively when there is only one table in the document. However, if there are multiple tables present, it mistakenly applies the titles from the first table to all tables.
Objectives: 1) Assign unique id attributes solely to tables requiring the aforementioned function. 2) Exclude tables without an id attribute. 3) Ensure the function retrieves and assigns the correct titles to their respective table tbody sections. 4) Address any potential conflicts with other scripts such as Modernizr or prettyPhoto.
For reference, here is the JSFiddle link showcasing the progress made so far: current script
(function() {
"use strict";
var tableIds = Array();
$('table').each(function(tid) {
if (tableIds) {
tableIds[tid] = $(this).attr('id');
}
var currentId = tableIds[tid];
alert('Id is: ' + currentId);
});
var header = Array();
/*get titles from the headings*/
$('thead tr:first-child th').each(function(i) {
if (header) {
header[i] = $(this).attr('title');
}
});
/*loop through tbody rows and apply headings to each td*/
$('tbody tr').each(function() {
var thRow = $(this);
thRow.find('td').each(function(j) {
$(this).attr('title', header[j]);
});
});
}());