The numbers with the colors and the numbers with the percentage must center align and the text must left align
Im only getting to center align for the numbers with colors. The numbers with the percentage values must also center align but it still showing left align can anyone tell me whats wrong please. Thanks in advance
Your code looks kind of truncated… anyway one approach would be to check if the textContents of the tds start with numbers using a regular expression, like e.g.
That shouldn’t make any difference eg. this table generated by JavaScript
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Table Cell Text Alignment test</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style type="text/css">
td {
text-align: center;
}
td:first-of-type {
text-align: left;
}
</style>
</head>
<body>
<h1>Table Cell Text Alignment test</h1>
<script>
function new_tag(type) {
var new_tag = document.createElement(type);
return new_tag;
}
function add_text(tag, text) {
tag.textContent = text;
}
function add_child(parent, child) {
parent.appendChild(child);
}
var doc_body = document.getElementsByTagName("body")[0];
var table_tag = new_tag('table');
var caption_tag = new_tag('caption');
add_text(caption_tag, "Table Generated by JavaScript");
var thead_tag = new_tag('thead');
var thead_tr_tag = new_tag('tr');
var th_tag_1 = new_tag('th');
add_text(th_tag_1, "Word");
var th_tag_2 = new_tag('th');
add_text(th_tag_2, "Number");
var th_tag_3 = new_tag('th');
add_text(th_tag_3, "Percent");
add_child(thead_tr_tag, th_tag_1);
add_child(thead_tr_tag, th_tag_2);
add_child(thead_tr_tag, th_tag_3);
add_child(thead_tag, thead_tr_tag);
var tbody_tag = new_tag('tbody');
var tr_tag_1 = new_tag('tr');
var tr_tag_1_td_tag_1 = new_tag('td');
add_text(tr_tag_1_td_tag_1, "OneMuchLongerWord");
var tr_tag_1_td_tag_2 = new_tag('td');
add_text(tr_tag_1_td_tag_2, "5");
var tr_tag_1_td_tag_3 = new_tag('td');
add_text(tr_tag_1_td_tag_3, "43%");
add_child(tr_tag_1, tr_tag_1_td_tag_1);
add_child(tr_tag_1, tr_tag_1_td_tag_2);
add_child(tr_tag_1, tr_tag_1_td_tag_3);
add_child(tbody_tag, tr_tag_1);
var tr_tag_2 = new_tag('tr');
var tr_tag_2_td_tag_1 = new_tag('td');
add_text(tr_tag_2_td_tag_1, "Shorty");
var tr_tag_2_td_tag_2 = new_tag('td');
add_text(tr_tag_2_td_tag_2, "67");
var tr_tag_2_td_tag_3 = new_tag('td');
add_text(tr_tag_2_td_tag_3, "72%");
add_child(tr_tag_2, tr_tag_2_td_tag_1);
add_child(tr_tag_2, tr_tag_2_td_tag_2);
add_child(tr_tag_2, tr_tag_2_td_tag_3);
add_child(tbody_tag, tr_tag_2);
add_child(table_tag, caption_tag);
add_child(table_tag, thead_tag);
add_child(table_tag, tbody_tag);
add_child(doc_body, table_tag);
</script>
</body>
</html>
Ah, well that would make difference.
Probably six of one, half dozen the other - determining the cell content and styling by “nth” or each cell by cell.
I don’t know, but I imagine a table would need to get very long before it made any appreciable difference.
The trick will be getting the regular expression right.
Then it’s a simple matter of setting a class value for either left or center depending on the regex used.
Finding a good regex can require a lot of thought.
You need to determine what content will always be there, what might be there and what will never be there.
For example,
Will “word” cells always have only alpha and spaces and never any other character?
Will “number” cells always have only digits and never any other character?
Will “percent” cell always have only digits and a percent symbol and never any other character?
Or might some cell content sometimes have punctuation marks?
I am not a programmer, so my perspective may sound silly, but try to follow the logic (if there is any).
Where does the data that goes into the table come from? How does it arrive and how does it know which cell it belongs in?
What is to prevent you from adding a regex script that evaluates the data as “contains alpha characters” or not and assigns “text-align:left” to the cell if it does contain alpha characters? Would that be too simplistic?
It sounds like the page has to accept whatever data it is fed and you are describing a regex script that will scan the page “on Page Load” (or however it’s done) and temporarily align the cells based on their content.
OK, this has been fun… real programmers are needed, now.
)
the words is passed by a string and the numbers is passed as a number in the backend