I want an incremental + option in my script eg. one by one expansion.
Suppose after click on Optiontional Configurations + than Network Config will be expand with another + option, now if I want another input than I will click on + and Neighbor Config will be expand.
Please help me no this, I am new on javascript, thanks in advance.
<html>
<h>OPSF Configuration</h>
</br>
<head>
<script type="text/javascript">
function defaultconf() {
var nodes = document.getElementById("d1").getElementsByTagName('*');
for(var k = 0; k < nodes.length; k++)
{
nodes[k].style.visibility ="hidden";
}
}
function options1() {
var str = arguments[0];
var nodes = document.getElementById(str).getElementsByTagName('input');
for(var i = 0; i < nodes.length; i++)
{
nodes[i].style.visibility ="hidden";
}
var nodes = document.getElementById(str).getElementsByTagName('button');
var name = document.getElementById(str).getElementsByTagName('label');
for(var i = 0; i < nodes.length; i++)
{
if (nodes[i].style.visibility == "hidden" || name[i].style.visibility == "hidden")
{
nodes[i].style.visibility ="visible";
name[i].style.visibility ="visible";
}
else
{
nodes[i].style.visibility ="hidden";
name[i].style.visibility ="hidden";
}
}
}
function options() {
var str = arguments[0];
var nodes = document.getElementById(str).getElementsByTagName('*');
for(var i = 0; i < nodes.length; i++)
{
if (nodes[i].style.visibility == "hidden")
nodes[i].style.visibility = "visible";
else
nodes[i].style.visibility ="hidden";
}
}
</script>
</head>
<link href="style.css" rel="stylesheet" type="text/css" />
<body onload="defaultconf()">
<br/>
<input type="button" value="+" onclick="options('d1')">Optiontional Configurations </td></tr>
<div id="d1">
<table>
<br/>
<tr><td>
<input type="button" value="+" onclick="options('network')">Network Config
<div id="network">
<table>
<tr>
<td class="style11" valign=top style="height: 4px">Network</td>
<td class="style9" style="height: 4px">
<input type="text" value="<?php echo $network?>" name="network" size="2" style="width: 147px">
</td>
</tr>
</table>
</div>
</td></tr>
<tr><td>
<br/>
<input type="button" value="+" onclick="options('neighbor')">Neighbor Config
<div id="neighbor">
<table>
<tr>
<td class="style11" valign=top style="height: 4px">Neighbor IP</td>
<td class="style9" style="height: 4px">
<input type="text" value="<?php echo $neighbor?>" name="neighbor" size="2" style="width: 147px">
</td>
</tr>
</table>
</div>
</td></tr>
</table>
</div>
</body>
</html>
Simple solution in jquery would be to use .toggle() to toggle the sub-views.
Also I have updated the DOM structure.
jQuery Code:
$(function() {
var siblingCounter = 0;
$('.sub-view').hide();
$('.main-view').on('click', function() {
var localCounter = $(this).hasClass('default') ? siblingCounter++ : 0;
$(this).siblings('.sub-view').eq(localCounter).toggle();
});
});
Live Demo # JSFiddle
Note:
If you are using jQuery library then avoid writing code in vanilla javascript unless you need something which is not available in jQuery [I personally havent come across so far ].
Use a class selector for applying generic/common css styles rather than creating seperate id selector styles. basically this will prevent redundant css styles across multiple rule-set
Related
i am currently trying to create unique ids in html.
However, i am not sure if this below codes is creating unqiue ids and being assigned to the element itself in the html or just creating unqiue ids only.
Please help me out. If this is not assigned them in html, how am i supposed to do them?
var abcElements = document.querySelectorAll('.like');
for (var i = 0; i < abcElements.length; i++){
abcElements[i].id = 'like_' + i;
alert(abcElements[i].id);
}
Updates:
I have include all the related codes in
<td><a onclick="return confirm(this)"><input class="switch" data-toggle="toggle" data-on="like" data-off="unlike" data-onstyle="danger" data-width="90" data-height="30" type="checkbox"></a></td>
<td style="display:none;"><div class="like">${like}</div></td>
Javascript
var abcElements = document.querySelectorAll('.switch');
var status = document.querySelectorAll('.like');
alert(status.length);
for (var i = 0; i < abcElements.length; i++)
{
abcElements[i].id = 'switch_' + i;
alert(abcElements[i].id);
for (var j = 0; j < status.length; j++)
{
status[j].id = 'like_' + j;
var statusText = $('#'+status[j].id+'').html();
alert(statusText);
if(statusText == 'true' )
{
$('#'+abcElements[i].id+'').bootstrapToggle('on');
}
}
}
Based on your code I assume this is what you want?
$("table tr").each(function(row) {
var $row = $(this);
var statusText = $row.find(".like").html();
console.log("status: " + statusText);
if (statusText == "true") {
// $row.find("input.switch").bootstrapToggle('on');
$row.find("input.switch").prop("checked", ($row.find(".like").html() === "true"));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<span><input class="switch" type="checkbox">switch 1</span>
</td>
<td style="display:none;">
<div class="like">false</div>
</td>
</tr>
<tr>
<td>
<span><input class="switch" type="checkbox">switch 2</span>
</td>
<td style="display:none;">
<div class="like">true</div>
</td>
</tr>
</table>
I realized i am assigning the ids for individual divs. I just need to move one of the loops outside that's all.
I am working on a multibox as a part of my codeigniter based project, here I am trying to move the values across the boxes using custom js code shared below
The values shown in first box are fetched from db when page loads and used to move the required values to second box using javascript. My goal it that the values already moved to second box should not be visible in the first box after saving the data and at the same time source data for the first box should not be altered.
Right now I am able to select the values to second box and save successfully but when I load the page again after saving I am seeing the moved values in the fist box and this is visually creating duplication of values and would confuse the user. On the other hand if I try to move back the values to the first box which is creating a conflict while saving the data.
Is there any way I could change my code so that moved values will not be available in the first box again
HTML version of multibox
<fieldset class="emp_contact">
<legend>Area Allocation</legend>
<div class="form-group input-group">
<table width="100%" border="0" cellpadding="10" cellspacing="10" style="border:1px solid #ccc">
<tr>
<td width="40%">
<p>Available Areas</p>
</td>
<td width="12%"> </td>
<td width="40%">
<p>Selected Areas</p>
</td>
</tr>
<tr>
<td valign="top" id="myarea_list">
<?php echo $aval_area_list ?>
</td>
<select name="aval_id_temp" id="aval_id_temp" multiple style="display:none"></select>
<td>
<table width="100%" border="0">
<tr>
<td align="center">
<input type="Button" value=">>" onClick="SelectMoveRows_all(document.form.avail_area, document.form.selec_area)">
<br>
<br />
<input type="Button" value=">" onClick="SelectMoveRows(document.form.avail_area, document.form.selec_area)">
<br>
<br>
<input type="Button" value="<<" onClick="SelectMoveRows_all(document.form.selec_area, document.form.avail_area)">
<br>
<br>
<input type="Button" value="<" onClick="SelectMoveRows(document.form.selec_area, document.form.avail_area)">
</td>
</tr>
<tr>
<td align="center"> </td>
</tr>
</table>
</td>
<td valign="top">
<?php echo $sel_area_list ?>
<select name="sel_id_temp" id="sel_id_temp" multiple style="display:none"></select>
</td>
</tr>
</table>
</div>
</fieldset>
Javascript functions used
function SelectMoveRows_all(SS1, SS2) {
var SelID = '';
var SelText = '';
// Move rows from SS1 to SS2 from bottom to top
for (i = SS1.options.length - 1; i >= 0; i--) {
//if (SS1.options[i].selected == true)
{
SelID = SS1.options[i].value;
SelText = SS1.options[i].text;
var newRow = new Option(SelText, SelID);
SS2.options[SS2.length] = newRow;
SS1.options[i] = null;
for (j = SS2.options.length - 1; j >= 0; j--) {
SS2.options[j].selected = true;
}
}
}
SelectSort(SS2);
}
function SelectMoveRows(SS1, SS2) {
var SelID = '';
var SelText = '';
// Move rows from SS1 to SS2 from bottom to top
for (i = SS1.options.length - 1; i >= 0; i--) {
if (SS1.options[i].selected == true) {
SelID = SS1.options[i].value;
SelText = SS1.options[i].text;
var newRow = new Option(SelText, SelID);
SS2.options[SS2.length] = newRow;
SS1.options[i] = null;
for (j = SS2.options.length - 1; j >= 0; j--) {
SS2.options[j].selected = true;
}
}
}
SelectSort(SS2);
}
function SelectSort(SelList) {
var ID = '';
var Text = '';
for (x = 0; x < SelList.length - 1; x++) {
for (y = x + 1; y < SelList.length; y++) {
if (SelList[x].text > SelList[y].text) {
// Swap rows
ID = SelList[x].value;
Text = SelList[x].text;
SelList[x].value = SelList[y].value;
SelList[x].text = SelList[y].text;
SelList[y].value = ID;
SelList[y].text = Text;
}
}
}
}
I am currently working on javascript. In this code I have a table and a textbox. When I enter data in the textbox it should show the particular value that I typed but it doesn't search any data from the table. How do I search data in the table?
Here's a jsfiddle http://jsfiddle.net/SuRWn/
HTML:
<table name="tablecheck" class="Data" id="results" >
<thead>
<tr>
<th> </th>
<th> </th>
<th><center> <b>COURSE CODE</b></center></th>
<th><center>COURSE NAME</center></th>
</tr>
</thead>
<tbody>
<tr id="rowUpdate" class="TableHeaderFooter">
<td >
<center> <input type="text" name="input" value="course" ></center>
<center> <input type="text" name="input" value="course1" ></center>
<center> <input type="text" name="input" value="course2" ></center>
</td>
<td>
<center> <input type="text" name="input" value="subject" ></center>
<center> <input type="text" name="input" value="subject1" ></center>
<center> <input type="text" name="input" value="subject2" ></center>
</td>
</tr>
</tbody>
</table >
<form action="#" method="get" onSubmit="return false;">
<label for="q">Search Here:</label><input type="text" size="30" name="q" id="q" value="" onKeyUp="doSearch();" />
</form>
Javascript:
<script type="text/javascript">
//<!--
function doSearch() {
var q = document.getElementById("q");
var v = q.value.toLowerCase();
var rows = document.getElementsByTagName("tr");
var on = 0;
for ( var i = 0; i < rows.length; i++ ) {
var fullname = rows[i].getElementsByTagName("td");
fullname = fullname[0].innerHTML.toLowerCase();
if ( fullname ) {
if ( v.length == 0 || (v.length < 3 && fullname.indexOf(v) == 0) || (v.length >= 3 && fullname.indexOf(v) > -1 ) ) {
rows[i].style.display = "";
on++;
} else {
rows[i].style.display = "none";
}
}
}
}
//-->
</script>
checking with chrome console, it seems that innerHtml for the 'fullname' is returning an error:
var fullname = rows[i].getElementsByTagName("td");
fullname = fullname[0].innerHTML.toLowerCase();
That's because the first tr tag you have is in the thead and it doesn't have any td at all. Changing the start of your loop to 1 will fix that:
for ( var i = 1; i < rows.length; i++ ) { //... and so on
yuvi is correct in his answer. I've incorporated this in a fiddle - http://jsfiddle.net/dBs7d/8/ - that also contains the following changes:
Inputs with course and subject grouped into individual rows.
td tags align underneath th tags.
Code refactored to improve readability.
Instead of checking the html of the td tags I've changed it to check the value attribute of the input tags. This means you can change the value of the input and still search.
I also changed the style alteration to use backgroundColor. This can easily be reverted to display.
See this link.
HTML:
<table name="tablecheck" class="Data" id="results" >
<thead>
<tr>
<th>Course</th>
<th>Subject</th>
<th>COURSE CODE</th>
<th>COURSE NAME</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="course" /></td>
<td><input type="text" value="subject" /></td>
</tr>
<tr>
<td><input type="text" value="course1" /></td>
<td><input type="text" value="subject1" /></td>
</tr>
<tr>
<td><input type="text" value="course2" /></td>
<td><input type="text" value="subject2" /></td>
</tr>
</tbody>
</table>
Search here (with jQuery):<input type="text" size="30" value="" onKeyUp="doSearchJQ(this);" /><br />
Search here:<input type="text" size="30" value="" onKeyUp="doSearch(this);" />
Javascript:
function doSearchJQ(input) {
var value = $(input).val();
if (value.length > 0) {
$("#results tbody tr").css("display", "none");
$('#results input[value^="' + value + '"]').parent().parent().css("display", "table-row");
} else {
$("#results tbody tr").css("display", "table-row");
}
}
function doSearch(input){
var value = input.value;
var table = document.getElementById('results');
var tbody = table.querySelector("tbody");
var rows = tbody.querySelectorAll("tr");
var visible, row, tds, j, td, input;
for (var i = 0; i < rows.length; i++) {
visible = false;
row = rows[i];
tds = row.querySelectorAll("td");
for (j = 0; j < tds.length; j++) {
td = tds[j];
input = td.querySelector("input");
console.log(input.value.indexOf(value));
if (input.value.indexOf(value) > -1) {
visible = true;
break;
}
}
if (visible) {
row.style.display = "table-row";
} else {
row.style.display = "none";
}
}
}
With jquery it's more compact function. But you can use clear javascript doSearch.
Why don't you use JQuery DataTables? The plugin has a really nice table view as well as automatically enabled search textbox, and should fit in easily with your JavaScript/PHP solution.
See example table below:
The plugin is well-documented, and widely used. It should be very easy to drop in into an existing application, and style it accordingly.
Hope this helps!
So I have this table:
<table border="1" align="center">
<tr>
<td>Broj_pu</td>
<td>Naziv_pu</td>
<td>ID</td>
<td>Naselje</td>
<td>zupanija</td>
</tr>
<tr>
<td><input type="text" ID="broj_pu" onkeydown="Filter(document.getElementById('broj_pu').value, 'broj_pu')" /></td>
<td><input type="text" ID="naziv_pu" onkeydown="Filter(document.getElementById('naziv_pu').value, 'naziv_pu')" /></td>
<td><input type="text" ID="ID" onkeydown="Filter(document.getElementById('ID').value, 'ID')" /></td>
<td><input type="text" ID="naselje" onkeydown="Filter(document.getElementById('naselje').value, 'naselje')" /></td>
<td><input type="text" ID="zupanija" onkeydown="Filter(document.getElementById('zupanija').value, 'zupanija')" /></td>
</tr>
<tr class="row" ID="row_filter">
<td>10000</td>
<td>Zagreb</td>
<td>1</td>
<td>Sljeme</td>
<td>ZAGREBACKA</td>
</tr>
<tr class="row" ID="row_filter">
<td>10000</td>
<td>Zagreb</td>
<td>2</td>
<td>Zagreb-dio</td>
<td>ZAGREBACKA</td>
</tr>
<!-- A lot of rows -->
...
</table>
And also I have started this JavaScript:
<script type="text/javascript">
function Filter(text, column_name){
var x = document.getElementByClassName("row");
var i = 0;
var y;
if (text != ""){
switch (column_name){
case "broj_pu":
for (i = 0; i < x.length; i++){
y = x[i].getElementByTagName("td");
if((y[0].value).match(text) == null){
x[i].attributes(style) = "{display:none;}";
}
}
break;
case "naziv_pu":
y = x[i].getElementByTagName("td");
if((y[1].value).match(text) == null){
x[i].attributes(style) = "{display:none;}";
}
}
break;
case "ID":
y = x[i].getElementByTagName("td");
if((y[2].value).match(text) == null){
x[i].attributes(style) = "{display:none;}";
}
}
break;
case "naselje":
y = x[i].getElementByTagName("td");
if((y[3].value).match(text) == null){
x[i].attributes(style) = "{display:none;}";
}
}
break;
case "zupanija":
y = x[i].getElementByTagName("td");
if((y[4].value).match(text) == null){
x[i].attributes(style) = "{display:none;}";
}
}
break;
}
}
}
</script>
Now, I need to filter the table as the user inputs letters to the text fields, but I have no idea how to edit the display document as I enter the data.
Anyone have an idea?
EDIT1:
So I edited the script but it doesn't seem to work. What did I do wrong?
This question is reminding me of how java script is nasty without any framework support :)
However I have sorted-out this issue for you ( tested on firefox 10.0.2).
check the complete working solution on jsfiddle
please remember this is just working example , you might need to write ALL-Browser compliant script .
script:
var filters=['hide_broj_pu','hide_naziv_pu','hide_ID','hide_naselje','hide_zupanija'];
function ExcludeRows(cls){
var skipRows=[];
for(i=0;i<filters.length;i++)
if(filters[i]!=cls) skipRows.push(filters[i]);
var pattern=skipRows.join('|')
return pattern;
}
function Filter(srcField){
var node=srcField.parentNode;
var index=srcField.parentNode.cellIndex;
//all the DATA rows
var dataRows= document.getElementsByClassName("row");
//ensure that dataRows do not have any filter class added already
var kids= dataRows.length;
var filter ='hide_'+srcField.id;
var pattern = ExcludeRows(filter);
var skipRow = new RegExp(pattern,"gi");
var searchReg =new RegExp('^'+srcField.value,'gi');
var replaceCls= new RegExp(filter,'gi');
for(i=0; i< kids ; i++){
//skip if already filter applied
if(dataRows[i].className.match(skipRow)) continue;
//now we know which column to search
//remove current filter
dataRows[i].className=dataRows[i].className.replace(replaceCls,'');
if(!dataRows[i].cells[index].innerHTML.trim().match(searchReg))
dataRows[i].className=dataRows[i].className +' '+ filter;
}
}
HTML
<table border="1" align="center">
<tr><td>Broj_pu</td><td>Naziv_pu</td><td>ID</td><td>Naselje</td><td>zupanija</td></tr>
<tr>
<td><input type="text" ID="broj_pu" onkeydown="Filter(this)" /></td>
<td><input type="text" ID="naziv_pu" onkeydown="Filter(this)" /></td>
<td><input type="text" ID="ID" onkeydown="Filter(this)" /></td>
<td><input type="text" ID="naselje" onkeydown="Filter(this)" /></td>
<td><input type="text" ID="zupanija" onkeydown="Filter(this)" /></td>
</tr>
<tr class="row" ><td>10000</td><td>Zagreb</td><td>1</td><td>Sljeme</td><td>ZAGREBACKA</td></tr>
<tr class="row" ><td>10000</td><td>Zagreb</td><td>2</td><td>Zagreb-dio</td><td>ZAGREBACKA</td></tr>
</table>
CSS
.hide_broj_pu,
.hide_naziv_pu,
.hide_ID,
.hide_naselje,
.hide_zupanija
{display:none}
For Javascript Table Search, Try:
<p>Search: <input type="text" id="searchTerm" onkeyup="doSearch()" /></p>
<table id="dataTable">
<script>
function doSearch() {
var input, filter, found, table, tr, td, i, j;
input = document.getElementById("searchTerm");
filter = input.value.toUpperCase();
table = document.getElementById("dataTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
for (j = 0; j < td.length; j++) {
if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
found = true;
}
}
if (found) {
tr[i].style.display = "";
found = false;
} else {
tr[i].style.display = "none";
}
}
}
</script>
I have a set of text inputs fields which I want to be cloned when the user clicks the "add" button. My problem is that the fields are being cloned with the input from the user. Using Javascript, how do I reset the value of the text input fields so they may be cloned without cloning the user input text.
This is my code...
<table width="766" border="0" cellspacing="0" cellpadding="0" id="albumTable">
<tr id="clone">
<td width="230"><input type="text" name="dj_1" /></td>
<td width="230"><input type="text" name="affiliations_1" /></td>
<td width="230"><input type="text" name="rating_1" /></td>
<td width="230"><input type="text" name="comments_1" /><input type="hidden" name="count" value="1" class="count"/></td>
<td width="286" style="position:absolute; top:110px; left: 670px;"><input name="button" type="button" id="Add" value="ADD ROW" onclick="addRow(this.parentNode.parentNode)"></td>
</tr>
</table>
<script type="text/javascript">
function addRow(r){
var root = r.parentNode;
var allRows = root.getElementsByTagName('tr');
var cRow = allRows[0].cloneNode(true)
var cInp = cRow.getElementsByTagName('input');
var countRow = cRow.getElementsByClassName('count');
for(var i=0;i<cInp.length;i++){
cInp[i].setAttribute('name',cInp[i].getAttribute('name').replace(/\d/g,(allRows.length+1)))
}
for(var j=0;j<countRow.length;j++){
countRow[j].setAttribute('value',countRow[j].getAttribute('value').replace(/\d/g,(allRows.length+1)))
}
root.appendChild(cRow);
}
function shownames(){
var allInp=document.getElementsByTagName('input');
for(var i=0;i<allInp.length;i++){
alert(allInp[i].name)
}
}
</script>
Something like this:
var cln = document.getElementByID("clone");
var clns = cln.getElementsByTagName("td");
for(var i = 0; i <clns.length; i++)
{
clns[i].innerHTML = "";
}
In the first for loop, just add this:
cInp[i].value='';