You are viewing limited content. For full access, please sign in.

Question

Question

Row Labels Populate with Letters instead of Numbers

asked on May 5, 2015

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.

0 0

Answer

SELECTED ANSWER
replied on May 6, 2015

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

Replies

replied on May 5, 2015

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;
  }
  
});
1 0
replied on May 6, 2015

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.

 

0 0
SELECTED ANSWER
replied on May 6, 2015

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;
  }
  
});
0 0
replied on May 6, 2015

Yay! Works like a charm, thank you!

0 0
replied on May 6, 2015 Show version history

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.

0 0
replied on May 6, 2015

Even better, that's what we will want it to do!

0 0
replied on May 5, 2015

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

0 0
replied on May 6, 2015

Yay! This worked!!! Thank You! :)

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.