Hi there can someone help me, I want every keyword list, there is a google search button, and when I click on it, it will open a new browser tab, can anyone help me, I don't understand coding at all, so I ask for help here, I'm attaching a screenshot, thank you
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>TRENDING</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- <style type="text/css"> -->
<!-- h3 span { -->
<!-- font-size: 22px; -->
<!-- margin-left: auto; -->
<!-- } -->
<!-- h3 input.search-input { -->
<!-- width: 100px; -->
<!-- margin-left: auto; -->
<!-- float: right -->
<!-- } -->
<!-- .mt32 { -->
<!-- margin-top: 32px; -->
<!-- } -->
<!-- </style> -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script> $(document).ready(function() {$('table').DataTable();} ); </script>
</head>
<body >
<!-- <div > -->
<!-- <h3> -->
<!-- <span>RESULT</span> -->
<!-- </h3> -->
<!-- </div> -->
<table >
<thead><tr><th title="Field #1">keyword</th>
<th title="Field #2">products</th>
<th title="Field #3">date</th>
</tr></thead>
<tbody><tr>
<td>smooth operator</td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
<tr>
<td>horse</td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
</tbody></table>
</body>
</html>CodePudding user response：
Here is an example
the opening of the window is blocked here at SO
$(document).ready(function() {
$('table').DataTable();
$('table tbody tr td:nth-child(1)').html(function() {
return `<button type="button" title="google search" >${this.innerText}</button>`
})
$(".search").on("click",function() {
window.open(`https://google.com/search?q=${this.innerText}`,'_blank');
})
});.search { width: 70%; }<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<table >
<thead>
<tr>
<th title="Field #1">keyword</th>
<th title="Field #2">products</th>
<th title="Field #3">date</th>
</tr>
</thead>
<tbody>
<tr>
<td>smooth operator</td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
<tr>
<td>horse</td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
</tbody>
</table>CodePudding user response：
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>TRENDING</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- <style type="text/css"> -->
<!-- h3 span { -->
<!-- font-size: 22px; -->
<!-- margin-left: auto; -->
<!-- } -->
<!-- h3 input.search-input { -->
<!-- width: 100px; -->
<!-- margin-left: auto; -->
<!-- float: right -->
<!-- } -->
<!-- .mt32 { -->
<!-- margin-top: 32px; -->
<!-- } -->
<!-- </style> -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script> $(document).ready(function() {$('table').DataTable();} ); </script>
</head>
<body >
<!-- <div > -->
<!-- <h3> -->
<!-- <span>RESULT</span> -->
<!-- </h3> -->
<!-- </div> -->
<table >
<thead><tr><th title="Field #1">keyword</th>
<th title="Field #2">products</th>
<th title="Field #3">date</th>
</tr></thead>
<tbody><tr>
<td>smooth operator <a target="_blank" style="font-size:70%" href="//www.google.com/search?q=smooth operator">Google search</a></td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
<tr>
<td>horse <a target="_blank" style="font-size:70%" href="//www.google.com/search?q=horse" >Google search</a></td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
</tbody></table>
</body>
</html>