这是我想要的问题，当我单击 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>
2 回答
蝴蝶不菲
TA贡献1810条经验 获得超4个赞
将一个类添加到您的保留按钮并将点击事件处理程序绑定到您的按钮。从那里，您可以从该行中提取数据并填充您的模态字段。下面是一个使用 JQuery 的例子：
$(document).ready(function() {
$('.reserve').on('click', function(e) {
var rowData = $(this).parent().parent().children();
$('#nom_local').val($(rowData).eq(0).text());
$('#numeroplace').val($(rowData).eq(1).text());
$('#prixplace').val($(rowData).eq(2).text());
$('#tailleplace').val($(rowData).eq(3).text());
});
});
吃鸡游戏
TA贡献1829条经验 获得超7个赞
我希望这个片段可以帮助你
jQuery(document).ready(($) => {
let orderedList = $('<ol></ol>');
jQuery.fx.interval = 7;
$('table').on({
mouseover: (e) => {
if (e.target.parentNode.nodeName !== 'BODY') {
if (!$(e.target.parentNode).hasClass('selected')) {
$(e.target.parentNode).attr('class', 'over');
}
}
},
mouseout: (e) => {
if (!$(e.target.parentNode).hasClass('selected')) {
$(e.target.parentNode).attr('class', 'out');
}
},
click: (e) => {
if ($(e.target.parentNode).hasClass('selected')) {
$(e.target.parentNode).attr('class', 'out');
let children = orderedList.first().children();
$(children).each((index, c) => {
if (c.textContent == e.target.parentNode.textContent) {
let element = c;
$(element).animate(
{
opacity: 0
}, 1000, () => {
$(element).remove();
if($(orderedList).children().length == 0) {
$(orderedList).hide('slow');
}
});
}
});
} else {
$(e.target.parentNode).attr('class', 'selected');
if (orderedList.children().length === 0) {
orderedList.text('You have chosen:')
.hide()
.appendTo(document.body)
.show('slow');
}
let listItem = $('<li></li>');
listItem.text(e.target.parentNode.textContent)
.hide();
orderedList.append(listItem);
listItem.show('slow');
}
}
});
});
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.over {
background-color: aqua;
}
.out {
background-color: white;
}
.selected {
background-color: greenyellow;
}
li.hide {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css"/>
<title>Demo</title>
</head>
<body>
<table>
<tr>
<th>
First header
</th>
<th>
Second header
</th>
<th>
Third header
</th>
<th>
Fourth header
</th>
<th>
Fifth header
</th>
</tr>
<tr>
<td>
First Cell
</td>
<td>
Second Cell
</td>
<td>
Third Cell
</td>
<td>
Fourth Cell
</td>
<td>
Fifth Cell
</td>
</tr>
<tr>
<td>
1 Cell
</td>
<td>
2 Cell
</td>
<td>
3 Cell
</td>
<td>
4 Cell
</td>
<td>
5 Cell
</td>
</tr>
<tr>
<td>
F Cell
</td>
<td>
S Cell
</td>
<td>
T Cell
</td>
<td>
F Cell
</td>
<td>
F Cell
</td>
</tr>
</table>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script async src="test.js" type="module"></script>
</body>
</html>
添加回答
举报
0/150
提交
取消