Question

我有一个带有列的html表，其中每个列都包含按钮和下拉列表。

<table class="table" border="1">
   <thead>
      <tr>
         <td>
            <p>
               Terminy
            </p>
            <br/>
            <p>
               Warsztat
            </p>
            <p>
               Liczba uczestników
            </p>
         </td>
         @foreach(DateTime date in Model.AssignedAttractions.Keys.ToList())
         {
         <td>
            <p>
               @date.ToShortDateString()
            </p>
            <p>
               @(ReservationAttractions.Days[date.DayOfWeek.ToString()])
            </p>
            <p>
               @Html.DropDownList("AttractionsAvaiableAttractions", Model.AvaiableAttractions)
            </p>
            <p>
               @Html.DropDownList("AttractionsQuantityParticipants", Model.ParticipantsQuantity)
            </p>
            <p>
               <input type="button" value="Wybierz" />
            </p>
         </td>
         }
      </tr>
   </thead>
</table>

列数可以不同。如何使用javascript点击哪个按钮并从下拉列表中获取所选项目，这些列表位于单击按钮所在的列中？

使用模型填表。

public class ReservationAttractions
    {

        public List<SelectListItem> AvaiableAttractions { get; set; }

        public List<SelectListItem> ParticipantsQuantity { get; set; }

        public Dictionary<DateTime,List<string>> AssignedAttractions { get; set; }

    }

Answer 1

您可以为按钮添加点击处理程序。然后在下拉列表中选择值：

$(document).ready(function () {
    $("thead td input[type='button']").click(function () {
        // gets the td for which button was clicked
        var $td = $(this).closest("td"); 
        // gets the selected Attraction for that particular td
        var selectedAttractions = $td.find("[name^='AttractionsAvaiable']").val();
        // gets the selected Participants for that td
        var selectedParticipants = $td.find("[name^='AttractionsQuantity']").val();
    });
});

MVC将name属性添加到表单元素中。当有一个循环时，它会附加额外的东西来区分元素。 [name^='AttractionsAvaiableAttractions']是Attribute Starts With Selector。这将返回select元素。从那里，你可以得到.val()来获得在dropdwons中选择的值。

Answer 2

您可以在每个按钮单击处理程序中传递索引或模型ID。

<button type="button" onclick="onClick(@id)">

然后，您可以在点击处理程序中使用该ID来确定单击了哪个模型。

function onClick(id) {
  console.log(id + ' was clicked');
}

Answer 3

您可以将ID绑定到每个按钮。因此，根据按钮ID，您可以根据传递的值生成Ajax请求，该请求将填充下拉列表。

Answer 4

你可以在pure vanilla JS中尝试这样的东西来找到点击的行。

<button type="button" onclick="handleTblBtnClick">

获取ID

function handleTblBtnClick() {
console.log(arguments[0].target.id);
}

要获得更多详细信息，例如行号和列号，您可以尝试以下操作：

    function handleTblBtnClick(event) {
    console.log(event.target.id);
    console.log("Row :" + event.target.parentNode.parentNode.rowIndex + 
                "Column :" + event.target.parentNode.cellIndex);
    }

Answer 5

如何使用javascript点击哪个按钮并从下拉列表中获取所选项目，这些列表位于点击按钮所在的列中？

您可以遍历dom直到closest祖先单元格，这样您就可以find全部下拉您的兴趣。

如何区分点击了哪个按钮？

你不需要与众不同。您只能将所有下拉列表视为同一单元格的子项。

因此，元素是：

 $(this).closest('td').find('select option:selected')

在javascript中：

this.closest('td').querySelectorAll('select')

＆＃13;

$('[type="button"]').on('click', function(e) {
    var selectedValues = $(this).closest('td').find('select option:selected').map(function(idx, ele) {
        return this.textContent;
    }).get();
    console.log('jQuery: ' + selectedValues);
})

document.querySelectorAll('[type="button"]').forEach(function(ele, idx) {
    ele.addEventListener('click', function(e) {
        var selectedValues = Array.from(this.closest('td').querySelectorAll('select')).map(function(ele, idx) {
            return ele.options[ele.selectedIndex].textContent;
        });
        console.log('javascript: ' + selectedValues);
    });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
    <thead>
    <tr>
        <td>
            <p>
                Terminy
            </p>
            <br/>
            <p>
                Warsztat
            </p>
            <p>
                Liczba uczestników
            </p>
        </td>
        <td>
            <p>
                09/09/2017
            </p>
            <p>
                10
            </p>
            <p>
                <select>
                    <option value="a">a</option>
                    <option value="b">b</option>
                    <option value="c">c</option>
                    <option value="d">d</option>
                </select>
            </p>
            <p>
                <select>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </p>
            <p>
                <input type="button" value="Wybierz">
            </p>
        </td>
    </tr>
    </thead>
</table>

＆＃13;

检测在html表中单击了哪个按钮

5 个答案: