Search mechanism is not working in Html Table - javascript

Im working on search mechanism in html, it is working when i search the data at first time. if i search for next data, it wont search as expected. If i search with empty data, it wont display actual table(which displayed at initial time).
JsFiddle : http://jsfiddle.net/DHJ79/
Even any better pointer is also welcome, if my below code is not good.
My code:
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style> td{border: thin solid;} </style>
<script type="text/javascript">
function searchTable(inputVal) {
var inputVal = document.getElementById('searchdata').value;
$('.table').html($('.table').html().replace(RegExp(inputVal, 'g'), '<span class="showthis">' + inputVal + '<span>'));
$("tr").css('display', 'none');
$(".showthis").parent().parent().css('display', '');
}
function addList(){
var table = "";
table += "<table class='table'>";
table += "<tr>";
table += "<td>S.no</td>";
table += "<td>Name</td>";
table += "<td>Gender</td>";
table += "</tr>";
for(i=0; i<10; i++) {
table += "<tr>";
table += "<td>"+i+"</td>";
table += "<td>Name"+i+"</td>";
table += "<td>"+( i > 5 ? "Male" : "Female")+"</td>";
table += "</tr>";
}
table += "</table>";
var body = document.getElementById("ListContainer");
body.innerHTML = table;
}
</script>
</head>
<body onload="addList();">
<input id="Button1" type="button" value="button" onclick="searchTable();" />
<input id="searchdata" type="text" />
<div id="ListContainer" > </div>
</body>
</html>
Advance thanks...

Maybe something like this.
function searchTable(inputVal) {
var inputVal = document.getElementById('searchdata').value;
if (inputVal == "") {
$('.hideThis').removeClass('hideThis');
} else {
$('tr').addClass('hideThis');
$('tr:has(td:contains(' + inputVal + '))').removeClass('hideThis');
}
}

modify your search function as follows:
function searchTable(inputVal) {
var inputVal = document.getElementById('searchdata').value;
if(inputVal){ //check for valid searches
//addList();
$('.table').html($('.table').html().replace(RegExp(inputVal, 'g'), '<span class="showthis">' + inputVal + '<span>'));
$("tr").css('display', 'none');
$(".showthis").parent().parent().css('display', '');
}
else{
addList(); // if you don't want to reinitialize table on empty searches skip this
}
}

Related

Get index-name dynamically

So, I have an UL which is empty. By clicking on a button, list-items (li) will be added to the ul. All these items do have a header (h1). The header of each item, has to get it's index from the list. So the second li needs to have a header with the number 2, and the third with the number 3.
I've searched the internet for a while for proper solutions, but wasn't able to find one. Now I have created a small piece of code which, in my opinion, should work. But it doesn't. Below is the JavaScript (jQuery) code which adds the items to the list, but also sets it's header.
/*Give all list items a name*/
function AddName() {
var list = $("#jrn_form_input_list");
for (var i = 0; i < 5; i++) {
var index = $("li").index(list[i]);
var header = "Journey leg: " + index;
$(list[i]).find("h1").text(header);
}
};
/*Add journy leg*/
$("#jrn_add_leg_btn").click(function() {
var html = '';
html += '<li>';
html += '<div class="jrn_field">';
html += '<h1 class="jrn_field_header">"TEST_LEG_NAME"</h1>';
html += '<label for="jrn_location"><b>Traveling to</b></label>';
html += '<input type="text" name="jrn_location">';
html += '</div>';
html += '</li>';
$("#jrn_form_input_list").append(html);
AddName();
});
So the function AddName() doesn't work. Is there anyone who knows how to do this properly in JavaScript/jQuery?
In this example all 5 list items are added at once.
$( "#jrn_add_leg_btn" ).click(function()
{
for (var i = 0; i < 5; i++)
{
var j = i + 1;
var html = '';
html += '<li>';
html += '<div class="jrn_field">';
html += '<h1 class="jrn_field_header">Journey leg:'+ j +'</h1>';
html += '<label for="jrn_location"><b>Traveling to</b></label>';
html += '<input type="text" name="jrn_location">';
html += '</div>';
html += '</li>';
$("#jrn_form_input_list").append(html);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id = "jrn_add_leg_btn" >click</button>
<ul id='jrn_form_input_list'></ul>

Populating an HTML table from an external XML

I have come across a problem while fetching data from an external XML document with JS. I have been following the w3schools tutorial for AJAX XML so far, but I ran into something I couldn't solve. I have a XML that looks like this:
<root>
<document-id>
<author>Tom Riddle</autor>
<title>abzy</title>
<year>1995</year>
</document-id>
<document-id>
<author>Tom Riddle</autor>
<title>abzy</title>
</document-id>
<document-id>
<author>Tom Riddle</autor>
<year>1995</year>
</document-id>
</root>
I want to dynamically access the data inside the XML and create a table while doing so. It works fine for the one DOM Element all documents share, but it gives me an error as soon as I include year or title. I guess it's because the tags are empty in some parts of the tree. Is there a way to ignore empty tags and only write something in the column if there is a value inside? Thank you for your time and knowledge.
THIS IS THE ASSOCIATED HTML
<body>
<header>
<h1>Reading Data from XML Files</h1>
</header>
<main>
<button type="button" onclick="loadDoc()">Get my CD collection</button>
<table id="demo">
</table>
</main>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
myFunction(this);
}
xhttp.open("GET", "books.xml");
xhttp.send();
}
function myFunction(xml) {
const xmlDoc = xml.responseXML;
const x = xmlDoc.getElementsByTagName("document-id");
console.log(x)
let table="<tr><th>Author</th><th>Title</th><th>Year</th></tr>";
for (let i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("year")[0].childNodes[0].nodeValue +
"</tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
Check for existence before you try to access the children.
function getText(node, tag) {
var elem = node.getElementsByTagName(tag);
return elem ? elem.[0].childNodes[0].nodeValue : '';
}
for (let i = 0; i <x.length; i++) {
var cells = ['author', 'title', 'year'].map(function (tag) {
return "<td>" + getText(x[i], tag) + "</td>";
}).join("");
table += "<tr>" + cells + "</tr>");
}
try this with in line solution to check if tag exist in xml
function myFunction(xml) {
const xmlDoc = xml.responseXML;
const x = xmlDoc.getElementsByTagName("document-id");
console.log(x)
let table="<tr><th>Author</th><th>Title</th><th>Year</th></tr>";
for (let i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue +
"</td><td>" + ((x[i].getElementsByTagName("title")[0] == undefined)?"": x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue ) +
"</td><td>" +
((x[i].getElementsByTagName("year")[0] == undefined)?"": x[i].getElementsByTagName("year")[0].childNodes[0].nodeValue ) +
"</tr>";
}
document.getElementById("demo").innerHTML = table;
}

javascript scripts not working in electron

I am trying to work on electron and made a simple dashboard GUI. i am a beginner in node js and electron.
Problem:
in my main gui.html: i have a table is being loaded, and from that table i need to select the rows from checklist for which i have made a js script:
script in read_checklist.js, this is taking the input checkbox element and selecting the whole row, which will later be shown after some processing in the textarea.
var checkboxes = document.getElementsByTagName("input");
var select_all = document.getElementById("allcb");
var warn_code = Array();
var family_array = Array();
var fail_drive_array = Array();
var waiverMap = {};
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = function() {
var currentRow = this.parentNode.parentNode;
var Warn_Code = currentRow.getElementsByTagName("td")[0];
var Family = currentRow.getElementsByTagName("td")[1];
var failing_drive = currentRow.getElementsByTagName("td")[3];
warn_code.push(Warn_Code.textContent);
family_array.push(Family.textContent);
fail_drive_array.push(failing_drive.textContent);
console.log('server started!' + currentRow );
alert(currentRow.textContent);
};
}
I am trying to import this in my gui.html like this:
This is where the table is getting displayed (code for this is below and it is stored in the renderer.js)
<!--This is for the table-->
<div id="data_lib" class="table-responsive">
</div>
<script type="text/javascript" src="./read_checklist.js"></script>
<!--This is for the table-->
My table is coming from another file, renderer.js
$(document).ready(function(){
var data;
$.ajax({
type: "GET",
url: "/Users/mrimat01/Desktop/CODE/electron_QAB_GUI_main/GUI/data.csv",
dataType: "text",
success: function(response)
{
data = $.csv.toArrays(response);
generateHtmlTable(data);
}
});
function generateHtmlTable(data) {
var html = "<table id='big_tables' class='table table-striped table-bordered' method='GET'>";
if(typeof(data[0]) === 'undefined') {
return null;
} else {
$.each(data, function( index, row ) {
//bind header
if(index == 0) {
html += '<thead>';
html += '<tr>';
$.each(row, function( index, colData ) {
html += '<th>';
html += colData;
html += '</th>';
});
html += '<th>';
html += "<input type='checkbox' id='allcb' name='allcb'/>Select";
html += '</th>';
html += '</tr>';
html += '</thead>';
html += '<tbody>';
} else {
html += '<tr>';
$.each(row, function( index, colData ) {
html += '<td>';
html += colData;
html += '</td>';
});
html += '<td>';
html += "<input id='name' type='checkbox' name='name' value='name' /> ";
html += '</td>';
html += '</tr>';
}
});
html += '</tbody>';
html += '</table>';
$('#data_lib').append(html);
}
}
});
I can see the table getting generated but read_checklist.js desn't work.
If i try to do the same thing in console, it works perfectly.
i have gone through many SO answers but couldn't seem to make this work.
Things i have tried:
making node_integration: true
using
module = undefined;}</script>
<script>if (window.module) module = window.module;</script>
adding the script directly below root <div>

I want to prevent user from entering a duplicate value in array [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
full:
https://onlinegdb.com/HJN6CGLTD
I need help in here : want a code that check input1 and see if its already in array or not if it is error if not push it in array.
function AddPoints()
{
var item = document.getElementById("input1").value;
if (points.includes(item) === false) points.push(parseInt( item )); // duplicate check
else document.getElementById("demo2").innerHTML = "The number Exist" ; // duplicate error
displayPoints();
}
if i understand your question you can try this code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<label>input</label>
<input id="input1" type="text"/>
<input type="button" value="Add" onclick="AddPoints()"/>
<div id="demo"></div>
<div id="demo2"></div>
</body>
</html>
JS:
var i;
var points=[];
function AddPoints(){
var item = document.getElementById("input1").value;
item=parseInt(item);//only integer number
// I check if the item is a integer number
if(Number.isInteger(item)){
//when the item's value is not present in the array
if (points.includes(item,0) === false) {
points.push( item ); // new value
document.getElementById("demo2").innerHTML = "" ;
//displayPoints();
}
else {
document.getElementById("demo2").innerHTML = "The number Exist" ; // duplicate error
//displayPoints();
}
}
else{
document.getElementById("demo2").innerHTML = "The number error" ; // It is not a number
}
displayPoints();
}
function displayPoints(){
var i;
text = "<table border=1>";
for (i = 0; i < points.length; i++) {
text += "<tr>";
text += "<td>" + (i+1) + "</td>";
text += "<td>" + points[i] + "</td>";
text += "</tr>"
}
text += "<table>";
document.getElementById("demo").innerHTML = text;
}
this is a test with the code
var i;
var points=[];
function AddPoints(){
var item = document.getElementById("input1").value;
item=parseInt(item);//only integer number
if(Number.isInteger(item)){
if (points.includes(item,0) === false) {
points.push( item );// new value
document.getElementById("demo2").innerHTML = "" ;
//displayPoints();
}
else {
document.getElementById("demo2").innerHTML = "The number Exist" ; // duplicate error
//displayPoints();
}
}
else{
document.getElementById("demo2").innerHTML = "The number error" ; // It is not a number
}
displayPoints();
}
function displayPoints(){
var i;
text = "<table border=1>";
for (i = 0; i < points.length; i++) {
text += "<tr>";
text += "<td>" + (i+1) + "</td>";
text += "<td>" + points[i] + "</td>";
text += "</tr>"
}
text += "<table>";
document.getElementById("demo").innerHTML = text;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<script>
</script>
<body>
<label>input</label>
<input id="input1" type="text"/>
<input type="button" value="Add" onclick="AddPoints()"/>
<div id="demo"></div>
<div id="demo2"></div>
</body>
</html>

Create HTML table with hyperlink from JSON Object

I have an application which returns a JSONObject. I am able to get data from JSON object using below code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<head>
<style type="text/css">
table, td, th
{
border:1px collapse black;
font-family:Arial;
font-size :small;
}
th
{
background-color:green;
color:white;
}
.hideMe
{
/*display : none;*/
/*visibility: hidden;*/
}
</style>
<script type="text/javascript" language="jscript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" language="javascript">
var host = "somehost";
var mystr = "http://"+ host +"/rest/bpm/wle/v1/exposed/process"; // use get for this
var ulink = "";
$(document).ready(function () {
$.get(mystr, function (data) {
var obj = JSON.parse(data);
var thtml = "<table id='proctable'>";
for (i = 0; i < obj.data.exposedItemsList.length; i++) {
ulink = "http://" + host + obj.data.exposedItemsList[i].startURL;
thtml = thtml + "<tr><td><a onclick='my_function()' href='javascript:void(0)'>" + obj.data.exposedItemsList[i].display + "</a></td><td id='linkcell' class='hideMe'>" + ulink + "</td></tr>";
}
thtml = thtml + "</table>";
document.getElementById('contentdiv').innerHTML = thtml;
});
});
//javascript
my_function = null;
//jquery
$(function () {
function generateBPDInstance() {
$.post(ulink, function (taskdata) {
var tobj = JSON.parse(taskdata);
alert(tobj.data.tasks[0].name);
alert(tobj.data.tasks[0].tkiid);
});
}
my_function = generateBPDInstance;
ulink = "";
})
`
</script>
</head>
<body>
<form name="myform">
<div id="contentdiv">
<table id="proctable">
</table>
</div>
</form>
</body>
</html>
The above html creates a table showing a list of the returned values. I also want to get rowIndex of hyperlink and pass value of column2 to function generateBPDInstance.
I am not so good at HTML and Jquery. Please suggest how can I get rowIndex for HTML table which is created through javascript.
Thanks in advance.
The simple way is :
change your table building to this
for (i = 0; i < obj.data.exposedItemsList.length; i++) {
ulink = "http://" + host + obj.data.exposedItemsList[i].startURL;
thtml = thtml + "" + obj.data.exposedItemsList[i].display + "" + ulink + "";
function my_function(e){
//e is the row index and when you call document.getLementById("proctable").rows[e]; this will give you the complete row.
}
--this is a simple way, and if you want traverse the tree and get , you always have parentnode or you can use jquery $(object).parent() to get the parent of hyperlink and traverse.
You problem is "pass value of column2 to function generateBPDInstance". Why not pass it already while generating the table?
for (i = 0; i < obj.data.exposedItemsList.length; i++) {
ulink = "http://" + host + obj.data.exposedItemsList[i].startURL;
thtml = thtml + "<tr><td><a onclick='my_function('" + ulink + "')' href='javascript:void(0)'>" + obj.data.exposedItemsList[i].display + "</a></td><td id='linkcell' class='hideMe'>" + ulink + "</td></tr>";
// ------------------------------------------------------^ pass the value
}
Add parameter to your function generateBPDInstance
function generateBPDInstance(ulink) {
//--------------------------^----
$.post(ulink, function (taskdata) {
var tobj = JSON.parse(taskdata);
alert(tobj.data.tasks[0].name);
alert(tobj.data.tasks[0].tkiid);
});
}

Categories