Delete a row from a table (HTML/JS)

Delete a row from a table (HTML/JS) - javascript

Title is pretty self-explanatory; I'm trying to add a delete button to each row of a table, but right now it's deleting the table headers instead of the actual row. This is the Javascript; any tips?:
function addRow() {
var table = document.getElementById("todayTasks");
var row = document.createElement('tr');
row.id = "new_add";
var td0 = document.createElement("INPUT");
td0.type = "checkbox";
td0.id = "checkbox";
td0.onchange = updateItem;
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement("input");
td3.type = "button";
td3.value = "Delete";
td3.onclick = deleteFn;
if (document.getElementById('task').value === "") {
alert("Please provide a task.");
} else if (document.getElementById('duration').value === "") {
alert("Please provide a duration.");
} else {
td1.innerHTML = document.getElementById('task').value;
td2.innerHTML = document.getElementById('duration').value;
row.appendChild(td0);
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
table.children[0].insertBefore(row, table.children[0].childNodes[1]);
}
function updateItem() //Cross out when checked
{
if (document.getElementById("checkbox").checked) {
document.getElementById("new_add").style.textDecoration = "line-through"
} else {
document.getElementById("new_add").style.textDecoration = "none"
}
}
function deleteFn(x) {
var i = x.rowIndex;
document.getElementById("todayTasks").deleteRow(i);
}

Your delete function take an event as an argument, that event hold a reference to the element via its property target. you can than get the tr which is the parent element of your input (if you wrap the input inside a td it would be the grand parent), then you can juste remove this element from the table
function deleteFn(event) {
var input = event.target;
var currentRow = input.parentNode;
document.getElementById("todayTasks").removeChild(currentRow);
}

Related

I want to set information to localstorage

playlist = [];
//저장
function save() {
localStorage.setItem("playlist",JSON.stringify(playlist));
}
// 리스트 생성
$('td#btn-add-row').click(function() {
// id 구하기
var list_num = 1;
for(var i=1; i <= 100; i++ )
{
if ( $('#basic tr td:nth-child(1)').hasClass(String(i)) == false )
{
list_num = i; break;
}
}
// 추가
const tbody = document.getElementById('my-tbody');
const tr = document.createElement("tr");
tr.id = list_num;
const td1 = document.createElement("td");
td1.className = list_num;
td1.setAttribute("style", "cursor:pointer");
const td2 = document.createElement("td");
td2.innerText = "음악 "+list_num;
const td3 = document.createElement("td");
td3.innerHTML = "<input type='text' name='tb'>";
const td4 = document.createElement("td");
td4.innerHTML = "<input type='text'>";
tbody.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
const data = {
url:$("#my-tbody > tr:nth-child(" + list_num + ")> td> input").val(),
name:$("#my-tbody > tr:nth-child(" + list_num + ")> td:nth-child(4)> input").val(),
id:list_num
}
playlist.push(data);
save();
// 동적 테이블
$("#basic").tableDnD();
});
I wish that URL, name, id are stored in a local storage according to the id value of tr. However, this code produces strange results in localstorage. The problem is that the URL and name are not saved. What should I do?

The reference of a value does not magically keep on updating. So you need to add event listeners to keep updating it. So easiest thing to do is add event listeners to the inputs and update the array of objects.
Below is the basic idea. (note: StackOverflow blocks local storage so I commented it out.)
// const playlist = localStorage.playlist ? JSON.parse(localStorage.playlist) : [];
const playlist = [];
const tableTbody = document.querySelector("#myTable tbody");
for (let i = 0; i < 10; i++) {
// either get the current value from localstorage or create new record
playlist[i] = playlist[i] || {
id: i,
url: '',
name: ''
};
const currentItem = playlist[i]
//create the table row
const tr = document.createElement("tr");
tr.dataset.id = currentItem.id;
// create the id cell
const tdId = document.createElement("td");
tdId.textContent = i + 1;
// create the url cell
const tdUrl = document.createElement("td");
const inputUrl = document.createElement("input");
inputUrl.type = "text";
inputUrl.name = 'url';
inputUrl.value = currentItem.url;
tdUrl.append(inputUrl);
// create the name cell
const tdName = document.createElement("td");
const inputName = document.createElement("input");
inputName.type = "text";
inputName.name = 'name';
inputName.value = currentItem.name;
tdName.append(inputName);
// add the cells to the row
tr.append(tdId);
tr.append(tdUrl);
tr.append(tdName);
// add the row to the table
tableTbody.append(tr);
}
tableTbody.addEventListener("input", function (event) {
// see what triggered the input event
const input = event.target;
// find the row so we know what record to update
const rowId = input.closest("tr").dataset("id");
// what field to update
const field = input.name;
// update the record
playlist[rowId][field] = input.value.trim();
// update local storage
// localStorage.playlist = JSON.stringify(playlist);
});
<table id="myTable">
<thead>
<tr>
<th>ID</th><th>url</th><th>name</th>
</tr>
</thead>
<tbody></tbody>
</table>

adding row to an existing table in javascript

guys i jnow it is dummy question but i spent hours in this and cant reach .. i want to add row to an existing table and this row consists of checkbox and 4 textboxes .. when i run it the textboxes appears but the checkbox dont .. here is my code
function addRow() {
var i = 1;
var table = document.getElementById("table");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var html = [];
html.push("<table id='table'>\n<body>");
html.push("<tr><td><input type='checkbox' name='chk'/></td>");
var cell = row.insertCell(html);
for ( var propertyNames in grid.data[0]) {
cell = row.insertCell(i);
var element = document.createElement("input");
element.type = "text";
element.size = 10;
element.name = "input"+i;
cell.appendChild(element);
html.push("<td>" + cell + "</td>");
i++;
}
html.push("</tr>");
html.push("</body>\n</table>");
}

The problem is you are creating a array with the markup for the checkbox, but it is never added to the table
function addRow() {
var i = 1;
var table = document.getElementById("table");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell = row.insertCell();
var element = document.createElement("input");
element.type = "checkbox";
element.name = "chk";
cell.appendChild(element);
for (var propertyNames in grid.data[0]) {
cell = row.insertCell(i);
element = document.createElement("input");
element.type = "text";
element.size = 10;
element.name = "input" + i;
cell.appendChild(element);
i++;
}
}
var grid = {
data: [{
x: 1,
y: 1
}]
};
addRow();
<table id="table"></table>

hide with js an HTML table row <tr> so that it takes up no space

I am creating rows in a table with javascript. When I try to hide those rows, it hides the row, but the space of the row is still taken.
My code:
for (var i = 0; i < 8; i++) {
isHide = false;
if(i<3)
isHide = true;
var table = document.getElementById("table");
var tr = document.createElement("TR");
if (isHide == true) {
tr.style.visibility = "none";
}
else {
tr.style.visibility = "visible";
}
table.appendChild(tr);
var td1 = document.createElement("TD");
var td2 = document.createElement("TD");
tr.appendChild(td1);
tr.appendChild(td2);
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = i;
checkbox.value = i;
checkbox.id = i;
var label = document.createElement('label')
label.htmlFor = i;
label.appendChild(document.createTextNode(i.toString()));
if (isHide == false){
var mybr = document.createElement('br');
}
td1.appendChild(label);
td2.appendChild(checkbox);
}
How do I hide rows in a way that they do not take up any space?

Change tr.style.visibility = "none"; to tr.style.display = 'none'
With display:none, there will be no space allocated for the tr as tr will not appear on the page and we can interact with the tr through the DOM.
With visibility:hidden the tr is not visible but it takes up the space allocated to it. This means that tr is rendered on the page but does not seem to be visible.

Delete the row you click on (Javascript dynamic table)

I want to delete a row from a table, I am using Javascript.
I am dynamically creating table rows and in the last cell I have delete button so how to make it delete the row?
var newData4 = document.createElement('td');
var delButton = document.createElement('input');
delButton.setAttribute('type', 'button');
delButton.setAttribute('name', 'deleteButton');
delButton.setAttribute('value', 'Delete');
newData4.appendChild(delButton);
newRow.appendChild(newData4);
this is the function for creating my table rows
function addItem()
{
document.getElementById('add').onclick=function()
{
var myTable = document.getElementById('tbody');
var newRow = document.createElement('tr');
//var element1 = document.createElement("input");
//element1.type = "checkbox";
//newRow.appendChild(element1);
var newData1 = document.createElement('td');
newData1.innerHTML = document.getElementById('desc').value;
var newData2 = document.createElement('td');
newData2.innerHTML = document.getElementById('taskPriority').value;
var newData3 = document.createElement('td');
newData3.innerHTML = document.getElementById('taskDue').value;
myTable.appendChild(newRow);
newRow.appendChild(newData1);
newRow.appendChild(newData2);
newRow.appendChild(newData3);
var newData4 = document.createElement('td');
var delButton = document.createElement('input');
delButton.setAttribute('type', 'button');
delButton.setAttribute('name', 'deleteButton');
delButton.setAttribute('value', 'Delete');
newData4.appendChild(delButton);
newRow.appendChild(newData4);
}
}

function SomeDeleteRowFunction(btndel) {
if (typeof(btndel) == "object") {
$(btndel).closest("tr").remove();
} else {
return false;
}
}
try this code here is fiddle
alternatively try
//delete the table row
$(document).on('click', '#del', function(){
$(this).parents('tr').remove();
});
}); //del is the id of the delete block
one pure javascript approach
function deleteRowUI(btndel) {
var table=document.getElementById('filterTableBody');
if (typeof(btndel) == "object") {
p=btndel.parentNode.parentNode;
p.parentNode.removeChild(p);
var oTable = document.getElementById('filterTableBody');
//gets rows of table
var rowLength = oTable.rows.length;
for (var i = 1; i < rowLength; i++){
var oCells = oTable.rows.item(i).cells;
//gets cells of current row
var cellLength = oCells.length-1;
for(var j = 0; j < cellLength; j++){
oCells.item(j).innerHTML = "";
break;
}
break;
}
} else {
return false;
}
}

if you want to temporary hidden it you can do:
this.parentNode.style.display='none';
in mind that the exclusion button is in a td.
But if you want to really delete it from the html and the database:
you need to make the same as above and a extra call to a function of php/plsqlwathever to delete from de db, i recommend using ajax to call it.
http://www.w3schools.com/ajax/default.asp

uses jQuery remove method to do it.
By the id attribute :
$("#id here").remove();
By the class attribute :
$(".class name here").remove();
I hope I've helped a little...

Adding multiple rows in html table dynamically using Javascript

Adding a single row in a table (html) and deleting it, using JavaScript, is simple. But, is it possible to add multiple rows, like 2 or more, by calling the addrow function only once? The added rows will have different elements, like first row will be having a textfield, the other a textarea and like that...
Is there any other alternative in html to do that?

I solved it by myself by writing code similar to this :
adding three rows,first with a textfield,second having a textarea and the third having a button
function addRow(tableId)
{
var addrow=1;
var table=document.getElementById(tableId);
var rowCount=table.rows.length;
for(var i=1;i<=3;i++)
{
if(addrow==1)
{
var newRow=table.insertRow(rowCount);
var cell0=newRow1.insertCell(0);
var element0=document.createElement("input");
element0.type="text";
cell0.appendChild(element0);
}
if(addrow==2)
{
var newRow2=table.insertRow(rowCount);
var cell0=newRow1.insertCell(0);
var element0=document.createElement("textarea");
cell0.appendChild(element0);
}
if(addrow==3)
{
var newRow3=table.insertRow(rowCount);
var cell0=newRow1.insertCell(0);
var element0=document.createElement("input");
element0.type="button";
cell0.appendChild(element0);
}
addrow++;
}
}
Each time the for loop runs, a new html element is added in the table and hence I got three rows added dynamically each having a different element .

You can define your methods as follows:
addRow(var rowCount)
{
for(var i=0; i<rowCount; i++)
{
// Your current implementation to add a row
}
}
Similarly, deleteRow(var rowCount) can be defined.

function gen_textbox(tr, id, name, type, value){
td = document.createElement("td");
tr.appendChild(td);
var input = document.createElement("input");
input.setAttribute("id", id);
input.setAttribute("name", name);
if(type == "text"){
input.setAttribute("type", "text");
}
else if (type == "hidden") {
input.setAttribute("type", "hidden");
}
else{
input.setAttribute("type", "pass");
}
input.setAttribute("value", value);
td.appendChild(input);
}
function gen_hiddenbox(node, id, name, value){
var input = document.createElement("input");
input.setAttribute("id", id);
input.setAttribute("name", name);
input.setAttribute("type", "hidden");
input.setAttribute("value", value);
node.appendChild(input);
}
function gen_label(tr, id, text){
td = document.createElement("td");
tr.appendChild(td);
var input = document.createElement("label");
input.setAttribute("id", id);
var rtext = document.createTextNode(text);
input.appendChild(rtext);
td.appendChild(input);
}
function gen_label(tr, id, text, td_class){
td = document.createElement("td");
td.setAttribute("class", td_class);
tr.appendChild(td);
var input = document.createElement("label");
input.setAttribute("id", id);
var rtext = document.createTextNode(text);
input.appendChild(rtext);
td.appendChild(input);
}
function getKeyValueFromJSON(jsonObj, valueNames) {
var value, text = "", temp="";
obj= '{ "ValueText": [';
for(var i=0; i<jsonObj.length; i++) {
text = "";
for(var j=0; j<valueNames.length; j++) {
temp="jsonObj[i]."+valueNames[j];
text = text+eval(temp)+" <b>|</b> ";
}
value = jsonObj[i].id;
if(i<jsonObj.length-1)
obj = obj+'{ "value": "'+value+'", "text": "'+text+'" },';
else
obj = obj+'{ "value": "'+value+'", "text": "'+text+'" }';
}
obj=obj+"]}";
return obj;
}
function gen_select(tr, DrdId, Drdname, multiple, Drdsize, Drdnode, jsonObj) {
td = document.createElement("td");
tr.appendChild(td);
var select = document.createElement("select");
select.setAttribute("id", DrdId);
select.setAttribute("name", Drdname);
if(multiple == true){
select.setAttribute("multiple", "multiple");
}
select.setAttribute("size", Drdsize);
var option;
option = document.createElement("option");
option.setAttribute("value", "Select "+Drdnode);
option.innerHTML = "Select "+Drdnode;
select.appendChild(option);
for(var i=0; i<jsonObj.length; i++){
option = document.createElement("option");
option.setAttribute("value", jsonObj[i].value);
option.innerHTML = jsonObj[i].value+" : "+jsonObj[i].text;
select.appendChild(option);
}
td.appendChild(select);
}
function gen_button(tr, id, value, onclk_fun) {
td = document.createElement("td");
tr.appendChild(td);
var button = document.createElement("input");
button.setAttribute("type", "button");
button.setAttribute("id", id);
button.setAttribute("value", value);
button.setAttribute("onclick", onclk_fun);
td.appendChild(button);
}
function gen_button(tr, id, value, onclk_fun, Class) {
td = document.createElement("td");
tr.appendChild(td);
var button = document.createElement("input");
button.setAttribute("type", "button");
button.setAttribute("id", id);
button.setAttribute("value", value);
button.setAttribute("onclick", onclk_fun);
button.setAttribute("class", Class);
td.appendChild(button);
}
function clearSelected(sel_id) {
var elements = document.getElementById(sel_id).options;
for(var i = 0; i < elements.length; i++){
elements[i].selected = false;
}
}
First create Generic Function to Add dynamically button, textbox and etc
function create_hiddenBox() {
/*
This is only for Spring form
In jsp and spring suppose <form:select path="evp_veh_id.veh_id" size="1" >
var sel_veh = document.getElementById("evp_veh_id.veh_id");
var veh_name = sel_veh.options[sel_veh.selectedIndex].text;
*/
var node = document.getElementById("evp_footer");
gen_hiddenbox(node, "evp_veh_name", "evp_veh_name", veh_name);
}
This is called for call generic dynamically way to make html component using JavaScript

Develop Reference

JavaScript is the programming language of the Web.

Delete a row from a table (HTML/JS) - javascript

Related

I want to set information to localstorage

adding row to an existing table in javascript

hide with js an HTML table row <tr> so that it takes up no space

Delete the row you click on (Javascript dynamic table)

Adding multiple rows in html table dynamically using Javascript

Categories

Resources