Question

我是JavaScript新手......

我已经让两个功能分开工作了

这是一个js小提琴，我得到了表格单元格来显示它的背景颜色：

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小提琴，我有一张桌子在按钮点击上添加一个新的行和单元格：

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>

我似乎无法让所有人一起工作如何使用新的随机背景颜色生成行和显示每个单元格中新生成的颜色的十六进制值？

Answer 1

在你的第一个小提琴中，你从dom中已经存在的td元素中获取backgroundColor样式属性，将其转换为hex 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()内，然后引用var和background-color中的td $("#anc_add").click(function(){ var color = getRandomColor() $('#tbl1 tr').last().after('<tr><td style="background-color:' + color + '">' + '[' + cnt + '] - ' + color + '</td></tr>'); cnt++; });

<div id="container"> <h1> Todo List </h1> <input type="text" placeholder="New todo"> <ul> <li> item 1</li> <li> item 2 </li> <li> item 3 </li> </ul> </div>

这是一个工作小提琴：https://jsfiddle.net/speakingcode/untkx6k5/8/

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

1 个答案: