javascript - Creating a HTML form with selector a selector of saved SQL Hex colors

Question

I working on a friends website, and I'm helping create a simple estimator form. He does gutter repair and he has a list of different gutter colors he has in stock. I've developed an app for him to update the sql database with a sku, name, price, and hex color. I want to pull the hex colors within the database and implement it into the estimator form, but I'm not for sure the best way of doing this. I know that there are a lot of 'color pickers' scripts out there, but I'm not dealing with every hex combination... roughly 20 different colors max, but this number will change as his inventory changes.

Is there any way to create a selector with a little box that displays the hex color next to the name as a value? Or even, have a table of colored box with X rows and 5 columns, and the form would be able to process with one of those boxes the user selected?

I mainly focus on mobile application development, and I don't know I'm describing my question properly, but I hope you know what I mean.

Answer 1

创建一个表来存储您的值： var tbl = $('<table/>');

现在让我们创建行：

for(var x = 0; x < products.length; x++){
 var row = $('<tr/>'),
     colorSwatch = $('<div/>').css({width: '20px', height: '20px', background: bColor[x]}),

 row.html([
 $('<td/>').html(colorSwatch),
 $('<td/>').html(sku),
 $('<td/>').html(name),
 $('<td/>').html(price) 
 ]);

 row.appendTo(tbl); //Append the row to the table
}