javascript - 通过 id 链接更改 td 颜色

Question

我需要更改 <td> 的背景关于链接调用类型的内容。

这是菜单代码:

                    <li class="dropdown">
                        <a id="FV Orders_sub" class="dropdown-toggle" data-toggle="dropdown" role="button" href="#">Inserisci Contratto<b class="caret"></b></a>
                          <ul id="FV Orders_sub" class="dropdown-menu" role="menu">
                            <li>
                               <a href="index.php?module=SalesOrder&view=Edit&parenttab=FV Orders" id="nuovocontrattoFV">Nuovo Contratto</a>
                            </li>
                            <li>
                               <a href="index.php?module=SalesOrder&view=List&viewname=50" id="nuovocontrattoBIKE">Nuovo contratto bike</a>
                            </li>
                         </ul>
                    </li>

这是内容代码:

            <td class="fieldLabel {$WIDTHTYPE}" id="fieldlabel">
                {if $isReferenceField neq "reference"}<label class="muted pull-right marginRight10px">{/if}
                    {if $FIELD_MODEL->isMandatory() eq true && $isReferenceField neq "reference"} <span class="redColor">*</span> {/if}
                    {if $isReferenceField eq "reference"}
                        {assign var="REFERENCE_LIST" value=$FIELD_MODEL->getReferenceList()}
                        {assign var="REFERENCE_LIST_COUNT" value=count($REFERENCE_LIST)}
                        {if $REFERENCE_LIST_COUNT > 1}
                            {assign var="DISPLAYID" value=$FIELD_MODEL->get('fieldvalue')}
                            {assign var="REFERENCED_MODULE_STRUCT" value=$FIELD_MODEL->getUITypeModel()->getReferenceModule($DISPLAYID)}
                            {if !empty($REFERENCED_MODULE_STRUCT)}
                                {assign var="REFERENCED_MODULE_NAME" value=$REFERENCED_MODULE_STRUCT->get('name')}
                            {/if}
                            <span class="pull-right">
                                {if $FIELD_MODEL->isMandatory() eq true} <span class="redColor">*</span> {/if}
                                <select class="chzn-select referenceModulesList streched" style="width:140px;">
                                    <optgroup>
                                        {foreach key=index item=value from=$REFERENCE_LIST}
                                            <option value="{$value}" {if $value eq $REFERENCED_MODULE_NAME} selected {/if}>{vtranslate($value, $MODULE)}</option>
                                        {/foreach}
                                    </optgroup>
                                </select>
                            </span>
                        {else}
                            <label class="muted pull-right marginRight10px">{if $FIELD_MODEL->isMandatory() eq true} <span class="redColor">*</span> {/if}{vtranslate($FIELD_MODEL->get('label'), $MODULE)}</label>
                        {/if}
                    {else if $FIELD_MODEL->get('uitype') eq "83"}
                        {include file=vtemplate_path($FIELD_MODEL->getUITypeModel()->getTemplateName(),$MODULE) COUNTER=$COUNTER}
                    {else}
                        {vtranslate($FIELD_MODEL->get('label'), $MODULE)}
                    {/if}
                {if $isReferenceField neq "reference"}</label>{/if}
            </td>

我试图在网上找到一些东西，但什么也找不到。当用户单击它时，我的 td 元素需要不同的背景颜色。

Answer 1

HTML:

<td class="fieldLabel" id="fieldlabel">
    <label class="muted pull-right marginRight10px">
        <span class="redColor">*</span>
        <span class="pull-right">
            <span class="redColor">*</span>
            <select class="chzn-select referenceModulesList streched" style="width:140px;">
                <optgroup>
                    <option value=""></option>
                </optgroup>
            </select>
        </span>
        <label class="muted pull-right marginRight10px"><span class="redColor">*</span></label>
    </label>
</td>

我的第一个问题是 HTML 结构。虽然技术上可行，但嵌套 <label>在另一个里面 <label>是不好的做法。还是我误解了您示例中的嵌套 if 语句？如果您可以发布输出示例而不是模板代码，它可能会更清楚。

暂时搁置这一点，最好的办法是使用 JavaScript 来切换类(无论是为了性能还是为了可维护性——你永远不应该在 HTML 中内联样式，也不应该在 JavaScript 中内联样式，除非你绝对无法避免)。

CSS:

td.highlighted {
    background-color: #AAF; /* a nice, pleasing shade of purple */
}

JavaScript:

window.util = (function() {
    return {
        // class manipulation from http://www.openjs.com/scripts/dom/class_manipulation.php
        // taken from https://gist.github.com/jbergantine/1165817
        hasClass: function(ele,cls) {
            return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
        },
        addClass: function(ele,cls) {
            if (!this.hasClass(ele,cls)) ele.className += " "+cls;
        },
        removeClass: function(ele,cls) {
            if (this.hasClass(ele,cls)) {
                var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
                ele.className=ele.className.replace(reg,' ');
            }
        }
    };
})();

var tdClick = function(event) {
    var util = window.util;
    // if clicked element is a highlightable <td>
    if (util.hasClass(event.toElement, "clickToHighlight")) {
        // toggle class
        if (util.hasClass(event.toElement, "highlighted")) {
            util.removeClass(event.toElement, "highlighted");
        } else {
            util.addClass(event.toElement, "highlighted");
        }
    }
}

document.getElementById("tableId").addEventListener("click", tdClick);

JSFIDDLE

...或者如果您更喜欢 jQuery:

$("#tableId").on("click", ".clickToHighlight", function(e) {
    var $this = $(this);

    if ($this.is(".clickToHighlight")) {
        $this.toggleClass("highlighted");
    }
});

JSFIDDLE

您会注意到我将事件处理程序附加到表本身。这是因为，对于足够大的表，将事件直接附加到每个元素可能会导致性能问题，并且如果可以通过 AJAX 更新表，那么您还有另一个问题需要将新的事件处理程序附加到每个新元素 -生成的表格单元格。我使用的技术称为“事件委托(delegate)”，其中我们将事件监听器委托(delegate)给父元素，它将处理每个点击事件并过滤出哪些是重要的并对其采取行动，而不是拥有数十个或数百个个人听众。