JAVASCRIPT delete specific row html table javascript - Net-Raft.com

Welcome aboard! We are happy you are here and wish you good net-raft!




Just a Web Code Solution

delete a specific row in a html table using javascript


 345

Show ResultJAVASCRIPT


2

<!DOCTYPE html>
<html>
<head>

<script>
var rowId = 0;

function addMoreRows() {

var user = document.getElementById('user_id').value;
var date = document.getElementById('date').value;
var color = document.getElementById('color').value;
var table = document.getElementById('tbl_id');

var row = table.insertRow();

var rowBox = row.insertCell(0);
var userName = row.insertCell(1);
var Date = row.insertCell(2);
var Color = row.insertCell(3);
var checkbox = row.insertCell(4);

rowBox.innerHTML = '<input type="checkbox" id="delete' + getRowId() + '">';
userName.innerHTML = user;
Date.innerHTML = date;
Color.innerHTML = color;

}

function deleteMoreRows(tableID) {

var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var selectedRows = getCheckedBoxes();

selectedRows.forEach(function (currentValue) {
deleteRowByCheckboxId(currentValue.id);
});
}

function getRowId() {
rowId += 1;
return rowId;
}

function getRowIdsFromElements($array) {
var arrIds = [];

$array.forEach(function (currentValue, index, array) {
arrIds.push(getRowIdFromElement(currentValue));
});

return arrIds;
}

function getRowIdFromElement($el) {
return $el.id.split('delete')[1];
}

function getCheckedBoxes() {
var inputs = document.getElementsByTagName("input");
var checkboxesChecked = [];

// loop over them all
for (var i = 0; i < inputs.length; i++) {
// And stick the checked ones onto an array...
if (inputs[i].checked) {
checkboxesChecked.push(inputs[i]);
}
}

// Return the array if it is non-empty, or null
return checkboxesChecked.length > 0 ? checkboxesChecked : null;
}

function deleteRowByCheckboxId(CheckboxId) {
var checkbox = document.getElementById(CheckboxId);
var row = checkbox.parentNode.parentNode;
var table = row.parentNode;

while (table && table.tagName != 'TABLE')
table = table.parentNode;
if (!table) return;
table.deleteRow(row.rowIndex);
}
</script>

</head>
<body>

<form align="center" method="GET">
Enter your name : <input type="text" name="users" id="user_id" value="name" onfocus="if(this.value == 'name') {this.value=''}" onblur="if(this.value == ''){this.value ='name'}"><br>
Select the Date : <input type="date" id="date"><br>
Select your favorite color:
<select id="color" required>
<option value="yellow">yellow</option>
<option value="red">red</option>
</select>
<br>
<br>
<input type="button" id="mysubmit" value="Add Row" onClick="addMoreRows()">
<input type="button" id="delete" value="Delete" onClick="deleteMoreRows('tbl_id')">
</form>
<br>
<br>

<table id="tbl_id" style="text-align:center" align="center" valign="top">
<thead>
<tr>
<th style="width:200px;">Delete</th>
<th style="width:200px;">Name</th>
<th style="width:200px;">Date</th>
<th style="width:200px;">Color</th>
</tr>
</thead>
</table>

</body>

</html>


By     Created   
The power of the user (%)
5%



The most helpful JAVASCRIPT solutions

How to get client machine name or computer name with javascript ?How to get client machine name or computer name with javascript ?JAVASCRIPT

Click to see more ...

  5.6K     385

get client hostname javascriptget client hostname javascriptJAVASCRIPT

Click to see more ...

  3.3K     264

detect ie javascriptdetect ie javascriptJAVASCRIPT

Click to see more ...

  2K     170

Create fireworks using javascriptCreate fireworks using javascriptJAVASCRIPT

Click to see more ...

  1.7K     139

create 3d barrel using javascriptcreate 3d barrel using javascriptJAVASCRIPT

Click to see more ...

  1.6K     99

how to create foreach class using javascript ?how to create foreach class using javascript ?JAVASCRIPT

Click to see more ...

  1.1K     83

get ip address javascriptget ip address javascriptJAVASCRIPT

Click to see more ...

  852     76

create qr code javascriptcreate qr code javascriptJAVASCRIPT

Click to see more ...

  608     71

get filename using javascript get filename using javascript JAVASCRIPT

Click to see more ...

  582     61

how to create the connect to a database with ADODB using javascript ?how to create the connect to a database with ADODB using javascript ?JAVASCRIPT

Click to see more ...

  565     59