Develop Reference

Change html from place

I want to change a row from a table to another but I want to replace the addBtn for a removeBtn.
dataTableTeamMembers is the other table
$('.addBtn').click(function() {
var row = $(this).closest('tr');
console.log(row[1]);
$('#dataTableTeamMembers tbody').append(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="text-center hover-table odd" role="row">
<td class="sorting_1"><img class="avatarImage" src="data:image/jpg;base64,iVBORw"></td>
<td>johns</td>
<td>John Smith</td>
<td>Member</td>
<td>
<button type="button" class="btn btn-primary addBtn"> Add</button>
</td>
</tr>

update your js code with this.
$('.addBtn').click(function () {
var row = $(this).closest('tr');
console.log(row[0]);
$('#dataTableTeamMembers tbody').append(row[0].innerHTML);
});

$('.addBtn').click(function() {
var row = $(".tbl .tbltr").html();
console.log(row[1]);
$('.tbl').append(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='tbl'>
<tr class="text-center hover-table odd tbltr" role="row">
<td class="sorting_1"><img class="avatarImage" src="data:image/jpg;base64,iVBORw"></td>
<td>johns</td>
<td>John Smith</td>
<td>Member</td>
<td>
<button type="button" class="btn btn-primary addBtn"> Add</button>
</td>
</tr>
</table>

Cloning a row in a table without breaking a button in the row

I'm a beginner currently trying to learn how to code, and my current project is to renovate a website. The website needs a table with an inbuilt save/edit function, which I have already implemented, but it also needs an "add new row" function which I can't seem to get to work. Does anyone know how I might be able to clone a row in my table, whilst keeping the button functional? a previous attempt managed to clone the row, but the button broke. Does anyone have a solution to this problem?
Here is the code i'm currently working with in fiddle:
HTML:
<table id="tableone" border="2" cellspacing="2" cellpadding="2">
<thead>
<tr>
<th class="col1">Seminar Name</th>
<th class="col2">Seminar Date</th>
<th class="col3">Download Link</th>
<tbody>
<tr class="del">
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td>
<button class="editbtn">Edit</button>
</td>
</tr>
<tr class="del" id="tablerow">
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td>
<button class="editbtn">Edit</button>
</td>
</tr>
</tbody>
<button class="addnewrow">Add New Row</button>
JAVASCRIPT:
Frameworks/extensions: jQuery 1.11.0
$('.editbtn').click(function() {
var $this = $(this);
var tds = $this.closest('tr').find('td').filter(function() {
return $(this).find('.editbtn').length === 0;
});
if ($this.html() === 'Edit') {
$this.html('Save');
tds.prop('contenteditable', true);
} else {
$this.html('Edit');
tds.prop('contenteditable', false);
}
});
$('.addnewrow').click(function() {
var $tr = $(this).closest('tr');
var $clone = $tr.clone();
$clone.find('input').val('');
$tr.after($clone);
});
Note: for some reason, the button to clone the previous row just stopped working altogether, and the code for the new row seems to have broken the "save" and "edit" code. Additionally, would it be possible to hide the "save" and "edit" buttons so that only people with admin perms can see/interact with them?

Maybe you want to clone the button and it's click event and callback，so you should use the event proxy，your code doesn't work：
$('.editbtn').click(function() {});
instead modify to:
$('#tableone').on('click', '.editbtn', function() {});
and last modify the .addnewrow:
var $tr = $("#tableone").find("tr:last");
$('#tableone').on('click', '.editbtn', function() {
var $this = $(this);
var tds = $this.closest('tr').find('td').filter(function() {
return $(this).find('.editbtn').length === 0;
});
if ($this.html() === 'Edit') {
$this.html('Save');
tds.prop('contenteditable', true);
} else {
$this.html('Edit');
tds.prop('contenteditable', false);
}
});
$('.addnewrow').click(function() {
var $tr = $("#tableone").find("tr:last");
var $clone = $tr.clone();
$clone.find('input').val('');
$tr.after($clone);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableone" border="2" cellspacing="2" cellpadding="2">
<thead>
<tr>
<th class="col1">Seminar Name</th>
<th class="col2">Seminar Date</th>
<th class="col3">Download Link</th>
</thead>
<tbody>
<tr class="del">
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td>
<button class="editbtn">Edit</button>
</td>
</tr>
<tr class="del" id="tablerow">
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td>
<button class="editbtn">Edit</button>
</td>
</tr>
</tbody>
<button class="addnewrow">Add New Row</button>

Here is the fixed code add new row will copy your last row and append it to the table.To solve your problem just bind the click event using document. Even on click might not work sometimes but this will always do.
$(document).on("click",".editbtn",function() {
console.log("Edit called");
var $this = $(this);
var tds = $this.closest('tr').find('td').filter(function() {
return $(this).find('.editbtn').length === 0;
});
if ($this.html() === 'Edit') {
$this.html('Save');
tds.prop('contenteditable', true);
} else {
$this.html('Edit');
tds.prop('contenteditable', false);
}
});
$('.addnewrow').click(function() {
var $tr = $("#tableone").find("tr:last");
var $clone = $tr.clone();
$clone.find('input').val('');
$tr.after($clone);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableone" border="2" cellspacing="2" cellpadding="2">
<thead>
<tr>
<th class="col1">Seminar Name</th>
<th class="col2">Seminar Date</th>
<th class="col3">Download Link</th>
<tbody>
<tr class="del">
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td>
<button class="editbtn">Edit</button>
</td>
</tr>
<tr class="del" id="tablerow">
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td>
<button class="editbtn">Edit</button>
</td>
</tr>
</tbody>
<button class="addnewrow">Add New Row</button>

HTML - Get row Id by pressing a Button inside same row

Supposing I have an HTML Table and each row has Some data, an Update and a Delete Button. I want, by clicking on the Update Button, to retrieve every data THIS SPECIFIC ROW has. I have searched for other examples but they most of them just traversed through a column by using a column id and just printed every cell data they found. I need, upon pressing the update Button, to retrieve all the current cell data this row has. How can I do that?
JS Fiddle HERE
Could not properly indent code after trying for more than 30mins so I gave up

You can change your html button from:
<button type="button" class="btn btn-danger" onclick="getConfirmation();">Delete</button>
to:
<button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
^^^^
Adding the this keyword to the function you are passing the current button. Now, in order to get the corresponding row it's enough you use jQuery.closest():
var row = $(ele).closest('tr');
or with plain js .closest()
var row = ele.closest('tr');
For the update buttons you can add the click handler:
$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {
or with plain js .querySelectorAll():
document.querySelectorAll('#employees-table tbody button.btn.btn-warning').forEach.....
The jQuery snippet:
window.getConfirmation = function(ele){
var retVal = confirm("Are you sure you want to delete ?");
if( retVal == true ){
alert("User wants to delete!");
var row = $(ele).closest('tr');
row.remove();
return true;
}
else{
alert ("User does not want to delete!");
return false;
}
}
$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {
var row = $(this).closest('tr');
console.log('TR first cell: ' + row.find('td:first').text());
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Employees</h2>
<table id="employees-table" class="table table-hover table-responsive">
<thead>
<tr>
<th>Id</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Born</th>
<th>Country</th>
<th>Department</th>
<th class="text-center">Update Row</th>
<th class="text-center">Delete Row</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>John</td>
<td>vas#gmail.com</td>
<td>1976</td>
<td>USA</td>
<td>Michigan</td>
<td class="text-center">
<button type="button" class="btn btn-warning">Update</button>
</td>
<td class="text-center">
<g:link controller="employee" action="deleteRecord">
<button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
</g:link>
</td>
</tr>
<tr>
<td>2</td>
<td>Mark</td>
<td>Twain</td>
<td>va1122s#gmail.com</td>
<td>1965</td>
<td>England</td>
<td>London</td>
<td class="text-center">
<button type="button" class="btn btn-warning">Update</button>
</td>
<td class="text-center">
<g:link controller="employee" action="deleteRecord">
<button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
</g:link>
</td>
</tr>
</tbody>
</table>
</div>
As per Hossein Asmand comment (How can I do this using only Javascript?) a full js solution follows:
window.getConfirmation = function(ele){
var retVal = confirm("Are you sure you want to delete ?");
if( retVal == true ){
var row = ele.closest('tr');
console.log("User wants to delete: " + row.cells[0].textContent);
row.remove();
return true;
}
else{
console.log("User does not want to delete!");
return false;
}
}
document.querySelectorAll('#employees-table tbody button.btn.btn-warning').forEach(function(ele, idx) {
ele.addEventListener('click', function(e) {
var row = this.closest('tr');
console.log('TR first cell: ' + row.cells[0].textContent);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<h2>Employees</h2>
<table id="employees-table" class="table table-hover table-responsive">
<thead>
<tr>
<th>Id</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Born</th>
<th>Country</th>
<th>Department</th>
<th class="text-center">Update Row</th>
<th class="text-center">Delete Row</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>John</td>
<td>vas#gmail.com</td>
<td>1976</td>
<td>USA</td>
<td>Michigan</td>
<td class="text-center">
<button type="button" class="btn btn-warning">Update</button>
</td>
<td class="text-center">
<g:link controller="employee" action="deleteRecord">
<button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
</g:link>
</td>
</tr>
<tr>
<td>2</td>
<td>Mark</td>
<td>Twain</td>
<td>va1122s#gmail.com</td>
<td>1965</td>
<td>England</td>
<td>London</td>
<td class="text-center">
<button type="button" class="btn btn-warning">Update</button>
</td>
<td class="text-center">
<g:link controller="employee" action="deleteRecord">
<button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
</g:link>
</td>
</tr>
</tbody>
</table>
</div>

To to retrieve data in row after pressing button Update
<button type="button" class="btn btn-warning" onclick="getData(this)">
window.getData = function(val) {
let arr= [];
val.parentNode.parentNode.querySelectorAll('td').forEach(item=>{
if (item.getAttribute('class') != "text-center") {
arr.push(item.innerHTML)
}
},this)
console.log(arr); //["1", "John", "John", "vas#gmail.com", "1976", "USA", "Michigan"]
}

The answer from #gaetanoM will be the accepted one. If anyone wants a way not only to get only the id, but full row data, you may try this:
HTML CODE:
Change this:
<td>1</td>
<td>John</td>
<td>John</td>
<td>vas#gmail.com</td>
<td>1976</td>
<td>USA</td>
<td>Michigan</td>
to this:
<td class="table_id">23</td>
<td class="table_firstName">John</td>
<td class="table_lastName">John</td>
<td class="table_email">vas#gmail.com</td>
<td class="table_born">1976</td>
<td class="table_country">USA</td>
<td class="table_departmentId">Michigan</td>
JAVASCRIPT CODE:
Change this:
$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {
var row = $(this).closest('tr');
console.log('TR first cell: ' + row.find('td:first').text());
})
to this:
$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {
var id = $(this).closest('tr').find('.table_id').text();
console.log("Id = " + id);
var firstname = $(this).closest('tr').find('.table_firstName').text();
console.log("First Name = " + firstname);
var lastname = $(this).closest('tr').find('.table_lastName').text();
console.log("Last Name = " + lastname);
var email = $(this).closest('tr').find('.table_email').text();
console.log("Email = " + email);
var born = $(this).closest('tr').find('.table_born').text();
console.log("Born = " + born);
var country = $(this).closest('tr').find('.table_country').text();
console.log("Country = " + country);
var department = $(this).closest('tr').find('.table_departmentId').text();
console.log("Department = " + department);
})
See the results in THIS fiddle.
Thanks again to everyone who contributed in finding an answer!!!

JQuery selector bug - not working

I have a weird JQuery bug that I cannot find the cause for.
There is an edit button for each row that changes the title and body cells to an input and textarea field.
It works for the first row but not for any other rows
If I click the first row, it will work for consecutive rows.
Can someone please have a look over my code
#extends('layouts')
#section('content')
<div class="container">
<h1>Diary Application</h1>
<button style="margin-bottom: 10px;" class="btn btn-primary"></span></button>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Date</th>
<th>Title</th>
<th>Content</th>
</tr>
</thead>
<tbody>
#foreach($entries as $entry)
<tr id={{ $entry->id }}>
<td>{{ $entry->created_at->format('l h:ia d/m/Y') }}</td>
<td id="title">{{ $entry->title }}</td>
<td id="body">{{ $entry->body }}</td>
<td id="buttons"><button class="btn btn-danger"><a href={{ url("/deleteEntry/$entry->id")}}>Delete</a></button> <button class="btn btn-warning" id="edit" data-id={{ $entry->id }}>Edit</button></td>
</tr>
#endforeach
</tbody>
</table>
</div>
#endsection
#section('scripts')
<script>
$(document).ready(function() {
$("button#edit").click( function() {
var id = $(this).data("id");
var titleField = $("tr#" + id + " > td#title");
var contentField = $("tr#" + id + " > td#body");
alert("tr#" + id + " > td#body");
alert($("tr#" + id + " > td#body").html());
titleField.replaceWith("<td style='vertical-align: center;'><input type=text name='title' value=" + titleField.html() + "></td>");
contentField.replaceWith("<td style='vertical-align: center;'><textarea rows='3' name='body'> " + contentField.html() + "</textarea></td>");
$("tr#" + id + " > td#buttons").append(" <button class='btn btn-success'>Save</button>");
$("tr#" + id + " > td#buttons > .btn-warning").attr('disabled', 'disabled');
});
});
</script>
#endsection

Change id to class and try the below code,
$(document).ready(function() {
$("button.edit").click( function() {
var tr = $(this).closest("tr");
var titleField = tr.find(".title");
var contentField = tr.find(".body");
alert(contentField);
alert(contentField.html());
titleField.replaceWith("<td style='vertical-align: center;'><input type=text name='title' value=" + titleField.html() + "></td>");
contentField.replaceWith("<td style='vertical-align: center;'><textarea rows='3' name='body'> " + contentField.html() + "</textarea></td>");
tr.find(".buttons").append(" <button class='btn btn-success'>Save</button>")
.find(".btn-warning") // use chaining
.prop('disabled', true);// use prop instead of attr
});
});
Your HTML should be,
<tr id={{ $entry->id }}>
<td>{{ $entry->created_at->format('l h:ia d/m/Y') }}</td>
<td class="title">{{ $entry->title }}</td>
<td class="body">{{ $entry->body }}</td>
<td class="buttons"><button class="btn btn-danger"><a href={{ url("/deleteEntry/$entry->id")}}>Delete</a></button> <button class="btn btn-warning edit" data-id={{ $entry->id }}>Edit</button></td>
</tr>
Snippet,
$(document).ready(function() {
$("button.edit").click(function() {
var tr = $(this).closest("tr");
var titleField = tr.find(".title");
var contentField = tr.find(".body");
titleField.replaceWith("<td style='vertical-align: center;'><input type=text name='title' value=" + titleField.html() + "></td>");
contentField.replaceWith("<td style='vertical-align: center;'><textarea rows='3' name='body'> " + contentField.html() + "</textarea></td>");
tr.find(".buttons").append(" <button class='btn btn-success'>Save</button>")
.find(".btn-warning") // use chaining
.prop('disabled', true); // use prop instead of attr
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr id="1">
<td>Date 1</td>
<td class="title">Title1</td>
<td class="body">Body1</td>
<td class="buttons"><button class="btn btn-danger">Delete</button> <button class="btn btn-warning edit" data-id="1">Edit</button></td>
</tr>
<tr id="2">
<td>Date 2</td>
<td class="title">Title2</td>
<td class="body">Body2</td>
<td class="buttons"><button class="btn btn-danger">Delete</button> <button class="btn btn-warning edit" data-id="2">Edit</button></td>
</tr>
<tr id="3">
<td>Date 3</td>
<td class="title">Title3</td>
<td class="body">Body3</td>
<td class="buttons"><button class="btn btn-danger">Delete</button> <button class="btn btn-warning edit" data-id="3">Edit</button></td>
</tr>
</table>

First change the IDs to Classes &
Use jQuery's $.closest() like below
$(document).ready(function() {
$("button#edit").click( function() {
var tr = $(this).closest("tr"); // This will give you the TR in which your elements reside.
....
your rest of the code with some modifications
....
});
});

You are generating several button tags with de same id (#edit), in the html document an id attibute must be unique, you could use a class selector like this.
<button class="btn btn-warning edit" data-id={{ $entry->id }}>Edit</button>
And then in your javascript use:
$("button.btn.edit").click( function() {...});

searching specific html table column

hello can someone help me with this. the search is working
but how can i exclude the last column to be searched?
i have three columns, first name, lastname and email.
what i want is to search using the two columns only. and exclude the column email when searching. thank you
this is my javascript code
<script type="text/javascript">
function doSearch() {
var searchText = document.getElementById('searchTerm').value;
var targetTable = document.getElementById('report');
var targetTableColCount;
//Loop through table rows
for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex++ ) {
var rowData = '';
//Get column count from header row
if (rowIndex == 0) {
targetTableColCount = targetTable.rows.item(rowIndex).cells.length;
continue; //do not execute further code for header row.
}
//Process data rows. (rowIndex >= 1)
for (var colIndex = 0; colIndex < targetTableColCount; colIndex++) {
var cellText = '';
if (navigator.appName == 'Microsoft Internet Explorer')
cellText = targetTable.rows.item(rowIndex).cells.item(colIndex).innerText;
else
cellText = targetTable.rows.item(rowIndex).cells.item(colIndex).textContent;
rowData += cellText;
}
// Make search case insensitive.
rowData = rowData.toLowerCase();
searchText = searchText.toLowerCase();
//If search term is not found in row data
//then hide the row, else show
if (rowData.indexOf(searchText) == -1)
targetTable.rows.item(rowIndex).style.display = 'none';
else
targetTable.rows.item(rowIndex).style.display = 'table-row';
}
}
</script>
and this is my html code
<input id="searchTerm" class="form-control" placeholder="Enter text" onkeyup="doSearch()">
<table id="report" class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
i have another question. i added an expandable row on my html table
and now the search doesnt give the desired output. example when i search for a value that are not on the html table it just remove the first row and show the rest of the row. which is not the correct output.
<table id="report" class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td>
<div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
</td>
</tr>
<tr><td colspan="4">
<button type="button" class="btnview btn btn-xs btn-warning" >
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
</button>
</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>
<div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
</td>
</tr>
<tr><td colspan="4">
<button type="button" class="btnview btn btn-xs btn-warning" >
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
</button>
</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>
<div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
</td>
</tr>
<tr><td colspan="4">
<button type="button" class="btnview btn btn-xs btn-warning" >
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
</button>
</td>
</tr>
</tbody>
</table>
sir roman after integrating you're code to mine. the search is now working as expected. but when the searchterm input is empty and i press backspace on it. it became like this
https://jsfiddle.net/t6xg97uo/

I believe this should answer your issue. I am simply adjusting how many columns you are searching:
for (var colIndex = 0; colIndex < (targetTableColCount-1); colIndex++) {
Here is an example:
http://codepen.io/anon/pen/PNWNmL
Update
Ok, I am not sure this is the right fix for what you are looking for, but I just commented out the code that is causing that button to be revealed when backspacing. Here is what I did:
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td>
<div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
</td>
</tr>
<tr>
<!-- <td colspan="4">
<button type="button" class="btnview btn btn-xs btn-warning" >
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
</button>
</td> -->
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>
<div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
</td>
</tr>
<tr>
<!-- <td colspan="4">
<button type="button" class="btnview btn btn-xs btn-warning" >
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
</button>
</td> -->
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>
<div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
</td>
</tr>
<tr>
<!-- <td colspan="4">
<button type="button" class="btnview btn btn-xs btn-warning" >
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
</button>
</td> -->
</tr>
</tbody>
And here is a jsfiddle:
https://jsfiddle.net/t6xg97uo/1/

Solution including you additional requirement(with an expandable row within a table):
- replace your nested for loop(through row columns) as shown below:
(you should also skip rows which have only one cell(td) from processing)
...
var rowCells = targetTable.rows.item(rowIndex).cells, cellsLen = rowCells.length;
if (cellsLen > 1) {
for (var colIndex = 0; colIndex < 2; colIndex++) {
var cellText = '';
if (targetTable.rows.item(rowIndex).cells.item(colIndex)) {
cellText = rowCells.item(colIndex)[(navigator.appName == 'Microsoft Internet Explorer')? "innerText" : "textContent"];
}
rowData += cellText;
}
}
// Make search case insensitive.
rowData = rowData.toLowerCase().trim();
searchText = searchText.toLowerCase();
//If search term is not found in row data
//then hide the row, else show
if (cellsLen > 1) {
if (searchText && rowData.indexOf(searchText) === -1) {
targetTable.rows.item(rowIndex).style.display = 'none';
} else {
targetTable.rows.item(rowIndex).style.display = 'table-row';
}
}
...