Javascript 在表列上单击鼠标，从相应的跨度中获取值

如何获得下面显示的时间值，从相应的跨度上单击鼠标下表列，该列有下拉列表。 例如：如果单击第1列中的任何下拉列表，我需要在第1列中获取时间

06:30 PM-03:30 AM

（显示在顶部）。 如果我单击第二列中的任何下拉列表，我需要获取第二列中的时间，依此类推。。使用Jquery

下表为html结构：

下面是div内部显示的跨度：

JavaScript:

function drpdwn_resource(resourceElement, resourceObj, isEmpty, startTimeSlot, endTimeSlot, showId, workOrderId) {    
var resourceData = [];
resourceData.push(resourceObj);
$(resourceElement).select2({
    data: resourceData,
    closeOnSelect: true,
    placeholder: '(Empty)',
    allowClear: true,
}).on('select2:open', function (e) {        
    $(resourceElement + ' option[value]').remove();
    //CRM Data
    $.ajax({
        url: "/DailyJobSchedule/GetResources",
        type: "POST",
        data: { start: startTimeSlot, end: endTimeSlot },
        async: false,
        success: function (response) {
            for (var data in response) {
                var newOption = new Option(response[data].text, response[data].id, false, false);
                $(resourceElement).append(newOption).trigger('change');
            }
        },
        failure: function (response) {
            console.log('failure');
        },
        error: function (response) {
            console.log('error');
        }
    });

C#：

for（workOrderList中的var i）{
//console.log（“===========================================”）；
$（'.resource popup'）.append（“
\
\
“+workOrderList[i].ServiceAccountName+”（“+workOrderList[i].BoothNumber+”）\
\
“+力矩（workOrderList[i].StartTime）.格式（'hh:mm A'）+”-”
+力矩（workOrderList[i].EndTime）.format（'hh:mm A'）+“\
");

您可以使用和函数来实现这一点，而无需jQuery

document.querySelectorAll（“.job start tm”）
.forEach（输入=>input.addEventListener（'click'，事件=>
log（event.target.innerHTML））
)

14:20
15:50

试试这样的方法：

document.addEventListener('click', function(e){
    if(e.target.tagName.toLowerCase() == 'span'){
        console.log(e.target.innerText);
    }
});

---

使用jQuery，它相当简单

我正在等待你编辑问题以显示下拉元素（希望发布html和css源代码，而不是屏幕截图），然后我将编辑这个答案

同时，我假设

• 下拉列表为
  s
• 它始终是包含选定项的最后一行
• 每个表列始终正好有两列
• 包含要获取的值的倒数第二行

如果这些假设中有任何一个是错误的，那么代码很容易被忽略

$（'.resource group'）//选择表
.on（'单击'，
//目标是每个项目的最后一行，然后是该行中的
'.orkOrderlist>div>：最后一个子项选择'，
e=>{//在*表上添加一个单击处理程序*
让$sel=$（e.target），//捕获单击的
选档杆=
$sel.is（“：first child”）？//确定哪个列包含该值
'span.job start tm'：//第一个的选择器
'span.job end tm'，//最后一个的选择器
$valueSpan=
$sel.parent（）.prev（）//捕获s上方的行
.children（spanSelector）；//捕获所需的
console.log（$valueSpan.text（））；//使用该值执行某些操作
}
)；

ul.resource-group{
显示器：flex；
填充：0；
列表样式类型：无；
}
li.orderlist{
边框：1px实心rgba（0,0,0,10%）；
}
c.职务{
字体大小：粗体；
}
.job dtls clm{
填充：4px；
}
挑选{
边界：无；
}
选择：最后一个孩子{
宽度：100%；
颜色：橙色；
}

皇家不列颠哥伦比亚博物馆（1446）
下午6:30
- 
凌晨3:30
1.
（空）


本田Gwinnet广场（1347）
下午6:30
- 
凌晨3:30
1.
（空）

您尝试了什么？请将您的问题插入到您的问题中。请看一看，您是否可以将您的图像替换为包含展开的下拉列表的div？我假设这是图像中的最后一个div。更好的是，将html复制并粘贴到代码块中。由于您需要使用jQuery，因此解决方案比目前的答案。

document.addEventListener('click', function(e){
    if(e.target.tagName.toLowerCase() == 'span'){
        console.log(e.target.innerText);
    }
});