如何获取循环中每一行的Jpicker（颜色选择器）的值

Question

我有两个问题。

1. 我有一个动态网格。其中用户单击 AddNewRow 按钮并在其中生成一个带有 jpicker 的新行。当然，每一行都有不同的 id。现在，当我在循环中为每一行保存颜色选择器的值时。我正在使用这种语法

   $('#tblCUS tbody tr').each(function () {
   color = '#' + $.jPicker.List[0].color.active.val('ahex');
   Grid+= color + "♥"; 
   

这只给了我第一行的值。对于每个循环，它都给了我第一个选择器的值。如何获取每行颜色选择器的值？我进行了几次谷歌搜索，只有一种语法可用。

1. 当我的页面重新加载时，颜色选择器会消失。如何使用保存在数据库中的值显示我的颜色选择器？这是我的代码

<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>

页面加载

     $('#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')
                  }
              }
          });

      });

  });

Answer 1

每当您的页面加载时，您可以根据 span 标签的 attribute 值为 jPicker 的所有实例添加 active 颜色，以便它显示正确的颜色。即：

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

然后，要将这些值保存在字符串或数组中，您可以使用被迭代的行的索引并使用它来获取活动颜色，即：

 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