I am trying to allow user to add rows in a table but label them using letters instead of numbers. Each row will represent a segment of pipe, but we do not want it to show "pipe segment 1", pipe segment 2, pipe segment 3, etc. We want it to show pipe segment A, pipe segment B, pipe segment C etc as they add rows.
Question
Question
Answer
Yes. Just give the table you want affected a CSS class, i.e. pipetable. Then modify the JavaScript as such
$(document).ready(function(){ var re = new RegExp("\\d+"); $(document).ready(function () { rowlabelchange(); }); $('.pipetable').on('click', '.form-del-field', function () { rowlabelchange(); }); $('.pipetable').on('click', '.cf-table-add-row', function () { rowlabelchange(); }); function rowlabelchange() { $('.pipetable .col0').each(function() { if ($(this).text() != "") { $(this).text("Pipe Segment " + toLetters(parseNumber(re.exec($(this).text())))); } }); } function toLetters(num) { "use strict"; var mod = num % 26, pow = num / 26 | 0, out = mod ? String.fromCharCode(64 + mod) : (--pow, 'Z'); return pow ? toLetters(pow) + out : out; } function parseNumber(n) { var f = parseFloat(n); //Convert to float number. return isNaN(f) ? 0 : f; //treat invalid input as 0; } });
Replies
This JavaScript works for me with a default table
$(document).ready(function(){ var re = new RegExp("\\d+"); $(document).ready(function () { rowlabelchange(); }); $(document).on('click', '.form-del-field', function () { rowlabelchange(); }); $(document).on('click', '.cf-table-add-row', function () { rowlabelchange(); }); function rowlabelchange() { $('.col0').each(function() { if ($(this).text() != "") { $(this).text("Pipe Segment " + toLetters(parseNumber(re.exec($(this).text())))); } }); } function toLetters(num) { "use strict"; var mod = num % 26, pow = num / 26 | 0, out = mod ? String.fromCharCode(64 + mod) : (--pow, 'Z'); return pow ? toLetters(pow) + out : out; } function parseNumber(n) { var f = parseFloat(n); //Convert to float number. return isNaN(f) ? 0 : f; //treat invalid input as 0; } });
Ok this worked, but can it be restricted to only apply to one table on my form? I have attached a screenshot of the table I need it on.
Yes. Just give the table you want affected a CSS class, i.e. pipetable. Then modify the JavaScript as such
$(document).ready(function(){ var re = new RegExp("\\d+"); $(document).ready(function () { rowlabelchange(); }); $('.pipetable').on('click', '.form-del-field', function () { rowlabelchange(); }); $('.pipetable').on('click', '.cf-table-add-row', function () { rowlabelchange(); }); function rowlabelchange() { $('.pipetable .col0').each(function() { if ($(this).text() != "") { $(this).text("Pipe Segment " + toLetters(parseNumber(re.exec($(this).text())))); } }); } function toLetters(num) { "use strict"; var mod = num % 26, pow = num / 26 | 0, out = mod ? String.fromCharCode(64 + mod) : (--pow, 'Z'); return pow ? toLetters(pow) + out : out; } function parseNumber(n) { var f = parseFloat(n); //Convert to float number. return isNaN(f) ? 0 : f; //treat invalid input as 0; } });
Yay! Works like a charm, thank you!
You're welcome. Note that with the above JavaScript, when you add more than 26 rows into your pipe table, the lettering will then proceed to AA, AB, and so on.
Even better, that's what we will want it to do!
i wonder if it were possible to put in the label rows wording something that would cause the value to escape out of the explicit text and use the numbering as part of an ASCII code to indicate a letter. If we did that, then you can have it increment the number which is interpretted as the next letter
Yay! This worked!!! Thank You! :)