I am having DataTable and it contains TABLE > TBODY > TR > TD. I want to make each TD clickable as, when I click on any TD then it should display html select option for first 2 columns and the value in TD should get selected in html select option and display input text for another 2 columns with TD value in input text.
When I should click somewhere else other than DataTable, then controls should get hide with the selected values in TD.
How this could be done.
Below is the code and I have made an OnClick event on each TD. But how should I get the value of the clicked TD cell and to display control in it?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/multiselect/jquery-3.6.0.min.js"></script>
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [{
extend: 'excelHtml5',
customize: function (xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
// Loop over the cells in column `C`
$('row c[r^="C"]', sheet).each(function () {
// Get the value
if ($('is t', this).text() == 'New York') {
$(this).attr('s', '20');
}
});
}
}]
});
});
function Edit(n) {
alert(n);
if (n === 1) {
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table id="example" class="display" style="width: 100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td onclick="Edit('1')" class="clickable">Tiger Nixon</td>
<td onclick="Edit('2')" class="clickable">System Architect</td>
<td onclick="Edit('3')" class="clickable">Edinburgh</td>
<td onclick="Edit('4')" class="clickable">61</td>
<td onclick="Edit('5')" class="clickable">2011-04-25</td>
<td onclick="Edit('6')" class="clickable">$320,800</td>
</tr>
<tr>
<td onclick="Edit('1')" class="clickable">Garrett Winters</td>
<td onclick="Edit('2')" class="clickable">Accountant</td>
<td onclick="Edit('3')" class="clickable">Tokyo</td>
<td onclick="Edit('4')" class="clickable">63</td>
<td onclick="Edit('5')" class="clickable">2011-07-25</td>
<td onclick="Edit('6')" class="clickable">$170,750</td>
</tr>
<tr>
<td onclick="Edit('1')" class="clickable">Ashton Cox</td>
<td onclick="Edit('2')" class="clickable">Junior Technical Author</td>
<td onclick="Edit('3')" class="clickable">San Francisco</td>
<td onclick="Edit('4')" class="clickable">66</td>
<td onclick="Edit('5')" class="clickable">2009-01-12</td>
<td onclick="Edit('6')">$86,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</form>
</body>
</html>
