How to get the value of Jpicker (color picker) for each row in a loop-CodePudding

I have two questions.

I have a dynamic grid. In which the user clicks on AddNewRow button and it generates a new row with jpicker in it . Each row has a different id ofcourse. Now when Im saving the values of color picker for each row in a loop. I am using this syntax
```
$('#tblCUS tbody tr').each(function () {
color = '#'   $.jPicker.List[0].color.active.val('ahex');
Grid = color   "♥"; 
```

Which only gives me the value of the first row. and for each loop it is giving me the value of the first picker. How do I get the values of color picker for each row? I have made several google searches and only one syntax is available.

Ater saving when my page gets reloaded the color picker disappears. How do I show my color picker with the values that were saved in the database? Here is my code

<DIV id=divsomeid style="WIDTH: 100%">
<TABLE class=display id=tblsometable style="WIDTH: 100%">
<THEAD>
<TR>
<TH class=Greyheader style="WIDTH: 5%">S.No</TH>

<TH class=Greyheader style="WIDTH: 35%">Color</TH>

<TH class=Greyheader>Action</TH></TR></THEAD>
<TBODY>
<TR class=GreyBorder id=tblSBPComments_3 pkid="3">
<TD class=GreyBorder>1</TD>

<TD class=GreyBorder><SPAN class=colorPicker id=clcColor1 value="#00ff00ff"></SPAN></TD>

<TD align=center class=GreyBorder> &nbsp;&nbsp; </TD></TR></TBODY></TABLE><BR></DIV>

page load

     $('#tblTable tbody tr .colorPicker').each(function (index) {
          $(this).jPicker({
              window: {
                  expandable: true,
                  position: {
                      x: 'right', // acceptable values "left", 
  "center", "right", "screenCenter", or relative px value
                      y: 'bottom' // acceptable values "top", 
     "bottom", "center", or relative px value
                  },
                  color: {
                      active: $(this).attr('value')
                  }
              }
          });

      });

  });

CodePudding user response：

Whenever your page gets load you can add active color for all instances of jPicker depending on the value attribute of span tag so that it will show correct colors . i.e :

$('#tblSBPComments tbody tr .colorPicker').each(function(index) {
    $(this).jPicker({
      window: {
        expandable: true
      },
      color: {
        active: $(this).attr("value") //setting active color on load
      }
    });
  })

Then , to save these values in string or array you can use the index of the row which is been iterated and using that get the active color i.e :

 var color = []; //storing value in array
 var SBPCommentsGrid = "";//or in string
 //loop though table
 $('#tblSBPComments tbody tr').each(function(index) {
      color.push('#'   $.jPicker.List[index].color.active.val('ahex')   "♥"); //push value in array here index will be 0, 1..etc
      SBPCommentsGrid  = '#'   $.jPicker.List[index].color.active.val('ahex')   "♥"; 
 })

Working Example