如何在输入中显示选定行的信息？

Question

这是我想要的问题，当我单击 html 数组一行中的按钮时，选择行的信息显示在输入中并且不可编辑。

这是我的界面，以便更好地理解：

我希望当我点击保留时显示以下模态，并且模态库存输入所选行的信息，这是我的模态：

问题是我真的不知道如何用代码做到这一点。

这是我的 javascript 代码：

<script>

    var table= document.getElementById('table1');

    for(int i=1; i<table.rows.length; i++){

        function afficher(){

         document.getElementById('nom_local').value=this.cells[0].innerHtml;

         document.getElementById('numeroplace').value=this.cells[1].innerHtml;

         document.getElementById('prixplace').value=this.cells[2].innerHtml;

         document.getElementById('tailleplace').value=this.cells[3].innerHtml;

        }

    }

</script>

Answer 1

将一个类添加到您的保留按钮并将点击事件处理程序绑定到您的按钮。从那里，您可以从该行中提取数据并填充您的模态字段。下面是一个使用 JQuery 的例子：$(document).ready(function() {&nbsp; &nbsp; $('.reserve').on('click', function(e) {&nbsp; &nbsp; &nbsp; &nbsp; var rowData = $(this).parent().parent().children();&nbsp; &nbsp; &nbsp; &nbsp; $('#nom_local').val($(rowData).eq(0).text());&nbsp; &nbsp; &nbsp; &nbsp; $('#numeroplace').val($(rowData).eq(1).text());&nbsp; &nbsp; &nbsp; &nbsp; $('#prixplace').val($(rowData).eq(2).text());&nbsp; &nbsp; &nbsp; &nbsp; $('#tailleplace').val($(rowData).eq(3).text());&nbsp; &nbsp; });});

Answer 2

我希望这个片段可以帮助你jQuery(document).ready(($) => {&nbsp; &nbsp; let orderedList = $('<ol></ol>');&nbsp; &nbsp; jQuery.fx.interval = 7;&nbsp; &nbsp; $('table').on({&nbsp; &nbsp; &nbsp; &nbsp; mouseover: (e) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (e.target.parentNode.nodeName !== 'BODY') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!$(e.target.parentNode).hasClass('selected')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(e.target.parentNode).attr('class', 'over');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; mouseout: (e) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!$(e.target.parentNode).hasClass('selected')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(e.target.parentNode).attr('class', 'out');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; click: (e) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($(e.target.parentNode).hasClass('selected')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(e.target.parentNode).attr('class', 'out');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let children = orderedList.first().children();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(children).each((index, c) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (c.textContent == e.target.parentNode.textContent) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let element = c;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(element).animate(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, 1000, () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(element).remove();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if($(orderedList).children().length == 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(orderedList).hide('slow');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(e.target.parentNode).attr('class', 'selected');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (orderedList.children().length === 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; orderedList.text('You have chosen:')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .hide()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .appendTo(document.body)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .show('slow');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let listItem = $('<li></li>');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; listItem.text(e.target.parentNode.textContent)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; orderedList.append(listItem);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; listItem.show('slow');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});table, th, td {&nbsp; &nbsp; border: 1px solid black;&nbsp; &nbsp; border-collapse: collapse;}.over {&nbsp; &nbsp; background-color: aqua;}.out {&nbsp; &nbsp; background-color: white;}.selected {&nbsp; &nbsp; background-color: greenyellow;}li.hide {&nbsp; &nbsp; display: none;}<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <link rel="stylesheet" href="style.css"/>&nbsp; &nbsp; <title>Demo</title></head><body><table>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; First header&nbsp; &nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; &nbsp; &nbsp; <th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Second header&nbsp; &nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; &nbsp; &nbsp; <th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Third header&nbsp; &nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; &nbsp; &nbsp; <th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Fourth header&nbsp; &nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; &nbsp; &nbsp; <th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Fifth header&nbsp; &nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; First Cell&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Second Cell&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Third Cell&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Fourth Cell&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Fifth Cell&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 1 Cell&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2 Cell&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 3 Cell&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 4 Cell&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 5 Cell&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; F Cell&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; S Cell&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; T Cell&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; F Cell&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; F Cell&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr></table><script&nbsp; &nbsp; &nbsp; &nbsp; src="https://code.jquery.com/jquery-3.4.1.min.js"&nbsp; &nbsp; &nbsp; &nbsp; integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="&nbsp; &nbsp; &nbsp; &nbsp; crossorigin="anonymous"></script><script async src="test.js" type="module"></script></body></html>