通过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更新表，那么您还有另一个问题需要为每个新事件追加新的事件处理程序生成表格单元格。我正在使用的技术称为“事件委托”，其中我们将事件监听器委托给父元素，在那里它将处理每个单击事件并过滤掉哪些重要事件并对其进行操作，而不是有几十个或几百个事件。个别听众。

Answer 2

您可以通过向event listener事件中的元素添加click直接通过javascript执行此操作。

可以通过调用元素上的addEventListener方法来完成此操作，您可以id通过调用getElementById上的document来检索该元素。

HTML：

<table>
    <tr>
        <td id="td1">
            <div>
                <span>Here is my td!</span>
            </div>
        </td>
    </tr>
</table>

JS：

document.getElementById("td1").addEventListener("click",
    function() {
        this.style.background="red";                                                    
    }
);

和working example

和more fun example

因此适合td的{​​{1}} {/ p>

HTML：

id

JS：

<table>
    <tr>
        <td class="fieldLabel {$WIDTHTYPE}" id="fieldlabel">
            <!-- More elements here -->
        </td>
    </tr>
</table>

修改

如果您希望菜单项上的唯一ID具有单独的行为以影响相同的document.getElementById("fieldlabel").addEventListener("click", function() { this.style.background="red"; } ); 元素，那么您可以为每个按钮分配一些<td>事件行为到每个click和有这个功能要么直接改变颜色，要么创建一个处理它们的包装函数。我建议使用第二种方法，因为如果您希望稍后进行更改，则更容易更改A函数，然后必须通过代码的更大部分。

HTML：

link

JS：

<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>
<table>
    <tr>
        <td id="td1">
            <div> <span>Here is my td!</span>

                <!-- More Stuff Here-->
            </div>
        </td>
    </tr>
</table>

这样，如果您想要更多选项，可以通过添加此事件处理程序来简单地修改代码：

document.getElementById("nuovocontrattoFV").addEventListener("click",

function () {
    switchTDBackgroundColor(this.id);
});

document.getElementById("nuovocontrattoBIKE").addEventListener("click",

function () {
    switchTDBackgroundColor(this.id);
});

function switchTDBackgroundColor(id) {
    var color = "white"; // A default setting
    if (id == "nuovocontrattoBIKE") {
        color = "blue";
    } else if (id == "nuovocontrattoFV") {
        color = "red";
    }
    document.getElementById("td1").style["background-color"] = color;
}

Updated jsfiddle example 注意：我在jsfiddle示例中的链接上添加了主题标签document.getElementById("nuovocontrattoFV").addEventListener("click", function () { switchTDBackgroundColor(this.id); } ); document.getElementById("nuovocontrattoBIKE").addEventListener("click", function () { switchTDBackgroundColor(this.id); } ); // ONLY HAVE TO CHANGE THE ARGUMENT FOR getElementById document.getElementById("newListItem").addEventListener("click", function () { switchTDBackgroundColor(this.id); } ); function switchTDBackgroundColor(id) { var color = "white"; // A default setting if (id == "nuovocontrattoBIKE") { color = "blue"; } else if (id == "nuovocontrattoFV") { color = "red"; } else if (id == "newListItem") { // Just Add this check color = "yellow"; // And set to desired color } document.getElementById("fieldlabel").style["background-color"] = color; } ，这只是为了避免重定向，因此只是颜色更改行为被突出显示 < / p>

编辑2：

对于jQuery改编

href

jsfiddle for the jquery

Answer 3

您需要使用Javascript onclick事件来触发更改。在Javascript函数中，您可以将元素传递给函数。

HTML

<td class="fieldLabel {$WIDTHTYPE}" id="fieldlabel" onclick="changeTD(this);">

的Javascript

function changeTD(x)
{
    x.style.color="red";
}

...或

function changeTD(x)
{
    x.style.color="#00ff00";
}

...或

function changeTD(x)
{
    x.style.color="rgb(0,0,255)";
}

onclick Event

Pass element to function

CSS Color

Change Style with Javascript