Question

如何从下面的表格列下面的下拉菜单中，从相应的跨度中获取下面显示的时间值。例如：如果我在第一列中单击任何下拉菜单，则需要在第一列中获得时间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 (var i in workOrderList) {
        //console.log("=========================");
        $('.resource-popup').append("<li class='orkOrderlist'>\
                                                <div class='innerdiv"+ i + "'>\
                                                <div class='c-job-title job-dtls-clm border-btm'>"+ workOrderList[i].ServiceAccountName + "&nbsp(" + workOrderList[i].BoothNumber + ")</div>\
                                                <div class='c-job-time border-btm job-dtls-clm'>\
                                                <span class='job-start-tm'>"+ moment(workOrderList[i].StartTime).format('hh:mm A') + "</span>&nbsp;-&nbsp;<span class='job-end-tm'>"
            + moment(workOrderList[i].EndTime).format('hh:mm A') + "</span>\
                                                </div>");

Answer 1

您可以使用document.querySelectorAll()和target.addEventListener()函数来实现此功能而无需jQuery。

document.querySelectorAll('.job-start-tm')
   .forEach(input => input.addEventListener('click', event => 
   console.log(event.target.innerHTML))
)

<span class="job-start-tm">14:20</span>
<span class="job-start-tm">15:50</span>

Answer 2

尝试这样的事情：

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

Answer 3

使用jQuery，这相当简单。

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

同时，我假设

下拉菜单为<select>
它始终是包含选择的最后一行
每个表格列始终总是有两列
倒数第二行，其中包含您希望获取的值

如果这些假设中有任何一个错误，那么代码很容易被削弱。

$('.resource-group')                  // select the table
  .on('click', 
    // target the last row of each item, and then the <select> within that row
    '.orkOrderlist > div > :last-child select',
    e => {                            // add a single click handler on *the table*
      let $sel = $(e.target),         // capture the clicked <select>
        spanSelector =
          $sel.is(':first-child') ?   // determine which column <span> contains the value
            'span.job-start-tm' :     // selector for first <span>
            'span.job-end-tm',        // selector for last <span>
        $valueSpan =
          $sel.parent().prev()        // capture the row above the <select>s
            .children(spanSelector);  // capture the desired <span>

      console.log($valueSpan.text()); // do something with the value
    }
  );

ul.resource-group {
  display: flex;
  padding: 0;
  list-style-type: none;
}

li.orkOrderlist {
  border: 1px solid rgba(0, 0, 0, 10%);
}

.c-job-title {
  font-weight: bold;
}

.job-dtls-clm {
  padding: 4px;
}

select {
  border: none;
}

select:last-child {
  width: 100%;
  color: orange;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="resource-group">
  <li class="orkOrderlist">
    <div class="innerdiv0">
      <div class="c-job-title border-bottom job-dtls-clm">Royal BC Museum&nbsp;(1446)</div>
      <div class="c-job-time border-bottom job-dtls-clm">
        <span class="job-start-tm">6:30 PM</span>
        &nbsp;-&nbsp;
        <span class="job-end-tm">3:30 AM</span>
      </div>
      <div class="d-flex border-bottom job-dtls-clm">
        <select>
          <option>1</option>
        </select>
        <select class="w-auto">
          <option>(Empty)</option>
        </select>
      </div>
    </div>
  </li>
  <li class="orkOrderlist">
    <div class="innerdiv1">
      <div class="c-job-title border-bottom job-dtls-clm">Gwinnet Place Honda&nbsp;(1347)</div>
      <div class="c-job-time border-bottom job-dtls-clm">
        <span class="job-start-tm">6:30 PM</span>
        &nbsp;-&nbsp;
        <span class="job-end-tm">3:30 AM</span>
      </div>
      <div class="d-flex border-bottom job-dtls-clm">
        <select>
          <option>1</option>
        </select>
        <select class="w-auto">
          <option>(Empty)</option>
        </select>
      </div>
    </div>
  </li>
</ul>

很显然，为了说明每个步骤，我都很冗长。您可以使用一些jQuery柔术将代码大大缩短到3-5行。

与前两个答案相比，此方法有两个优点：

无论您有多少列，内存中只有一个函数和一个侦听器。在极少数情况下，如果您有数千个项目，此优化可以显着提高性能。
无论每个项目的列中有多少行，这都有效。

根据要对捕获的值进行处理，对代码进行调整非常容易，因为您已经具有选定的元素。例如，如果项目具有您希望通过每次下拉单击捕获的多个行值，则可以简单地将.prev()替换为.prevAll()并调用.map()或.each()来执行某项操作每个值，或调用.join()生成包含所有值的单个字符串。

将其从处理2列更改为处理 n 列也很容易。在行中捕获<select>的索引，并将范围选择器更改为`> span:nth-child(${n})`。

从鼠标单击表列的相应跨度中获取价值

3 个答案: