生成具有随机背景颜色的表格单元格，然后显示背景颜色的十六进制值答案

【问题标题】：Generate table cells with random background color, then display hex value of background color生成具有随机背景颜色的表格单元格，然后显示背景颜色的十六进制值
【发布时间】：2018-08-05 03:31:21
【问题描述】：

我对 JavaScript 很陌生...

我已经让这两个函数分别工作

这是一个 js fiddle，我让表格单元格显示其背景颜色：

http://jsfiddle.net/chulps/DCaQb/1321/

var colorX = '';
$('td').html(function() {
  var x = $(this).css('backgroundColor');
  hexc(x);
  $("td").html(colorX);
})

function hexc(colorval) {
  var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  delete(parts[0]);
  for (var i = 1; i <= 3; ++i) {
    parts[i] = parseInt(parts[i]).toString(16);
    if (parts[i].length == 1) parts[i] = '0' + parts[i];
  }
  colorX = '#' + parts.join('');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1" border="1">
  <tr>
    <td style="background-color: #abcdef; color: white;"></td>

  </tr>
</table>

这是一个 js fiddle，我在其中获得了一个表格，可以在单击按钮时添加新行和单元格：

https://jsfiddle.net/chulps/jfr4d5cc/7/

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }//a
  return color;
}

function setRandomColor() {
  $("td").css("background-color", getRandomColor());
}

var cnt = 1;

$("#anc_roll").click(function () {
  setRandomColor();	
});

$("#anc_add").click(function () {
  $('#tbl1 tr').last().after('<tr><td style="background-color:' + getRandomColor() + '">' + '[' + cnt + ']</td></tr>');
  cnt++;
});

$("#anc_rem").click(function () {
  if ($('#tbl1 tr').size() > 1) {
    $('#tbl1 tr:last-child').remove();
  } else {
    alert('One row should be present in table');
  }
  
  if ($('#tbl1 tr').size() > 1) {
    $('#tbl1 tr:last-child').remove();
  } else {
    alert('There has to be at least one color');
  }
});

<!DOCTYPE html>
<html>
<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="css/sticky-footer-navbar.css" rel="stylesheet" type="text/css">
  <link href="css/style.css" rel="stylesheet" type="text/css">
	
</head> 
<body class="container-fluid">
  <div class="container">
    <div class="row">	
      <div class="col-md-4"><a href="javascript:void(0);" id='anc_add'>Add Row</a></div>
      <div class="col-md-4"><a href="javascript:void(0);" id='anc_rem'>Remove Row</a></div>
    </div>
    
    <div class="row">
      <div class="col-md-12">
        <table id="tbl1" border="1">
          <tr>
            <td>#FFFFFF[#]</td>
          </tr>
        </table>
      </div>
    </div>
  </div>

  <footer class="footer">
    <div class="container-fluid">
    </div>
  </footer>
		
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>

我似乎无法让它们一起工作如何生成具有新随机背景颜色的行并在每个单元格中显示新生成颜色的十六进制值？

【问题讨论】：

标签： javascript jquery html css html-table

【解决方案1】：

在您的第一个小提琴中，您从 dom 中的 td 元素中获取 backgroundColor 样式属性，将其转换为十六进制 rgb，然后将该十六进制值设置为 TD 元素的 html 内容。

在您的第二个小提琴中，您在getRandomColor() 中创建了一个随机的十六进制颜色。在#anc_add.click() 中，您创建一个新的tr 和td dom 元素，其中background-color 设置为您直接调用的getRandomColor() 返回的值。这里需要注意两点。

因为您正在创建添加的 dom 元素（在 #anc_add.click() 中），您不需要获取元素的 background-color 并将其转换为十六进制 - 您可以直接设置它（你正在做的）
您不需要获取元素的 background-color 属性，将其转换为十六进制，然后在元素已经在 dom 中后将其添加到元素的 HTML 中，就像在您的第一个小提琴中一样 - 您可以在创建时简单地设置它#anc_add.click() 中的元素。所以你根本不需要第一个小提琴。

最快的解决方法是将getRandomColor() 的值放在var 中#anc_add.click() 中，然后在background-color 和td 的内部HTML 中引用var

$("#anc_add").click(function(){ var color = getRandomColor() $('#tbl1 tr').last().after('<tr><td style="background-color:' + color + '">' + '[' + cnt + '] - ' + color + '</td></tr>'); cnt++; });

这是一个有效的小提琴：https://jsfiddle.net/speakingcode/untkx6k5/8/

【讨论】：

这是正确答案，我无法将其标记为正确，因为堆栈溢出时我没有足够的代表点，但它完全按照我想要的方式工作。谢谢@speakingcode！

【解决方案2】：

在您的函数getRandomColor() 中出现语法错误。

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';

  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }a <------ Right Here

  return color;
}

【讨论】：