Цель:
Отобразить всплывающее окно Search5, нажав на значок стрелки в отношении текстовой ссылки «test».
Сначала нажмите на тест текстовой ссылки, затем нажмите на значок стрелки, и появится всплывающее окно поиска.
Проблема:
При нажатии на ссылку «текст» теста появится значок.При нажатии на значок содержимое всплывающего окна «Поиск» не отображается.
Какой код мне не хватает?Я пытался с другим решением, но мне не удалось.
Сравните третий ряд из таблицы, значок работает, что вы можете показать содержимое всплывающего поиска.
Информация:
* Я использую загрузчик 3
Спасибо!
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Search</th>
<th>Test</th>
</tr>
</thead>
<tbody id="datafromtbody">
<tr id="tr_row1">
<td id="tr_row1_td1"></td>
<td><a href="#myModal-firstdata" data-toggle="modal" data-target="#myModal-firstdata" class="firstdata" id="data_1">test</a></td>
</tr>
<tr>
<td id="tr_row2_td2"></td>
<td><a href="#myModal-firstdata" data-toggle="modal" data-target="#myModal-firstdata" class="firstdata" id="data_2">test</a></td>
</tr>
<tr id="tr_row3">
<td id="tr_row2_td3">
<a href="#myModal-search5" data-toggle="modal" data-target="#myModal-search5" class="showseconddata" id="data_3">
<img src="https://cdn4.iconfinder.com/data/icons/aiga-symbol-signs/581/aiga_uparrow_inv-512.png" width="15" height="15" />
</a>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" id="myModal-firstdata" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">First data</h4>
</div>
<div class="modal-body">
<div id="firstdata_content"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal-search5" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Search 5</h4>
</div>
<div class="modal-body">
<div id="showdatafor5"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$('.firstdata').click(function () {
var alldata = $(this).attr("id");
var number = alldata.split('_')[1];
var display ="<table><thead><tr><th>a</th><th>b</th></tr></thead><tbody>";
display +="<tr>";
display +="<td>a</td><td><button onclick='createicon(" + number + ")'>add data in table</button></td>";
display +="</tr>";
display +="</tbody></table>";
var anydata = document.getElementById("firstdata_content");
anydata.innerHTML = display;
});
function createicon(data)
{
var idname = "tr_row" + data + "_td" + data;
var anydata = document.getElementById(idname);
if (anydata.innerHTML === "") {
var addData = document.getElementById(idname);
addData.innerHTML = "<a href='#myModal-search5' data-toggle='modal' data-target='#myModal-search5' class='showseconddata'><img src='https://cdn4.iconfinder.com/data/icons/aiga-symbol-signs/581/aiga_uparrow_inv-512.png' width='15' height='15' /></a>";
}
}
$('.showseconddata').click(function () {
var display ="<table><thead><tr><th>a</th><th>b</th></tr></thead><tbody>";
display +="<tr>";
display +="<td>show data</td>";
display +="<td>show data</td>";
display +="</tr>";
display +="</tbody></table>";
var anydata = document.getElementById("showdatafor5");
anydata.innerHTML = display;
});
</script>
</body>
</html>