Question

我需要一个javascript的解决方案（请不要jquery）：

我有一张带有一些颜色和输入框的桌子。我的目标是当用户点击td时，输入上的文字会变为点击的颜色代码。

我该怎么做？

感谢。

以下是我所拥有的代码的一个小例子：

<input type="text" value="clickedvalue" id="colorcode">

<table>
 <tr>
  <td bgColor="#FBEFEF"></td>
  <td bgColor="#F8E0E0"></td>
  <td bgColor="#FF0000"></td>
  <td bgColor="#610B0B"></td>
 </tr>
</table>

Answer 1

var yourInput = document.getElementById('colorcode');

document.getElementById('your-table-id').addEventListener('click', function (e) {
    var t = e.target;

    if (t.tagName === 'TD') yourInput.value = t.getAttribute('bgcolor');
});

DEMO

Answer 2

这是一种更强大的方法： DEMO

enter image description here

注意： bgColor已被弃用。您应该使用background-color属性上的style属性。仅注册click事件也不是跨浏览器友好的。

<强>的JavaScript

function addEventHandler(elem, eventType, handler) {
    if (elem.addEventListener) {
        elem.addEventListener(eventType, handler, false); // IE < 9 :(
    } else if (elem.attachEvent) {
        elem.attachEvent('on' + eventType, handler);
    }
}

function getStyle(elem, prop) {
    if (elem.currentStyle)
        return elem.currentStyle[prop];
    else if (window.getComputedStyle){
        var elStyle = window.getComputedStyle(elem, "");
        return elStyle.getPropertyValue(prop);
    }
}

function toHex(c) {
    var hex = parseInt(c).toString(16).toUpperCase();
    return hex.length == 1 ? "0" + hex : hex;
}

function rgb2Hex(rgbStr) {
    var rgbArr = rgbStr.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
    return '#' + toHex(rgbArr[1]) + toHex(rgbArr[2]) + toHex(rgbArr[3]);
}

var input = document.getElementById('txt');
var table = document.getElementById('color_table');

addEventHandler(table, 'click', getColor);

function getColor(e) {
    var target = e.target;

    if (target.tagName === 'TD') {
        input.value = rgb2Hex(getStyle(target, 'background-color'));
    }
}

<强> HTML

<label for="txt">Selected Color Value</label>
<input id="txt" type="text" />
<br />
<table id="color_table">
    <thead>
        <tr>
            <th>Red</th>
            <th>Green</th>
            <th>Blue</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="r1"></td>
            <td class="g1"></td>
            <td class="b1"></td>
        </tr>
        <tr>
            <td class="r2"></td>
            <td class="g2"></td>
            <td class="b2"></td>
        </tr>
        <tr>
            <td class="r3"></td>
            <td class="g3"></td>
            <td class="b3"></td>
        </tr>
    </tbody>
</table>

<强>样式表

table { border: thin black solid; }
td { width: 20px; height: 20px; }
.r1 { background: #FF0000; }
.r2 { background: #CF0000; }
.r3 { background: #7F0000; }
.g1 { background: #00FF00; }
.g2 { background: #00CF00; }
.g3 { background: #007F00; }
.b1 { background: #0000FF; }
.b2 { background: #0000CF; }
.b3 { background: #00007F; }

用于替换文本的Javascript

2 个答案: