javascript - 如何为表格元素提供单独的值以在 HTML 中右键单击

Question

我正在用电子制作服务器端应用程序。服务器端是 GUI，我使用 Electron 作为前端。当客户端连接到服务器时，我有一个表显示连接的客户端。因此，对于每个客户端，它会自动在表中显示信息，例如名称、IP、国家/地区等。我想要做的是将该表行的值设置为一个套接字。因此，当我右键单击该表行时，它会为我提供该客户端的选项。

这是我制作表格的方式:

            <table id="connections" width=100%>
                <tr id="headi">
                    <th>ID</th>
                    <th>Name</th>
                    <th>IP</th>
                    <th>Country</th>
                    <th>Connected Since</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Ricky</td>
                    <td>192.167.87.1</td>
                    <td>Noobsville</td>
                    <td>Never</td>
                </tr>
            </table>
</section>

我还没有完成客户端的自动添加，但这就是它的样子。如果有办法将套接字分配给一行，请告诉我。或者我只是做错了，但事实并非如此。提前致谢。

Answer 1

这是一个简单的例子来实现你所需要的。您需要研究更多有关如何触发 API 调用和处理选择更改的内容

$('.action').on('change', function() {
    const val = $(this).val()
    
    if (val == "1") {
      $(this).closest('tr').remove()   
    }
    else if (val == "3") {
      console.log("Socket ID: " + $(this).closest('tr').data('socketid'))
    }

});

table tr td, table tr th {
   text-align: center;
   border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="connections" width=100%>
                <tr id="headi">
                    <th>Action</th>
                    <th>ID</th>
                    <th>Name</th>
                    <th>IP</th>
                    <th>Country</th>
                    <th>Connected Since</th>
                </tr>
                <tr data-socketid="10001">
                    <td>
                        <select class="action">
                           <option value=""></option>
                           <option value="1">Close</option>
                           <option value="2">Other Action</option>
                           <option value="3">Show Socket</option>
                       </select>
                    </td>
                    <td>1</td>
                    <td>Ricky</td>
                    <td>192.167.87.1</td>
                    <td>Noobsville</td>
                    <td>Never</td>
                </tr>
                <tr data-socketid="10002">
                    <td>
                        <select class="action">
                           <option value=""></option>
<option value="1">Close</option>
                           <option value="2">Other Action</option>
                           <option value="3">Show Socket</option>
                        </select>
                    </td>
                    <td>2</td>
                    <td>John</td>
                    <td>192.167.87.2</td>
                    <td>Noobsville</td>
                    <td>Never</td>
                </tr>
                <tr data-socketid="10003">
                    <td>
                        <select class="action">
                           <option value=""></option>
                           <option value="1">Close</option>
                           <option value="2">Other Action</option>
                           <option value="3">Show Socket</option>
                        </select>
                    </td>
                    <td>3</td>
                    <td>Smith</td>
                    <td>192.167.87.3</td>
                    <td>Noobsville</td>
                    <td>Never</td>
                </tr>
            </table>

编辑

您可以使用数据属性来存储有关您的元素的额外数据

<tr id="tr-test" data-xx="somevalue1"></tr>
<td id="td-test" data-yy="somevalue2"></td>
<div id="div-test" data-zz="somevalue3"></div>

// To retrieve
$('#tr-test').data('xx')
$('#td-test').data('yy')
$('#div-test').data('zz')

编辑2

// To set data attribute
$('#tr-test').data('xx', 'xxx')
$('#td-test').data('yy', 'yyy')
$('#div-test').data('zz', 'zzz')