I need to clear the data in a HTML td onfocus, similar to how it works in HTML input, but in an editable table that uses JQuery tabledit. Reason being that it is a CRUD table and it populates the table with data from a Db. If I want to edit one of the td, I don't want to have to delete the existing data, but rather when I click on the td, the value is set to "" and I can then just type the new data in.
<td><?php echo $row['payment_company']; ?></td>
I have tried as below, but it doesn't set the data value to empty
<td onfocus="this.value=''"><?php echo $row['payment_company']; ?></td>
So, this is what I am attempting to do the equivalent of:-
<input type='text' id='name' value = 'Hello' onfocus = 'this.value = ""' />
Update:
Because it's not working in my code here the generated HTML from the browser dev tools:
<td onclick="this.textContent='';" class="tabledit-view-mode">
<span class="tabledit-span">onclick textContent</span>
<input
class="tabledit-input form-control input-sm"
type="text"
name="payment_method"
value="onclick textContent"
style="display: none;"
disabled=""
>
</td>
A td has no value - you could use innerHTML or textContent instead. Furthermore the focus event fires if you give the element a tabindex. Alternatively you could use a click event.
Working example:
<table>
<td onfocus="this.innerHTML='';" tabindex="0">onfocus innerHTML / </td>
<td onfocus="this.textContent='';" tabindex="0">onfocus textContent</td>
<td onclick="this.innerHTML='';">onclick innerHTML / </td>
<td onclick="this.textContent='';">onclick textContent / </td>
</table>To use jQuery-Tabledit you need to select the generated child input and empty its value. You could do this inline:
<td onfocus="this.querySelector('input').value = '';" tabindex="0">inline</td>
or with a function call:
<td onfocus="emptyCell(this);" tabindex="0">function</td>
function emptyCell(scope) {
$(scope).find('input').val('');
}
Working example:
$('#test-table').Tabledit({
editButton: false,
hideIdentifier: true,
columns: {
identifier: [0, 'id'],
editable: [[1, 'onfocus1'], [2, 'onfocus2'], [3, 'onclick1'], [4, 'onclick2']]
}
});
function emptyCell(scope) {
$(scope).find('input').val('');
}.tabledit-remove-button {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Creating-A-Live-Editable-Table-with-jQuery-Tabledit/jquery.tabledit.js"></script>
<table id="test-table">
<thead>
<tr>
<th>#</th>
<th>onfocus1</th>
<th>onfocus2</th>
<th>onclick1</th>
<th>onclick2</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1</td>
<td onfocus="this.querySelector('input').value = '';" tabindex="0">inline</td>
<td onfocus="emptyCell(this);" tabindex="0">function</td>
<td onclick="this.querySelector('input').value = '';">inline</td>
<td onclick="emptyCell(this);">function</td>
</tr>
</tbody>
</table>You can do this. It should help In your html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table>
<tr>
<td onclick="erase()">we</td>
</tr>
</table>
<script src="script.js"></script>
</body>
</html>
In your script.js
function erase() {
event.target.innerHTML = ""
}