could anyone help me on my code?
I try to make a sample code on the following action:
1. when the user click on the button, the "hello" will take cell 1 and cell 2 while the other cell 3 to 10 will remain.
2. When the user click on the button again, nothing happen.
I try to set a flag to false after the user click on it to let nothing happen if user click again; however, it doesn't work at all. The user can click until the first row's cells deleted just left "hello".
Any solution in javascript or JQuery? I try to search for static variable in javascript but seem impossible.
Thank you in advance.
var flag = false;
function clickhere(){
if(flag = true){
var cell = document.getElementById('a');
document.getElementById("row").deleteCell(1);
cell.setAttribute("colspan", 2);
cell.innerHTML = "hello";
flag=false;
}
}
<table border="1">
<tr id="row">
<td id="a">1</td>
<td id="b">2</td>
<td id="c">3</td>
<td id="d">4</td>
<td id="e">5</td>
</tr>
<tr>
<td id="f">6</td>
<td id="g">7</td>
<td id="h">8</td>
<td id="i">9</td>
<td id="j">10</td>
</tr>
</table>
<input type="button" value="Click" onclick="clickhere();"/>
You have a couple of opportunities to address. Firstly, your if is doing an assignment rather than a a comparison. Since your flag is a boolean we can use it directly. Secondly, your initial assignment and the one at the end of the function should probably be opposite.
Here is one way you might correct things.
var flag = false;
function clickhere(){
if(flag){ return; }
flag = true;
var cell = document.getElementById('a');
document.getElementById("row").deleteCell(1);
cell.setAttribute("colspan", 2);
cell.innerHTML = "hello";
}
<table border="1">
<tr id="row">
<td id="a">1</td>
<td id="b">2</td>
<td id="c">3</td>
<td id="d">4</td>
<td id="e">5</td>
</tr>
<tr>
<td id="f">6</td>
<td id="g">7</td>
<td id="h">8</td>
<td id="i">9</td>
<td id="j">10</td>
</tr>
</table>
<input type="button" value="Click" onclick="clickhere();" />
Related
I have a little complicated situation here, one which, despite my serious efforts, am unable to find reasonable solution of. So I am placing it here. I have javascript, jQuery and HTML with following details:
var lastDateIndex ='';
function datecheck(){
lastDateIndex = $('td, input[name=date]:not(:empty):last').prev('[name=index]');
alert(lastDateIndex.html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='table1'>
<tr id='row1'>
<th>Index</th>
<th>Date</th>
<th>Description</th>
<th>Payment</th>
<th>Balance</th>
</tr>
<tr id='row2' name='row'>
<td name='index'>1</td>
<td name='rowdate'><input type="date" title="date1" name="date" onblur="datecheck();"></td>
<td name='description'><input title="description1" name="description"></td>
<td name='description'><input title="paymentpay1" name="paymentpay"></td>
<td name='description'><input title="balance1" name="balance"></td>
</tr>
<tr id='row3' name='row'>
<td name='index'>2</td>
<td name='rowdate'><input type="date" title="date2" name="date" onblur="datecheck();"></td>
<td name='description'><input title="description2" name="description"></td>
<td name='description'><input title="paymentpay2" name="paymentpay"></td>
<td name='description'><input title="balance2" name="balance"></td>
</tr>
<tr id='row4' name='row'>
<td name='index'>3</td>
<td name='rowdate'><input type="date" title="date3" name="date" onblur="datecheck();"></td>
<td name='description'><input title="description3" name="description"></td>
<td name='description'><input title="paymentpay3" name="paymentpay"></td>
<td name='description'><input title="balance3" name="balance"></td>
</tr>
</table>
This table has numerous input fields and all of them are to be filled by user as per his/hers need. I need to select the td with name='index' inside of last tr where td with input[name='date'] is not null. In other words, if the user has entered date details in input[name='date'] and [title='date1'] inside tr with id='row2' and has left all remaining rows to be blank, I want to select the html inside of name='index' inside tr with id='row2'.
The function I have written above only alerts 1, even if all the rows except the last one are filled. How can I acheive the answer of the html of name='index' of the last tr with empty name='date'?
As far as I know it can't be done using only selectors, so consider the following:
In case the user writes a value in input[name='date'], update its parent TD and add a class/data-* attribute (for instance: addClass('date-isnt-null')).
Use the following selector:
$('.tr:last-child td.date-isnt-null[name="index"]');
If whenever you call your function you want to output all the rows with a date entered, you can use:
function datecheck() {
$('input[name=date]').each(function(i, el) {
if ($(el).val()) {
console.log($(el).parents('tr').find('[name=index]').html());
}
});
}
(not sure to understand the last index bit).
As for Ofir Baruch suggestion, here is a way to go:
$(function() {
$('input[name=date]').bind('blur', function() {
if ($(this).val()){
$(this).parent('td').addClass("dirty");
} else {
// in case the user removes the date
$(this).parent('td').removeClass("dirty");
}
});
});
function datecheck() {
var html = $('.tr:last-child td.dirty[name="index"]').html();
console.log(html);
}
On input date blur and if the user entered a date, we add the class dirty to its parent.
I would like to have keyup function that would show only rows matching the input text by cell that spans on multiple rows.
Consider following table:
<table border='1'>
<tr>
<td rowspan='2'>Key1</td>
<td name='Key1'> dummy1 </td>
</tr>
<tr>
<td name='Key1'> dummy2 </td>
</tr>
<tr>
<td rowspan='2'>Key2</td>
<td name='Key2'> dummy3 </td>
</tr>
<tr>
<td name='Key2'> dummy4 </td>
</tr>
</table>
jsfiddle
Here each row has second td tag with name that matches its "parent" column text. So when I type 'Key1' at the input field I would like it to show only dummy1 and dummy2. Is it possible in jquery?
I understand that you want to display the rows that has a matching name. If this is wrong, please elaborate more, then I can update it.
Here is a demo: https://jsfiddle.net/erkaner/gugy7r1o/33/
$('input').keyup(function(){
$('tr').hide();
$("td").filter(function() {
return $(this).text().toLowerCase().indexOf(keyword) != -1; }).parent().show().next().show();
});
});
Here's my take on your issue, assuming you always want the first column to show. https://jsfiddle.net/gugy7r1o/2/
<input type="text" id="myInput" />
<table border='1'>
<tr>
<td rowspan='2'>Key1</td>
<td name='Key1' class="data"> dummy1 </td>
</tr>
<tr>
<td name='Key1' class="data"> dummy2 </td>
</tr>
<tr>
<td rowspan='2'>Key2</td>
<td name='Key2' class="data"> dummy3 </td>
</tr>
<tr>
<td name='Key2' class="data"> dummy4 </td>
</tr>
</table>
.data{
display:none;
}
var theData = $('td.data');
var input = $('#myInput').on('keyup', function(){
theData.hide();
var value = input.val();
var matches = theData.filter('[name="'+value+'"]');
matches.show();
});
Firstly, I would recommend using <ul> to wrap each key in as tables should be used for data structure (Forgive me if that is what it is being used for).
Secondly, just attach an on keyup event to the search box and then find matches based on the id. See example below:
JS Fiddle Demo
It is also worth mentioning that it could be useful attaching a timeout to the keyup event if you end up having large amounts of rows so that only one filter is fired for fast typers!
I want to know how to retain values clicked and get more with my keyboard to make a word as opposed to one single letter?
function f(i) {
document.getElementById('txt').value
= (document.getElementById(i).firstChild.nodeValue);
<td id='i1' onclick='f("i1");' class='big'>A</td>
<td id='i2' onclick='f("i2");' class='big'>B</td>
<td id='i3' onclick='f("i3");' class='big'>C</td>
<td id='i4' onclick='f("i4");' class='big'>D</td>
<td id='i5' onclick='f("i5");' class='big'>E</td>
<td id='i6' onclick='f("i6");' class='big'>F</td>
<td id='i7' onclick='f("i7");' class='big'>G</td>
<td id='i8' onclick='f("i8");' class='big'>H</td>
<td id='i9' onclick='f("i9");' class='big'>I</td>
<td align='center' bgcolor='red' colspan=3> <input type='text' id='txt'></td>
You probably want to change the = for += to append the pressed value, instead of just replacing it.
I'm trying to set up a script that sets invisible everything with a certain class name.
This is an example of what I'm trying to call:
<script type="text/javascript">
function hideItems(){
document.getElementsByClassName('class1').style.visibility = "hidden";
}
</script>
The class names are on the dimensions of a table, similar to this example:
<table onclick="hideItems()" width="200" border="1">
<tr>
<td class="class1">1</td>
<td class="class2">2</td>
<td class="class3">3</td>
<td class="class1">1</td>
<td class="class2">2</td>
<td class="class3">3</td>
</tr>
<tr>
<td class="class3">3</td>
<td class="class1">1</td>
<td class="class2">2</td>
<td class="class3">3</td>
<td class="class1">1</td>
<td class="class2">2</td>
</tr>
</table>
In the end, there's going to be a three checkboxes, displaying the dimensions based on which of the three are selected. That part, I can do just fine, but calling the particular dimensions to become invisible is what I'm having an issue with currently.
Thanks in advance for any kind of help.
getElementsByClassName returns a collection. You can't collectively set properties unless you're using a framwork like jquery
var elems = document.getElementsByClassName('class1');
for(var i = 0; i != elems.length; ++i)
{
elems[i].style.visibility = "hidden"; // hidden has to be a string
}
I have a table with multiple rows, with each row having a button within the tag. There is also a link within each td tag that when the user clicks, THAT corresponding button is supposed to show, but when I click on the link, ALL the buttons show.
Here is the html:
<tr>
<td width="10%" align="center"></td>
<td width="80%" align="left"><span style="font-weight:bold;">About Me:</span> <input type="button" class="userDetails" style="display:none;" value="Save"/></td>
<td width="10%" align="center"></td>
</tr>
<tr>
<td width="10%" align="center"></td>
<td width="80%" class="originalText" align="left" valign="top">
'.$aboutMe.'
</td>
<td width="80%" class="aboutMe" align="center" valign="top">
<div style="display:none; font-weight:bold; color:red;" class="msgStatusText"></div>
<textarea class="textBox" cols="20" rows="auto" style="display:none;">
'.$aboutMe.'
</textarea>
</td>
<td width="10%" align="center"></td>
</tr>
and here is the jquery:
$(function(){
$(".editText").each(function(e){
$(this).unbind("click").click(function(e){//if user clicks on title (aboutMe,etc)
e.preventDefault();
//get handle for textArea //IF ANY EDITS, WILL BE IN THE VAR SECTION HERE
var textAreaHandle = $(this).parents("tr").next().find(".originalText"); //original userText
var oldTextValue = jQuery.trim($(textAreaHandle).text()); //trim value, else will not compare properly
var editTextBox = $(this).parents("tr").next().find(".textBox"); //handle for textarea
var fieldName = $(editTextBox).parent("td").attr("class"); //fieldName
var buttonHandle = $(this).parents("td").find(".userDetails");//WORKS, but gets ALL buttons, not just the corresponding one
var msgStatusHandle = $(this).parents("tr").next("tr").find(".msgStatusText");
The button is shown using the following code, which is ok, it's just the handle to the corresponding button (code above) that is messed up:
buttonHandle.css({"visibility":"visible"}).show();
There are multiple rows, each with the same structure as the one above so if user clicks on one row, only that corresponding button should show.
Somebody please tell my what I am doing wrong. Whatever I do, I can't seem to get this working.
Thanks a bunch!
Change this line:
var buttonHandle = $(this).parents("td").find(".userDetails");
To this:
var buttonHandle = $(this).closest('td').find('.userDetails');