用于替换文本的 Javascript答案

【问题标题】：Javascript for replacing text用于替换文本的 Javascript
【发布时间】：2014-03-09 19:38:27
【问题描述】：

为此，我需要 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>

【问题讨论】：

是的，请发布您的一些代码，以便我们查看您的设置。
“我该怎么办？” 在桌子上绑定一个点击事件处理程序。它应该测试单击了哪个元素。如果是td（单元格），则获取其内容。然后将输入字段的值设置为该内容。希望有帮助！

标签： javascript text replace

【解决方案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

【讨论】：

@Snowmane 已修复，抱歉我应该使用 e.target 而不是 e.currentTarget。

【解决方案2】：

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

注意： bgColor 已被弃用。您应该在style 属性上使用background-color 属性。此外，仅注册 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; }

【讨论】：