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

Question

Question

highlight a row in a table

Forms
Updated December 19, 2016
asked on December 15, 2016 • Show version history

What I am trying to do is highlight a row in a repeatable row table based on a value greater than 0 in the totals field. And I'm trying to do this for multiple tables within the form. So far I've been able to highlight all the rows but it only works when you change the first row total. I tried to modify the javascript from an example laserfiche provides to do purchase order totals, but I'm stuck. This is what I have so far. 

$('.cf-table-block tbody tr').on('blur', 'input', highlight);

	function highlight(){
		$('.cf-table-block tbody tr').each(function(){
			var t = 0;
			t = parseNumber($(this).find('.total input').val());
			if (t > 0) {
				$('.highlight').css("background", "yellow");
			}
			else if (t = 0){
				$('.highlight').css("background", "none");
			}
		});
	}

	function parseNumber(n){
		var f = parseFloat(n);
		return isNaN(f) ? 0 : f;
	}

I have a line in the code that adds the highlight class to all the tr elements and I know that's going to add the highlighting to all the elements but at that point after so many hours of trying I just wanted to see something work. Any help would be greatly appreciated. Thanks!

highlight.png
result.png
highlight.png (56.24 KB)
Download
result.png (45.42 KB)
Download
0 0

Answer

SELECTED ANSWER
replied on December 15, 2016 • Show version history

If you can provide additional details about the table and how the data is populated/manipulated in the table, that might help.

Here is a generic example I've come up with using the details provided so far.

1. Below is a form that contains two different tables, where each has three columns for unit price, quantity, and a subtotal. I've added some rows and just set a unit price manually, leaving the quantity as all 0s for now.

2. I'm using the following JS

$(document).ready(function () {
    $('.cf-table-block').on('blur', 'input', sumtotal);
    $('.tax').on('blur', 'input', sumtotal);
    $('.shipping').on('blur', 'input', sumtotal);
    function sumtotal() {
        var sum = 0;
        $('.cf-table-block tbody tr').each(function () {
            var s = 0;
            s = parseNumber($(this).find('.price input').val()) * parseNumber($(this).find('.quantity input').val());
            $(this).find('.subtotal input').val(s);
            if (s > 0) {
                $(this).closest('tr').css("background", "yellow");
            }
            else if (s == 0){
                $(this).closest('tr').css("background", "none");
            }
        });
    }
  
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
});

This is copied directly from the purchase order example in the Forms help file with some slight changes. I've removed the lines of code that deal with the shipping, tax, and overall total calculations, only leaving in the subtotal calculation. I've also added the subtotal check for highlighting the row. I wanted to point out that for removing the highlight from the row, the check is

if (s == 0)

3. See this video for a demonstration of how the form works.

1 0

Replies

replied on December 15, 2016

Try this JS

  $('.cf-table-block').on('blur', 'input', highlight);

  function highlight(){
    $('.cf-table-block tbody tr').each(function(){
      var t = 0;
      t = parseNumber($(this).find('.total input').val());
      if (t > 0) {
        $(this).closest('tr').css("background", "yellow");
      }
      else if (t = 0){
        $(this).closest('tr').css("background", "none");
      }
    });
  }

  function parseNumber(n){
    var f = parseFloat(n);
    return isNaN(f) ? 0 : f;
  }
0 0
replied on December 15, 2016

Awesome! So that let's me select only the current row but it doesn't work on other rows unless I click on the first row and then click out. Also, it won't revert back to not being highlighted if the total is 0 again. Thanks for the help so far!

0 0
SELECTED ANSWER
replied on December 15, 2016 • Show version history

If you can provide additional details about the table and how the data is populated/manipulated in the table, that might help.

Here is a generic example I've come up with using the details provided so far.

1. Below is a form that contains two different tables, where each has three columns for unit price, quantity, and a subtotal. I've added some rows and just set a unit price manually, leaving the quantity as all 0s for now.

2. I'm using the following JS

$(document).ready(function () {
    $('.cf-table-block').on('blur', 'input', sumtotal);
    $('.tax').on('blur', 'input', sumtotal);
    $('.shipping').on('blur', 'input', sumtotal);
    function sumtotal() {
        var sum = 0;
        $('.cf-table-block tbody tr').each(function () {
            var s = 0;
            s = parseNumber($(this).find('.price input').val()) * parseNumber($(this).find('.quantity input').val());
            $(this).find('.subtotal input').val(s);
            if (s > 0) {
                $(this).closest('tr').css("background", "yellow");
            }
            else if (s == 0){
                $(this).closest('tr').css("background", "none");
            }
        });
    }
  
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
});

This is copied directly from the purchase order example in the Forms help file with some slight changes. I've removed the lines of code that deal with the shipping, tax, and overall total calculations, only leaving in the subtotal calculation. I've also added the subtotal check for highlighting the row. I wanted to point out that for removing the highlight from the row, the check is

if (s == 0)

3. See this video for a demonstration of how the form works.

1 0
replied on December 15, 2016

My tables are generated using a sql lookup. I have 13 tables in this form each with a different amount of rows. The tables remain hidden until a check box is selected for them. Right now my calculations are done using formulas in the cells. I think if I do a .change for the .total class I made it could just look at the total fields or maybe if I do a "id^=FieldN" it will cycle through the total fields. Thanks for catching the "==" syntax error. It's now turning it off.

0 0
replied on December 19, 2016

Can anyone else provide some assistance with this? It would be greatly appreciated. 

0 0
replied on December 19, 2016

I was able to figure this out. Thanks again for all your help!

0 0
replied on August 31, 2017

I have another question to add to this issue I was having. I now need to highlight the row based on a word. I have this so far 

$(document).ready(function(){

	$('.cf-table-block').on('blur', 'input', highlight);

	function highlight(){
		$('.cf-table-block tbody tr').each(function(){
			console.log(currentWord);
			var currentWord = "";

			currentWord = $(this).find('.word input').val();

			if (currentWord == "Delivery")
				$(this).closest('tr').css("background", "limegreen");
		});
	}
});

This is working fine. It's highlighting the row based on the word but it only does it after I click a cell. I've been trying to get it to run after I've loaded everything but I haven't been successful. The form is being generated by workflow using "invoke business process" if that helps. Thanks!

You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Attachments
Related Posts
Loading ...