Question

正如您所看到的，当您单击行时，会出现一个小边框。我基本上只希望点击最后一行的边框更改，但我不知道用什么事件来带上我没有边框点击的上一行。最好的方法是什么？

P.S。我不能使用任何类型的＆＃34;失去焦点＆＃34;或类似的，因为我在我的页面上有很多表，并且点击这个特定表的最后一行需要保持对用户可见。想想它和许多无线电台组一样。

以下是代码：

<ul class="UploadTable" data-role="listview" data-inset="true" data-icon="false" style="min-width:350px">
    <li style="text-align: center !important">
        <label>UPLOAD SCHEDULE</label>
    </li>
    <li data-role="list-divider">
        <div class="ui-grid-b">
            <div class="ui-block-a" style="width:33%">Header 1</div>
            <div class="ui-block-b" style="width:34%">Header 2</div>
            <div class="ui-block-c" style="width:33%">Header 3</div>
        </div>
    </li>
    <li id="addedTargetRow" class="fitting">
        <a href="#" onclick="this.style.border='2px solid #000099;'">
            <div class="ui-grid-b">
                <div id="THW_ID" class="ui-block-a" style="width:33%">info1</div>
                <div id="POS" class="ui-block-b" style="width:34%">info2</div>
                <div id="IP" class="ui-block-c" style="width:33%">Info3</div>
            </div>                                                                                                                   </a>                                                                                                                     </li>
    <li id="addedTargetRow" class="fitting">
        <a href="#" onclick="this.style.border='2px solid #000099;'">
            <div class="ui-grid-b">
                <div id="THW_ID" class="ui-block-a" style="width:33%">info1</div>
                <div id="POS" class="ui-block-b" style="width:34%">info2</div>
                <div id="IP" class="ui-block-c" style="width:33%">Info3</div>
            </div>                                                                                                                   </a>                                                                                                                     </li>
    <li id="addedTargetRow" class="fitting">
        <a href="#" onclick="this.style.border='2px solid #000099;'">
            <div class="ui-grid-b">
                <div id="THW_ID" class="ui-block-a" style="width:33%">info1</div>
                <div id="POS" class="ui-block-b" style="width:34%">info2</div>
                <div id="IP" class="ui-block-c" style="width:33%">Info3</div>
            </div>                                                                         </a>
    </li>
</ul>

Answer 1

您有重复的ID。

为什么要在每个锚上都有onclick。（在演示中删除）

使用此JS

$(document).on('click', '.fitting', function () {
    $('.fitting').removeAttr('style');    // removes all previous borders
    $(this).css('border', '2px solid #000099')// add border to current element
})

Demo

警告：由于您只有样式属性中的边框，删除它不会影响任何内容，假设您有其他样式以及边框不要使用.removeAttr('style');，请使用.css('border', 'none')如下所示

$(document).on('click', '.fitting', function () {
    $('.fitting').css('border', 'none')// removes all previous borders
    $(this).css('border', '2px solid #000099')// add border to current element
})

更新：

如果有多个表格，请使用此$(this).parents('table').find('.fitting').css('border', 'none') 这会找到单击该行的表的fitting元素，不包括DOM中其他表中的相同元素

Answer 2

注意：@J Santosh的回答将切换所有表格中的所有链接，并且提到页面上有多页表格都会丢失突出显示的问题。

在列表项上使用onclick链接会使这个混乱并且不具备性能（因为我将通过下面的内容）。保持在您正在寻找的解决方案是：

onclick="var links=this.parentNode.parentNode.querySelectorAll('.fitting a') || [], i = links.length;  for (;!!i;i--) { links[i].style.border='none'; } this.style.border='2px solid #000099';"

这将确保您只删除该表中突出显示的行。

但是，这个结构有一些非常令人担忧的事情。

您的身份证并非独一无二。您应该删除id属性。
您可以使用href = javascript：“/ * onclick stuff to here * /”而不是添加onclick属性。
您无需在li中使用锚标签。添加额外的DOM项会使DOM更重，页面更慢。我怀疑你只是添加那些因为你想要指针图标。您可以使用CSS修复此问题。
您的onclicks都需要以相同的方式更新，并使您的代码更少可重用。向每个li添加eventHandler也很昂贵，因为该函数没有被缓存，并且需要为每个DOM元素提供额外的资源。
在CSS中设置样式可能最好在CSS中完成，因为它将与您的页面布局样式相关联。创建一个名为“selected”的类或类似的类，并添加类onclick。

这就是我编码的方式：

HTML：

删除所有链接！您使用的锚标签错误！另外，删除所有的ID。

CSS：

li.fitting { cursor: pointer; }

li.fitting.selected { border: 2px solid #000099 }

使用Javascript：

$(function(){
    $('li.fitting').on('click', function() {
        $(this).siblings().removeClass('selected');
        $(this).addClass('selected');
    });
});

Answer 3

您可以使用with open("Class1.csv", "r") as f: Reader = csv.reader(f) Data = list(Reader) Data.sort() print(Data)的HTML状态和JS＆＃34;模糊＆＃34;事件，使用HTML属性/*Initialize FileStreams for both writing and reading*/ writeStream = new FileStream(logfilePath, FileMode.Append, FileAccess.Write, FileShare.Read); readStream = new FileStream(logfilePath, FileMode.Open, FileAccess.Read, FileShare.ReadWrite); /*Initialize the Writer and Reader*/ fileWrite = new StreamWriter(writeStream); fileRead = new StreamReader(readStream);挂钩。因此，您需要将:focus修改为onblur并将onclick添加到同一链接。

更改动态表中单击的最后一行的边框（使用<ul>）

3 个答案: