We Keep Coding

Creating a show/hide button to toggle table column

I made a table that has questions on the left side and answers on the right side. By default these answers are hidden. If the user presses a button, they show up.
I've found this code and modified it quite a bit but what is still missing is a single button that toggles between Show and Hide. I don't like having two separate buttons.
Since I wanted the answers to be hidden at the beginning I called up the function with showHideColumn(1, false);. Is this correct or is there any nicer approach for this? Are there any other things once could do to optimize the code? (I'm new to programming)
Thanks.
<table id='idTable'>
<tr><td> Questions 1</td><td> Answer 1</td></tr>
<tr><td> Questions 2</td><td> Answer 2</td></tr>
<tr><td> Questions 3</td><td> Answer 3</td></tr>
<tr><td> Questions 4</td><td> Answer 4</td></tr>
<tr><td> Questions 5</td><td> Answer 5</td></tr>
</table>
<input type='button' onClick='javascript:showHideColumn(1, true);' value='show'>
<input type='button' onClick='javascript:showHideColumn(1, false);' value='hide'>
<script>
showHideColumn(1, false);
function showHideColumn(colNo, doShow) {
var rows = document.getElementById('idTable').rows;
for (var row = 0; row < rows.length; row++) {
var cols = rows[row].cells;
if (colNo >= 1 && colNo < cols.length) {
cols[colNo].style.display = doShow ? '' : 'none';
}
}
}
</script>

You can use single button and change its text like below using "innerHTML":
<script type="text/javascript">
var button = document.querySelector('#button');
button.addEventListener('click', function (event) {
if (button.innerHTML == "Hide") {
//Add Code to Hide Columns
button.innerHTML = "Show";
} else {
//Add Code to Show Columns
button.innerHTML = "Hide";
}
}
);
</script>

First of all set global var doShow and change the bool value on every click true and false with current button value
if( doShow ){
doShow = false;
e.value = 'show';
}else{
e.value = 'hide';
doShow = true;
}
Remove second button.
<table id='idTable'>
<tr>
<td> Questions 1</td>
<td> Answer 1</td>
</tr>
<tr>
<td> Questions 2</td>
<td> Answer 2</td>
</tr>
<tr>
<td> Questions 3</td>
<td> Answer 3</td>
</tr>
<tr>
<td> Questions 4</td>
<td> Answer 4</td>
</tr>
<tr>
<td> Questions 5</td>
<td> Answer 5</td>
</tr>
</table>
<input type='button' onClick='javascript:showHideColumn(this, 1);' value='show'>
and update your custom function prams like this showHideColumn(this, 1) and this showHideColumn(null, 1)
<script>
showHideColumn(null, 1);
var doShow;
function showHideColumn(e, colNo) {
if (e != null) {
if (doShow) {
doShow = false;
e.value = 'show';
} else {
e.value = 'hide';
doShow = true;
}
}
var rows = document.getElementById('idTable').rows;
for (var row = 0; row < rows.length; row++) {
var cols = rows[row].cells;
if (colNo >= 1 && colNo < cols.length) {
cols[colNo].style.display = doShow ? '' : 'none';
}
}
}
</script>

How to delete a column using jquery by clicking on a cell?

I have a table that I add columns to it on the fly. Each column has an [X] icon on the top, when a user clicks on it, I need to delete the entire column.
I created a Fiddler page to show you what I have done.
As you can see I have [X] icon on the top and when I click it, it is deleting the 3rd column in the table because I am specifying a fixed column i.e. 3. But I need to be able to remove the current column not the 3rd column.
How can I determine what is the current column and delete every tr with in the table matching the correct position?

Could try something like this:
$('.removeMe').click(function() {
var indexToRemove = $(this).index();
$(".defaultTable tbody tr").each(function() {
$(this).find("td:eq("+indexToRemove+")").remove();
});
});
Edit:
Here's a fiddle which will remove them, the headers, and any dynamically-created columns as well. It uses jQuery's .on() method with delegated events so that even elements which are created dynamically will have this event listener added to them. .click() is a direct binding and will only bind it to elements which already exist so newly-created elements won't have the event listeners binded to them.
Fiddle: http://jsfiddle.net/stevenelberger/dsL31yek/

You may use https://api.jquery.com/nth-child-selector/:
$('#testTable1').on('click', '.removeMe', function () {
$(".defaultTable thead tr th:nth-child(" + ($(this).index() + 1) + ")").remove();
$(".defaultTable tbody tr td:nth-child(" + ($(this).index() + 1) + ")").remove();
});
Snippet:
$(document).ready(function () {
$('.defaultTable').dragtable();
$('#test1').click(function () {
$("#testTable1 > thead > tr").each(function () {
$(this).append('<th>New Column</th>');
});
$("#testTable1 > tbody > tr").each(function (i, e) {
if (i == 0) {
$(this).append('<td class="removeMe">[X]</td>');
} else {
$(this).append('<td>New cell in the column</td>');
}
});
$('.defaultTable').removeData().dragtable();
});
$('#testTable1').on('click', '.removeMe', function () {
$(".defaultTable thead tr th:nth-child(" + ($(this).index() + 1) + ")").remove();
$(".defaultTable tbody tr td:nth-child(" + ($(this).index() + 1) + ")").remove();
});
$('.defaultTable').removeData().dragtable();
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://akottr.github.io/css/akottr.css" rel="stylesheet"/>
<link href="http://akottr.github.io/css/reset.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="//rawgithub.com/akottr/dragtable/master/dragtable.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="//rawgithub.com/akottr/dragtable/master/jquery.dragtable.js"></script>
<!-- only for jquery.chili-2.2.js -->
<script src="//code.jquery.com/jquery-migrate-1.1.1.js"></script>
<script type="text/javascript" src="//akottr.github.io/js/jquery.chili-2.2.js"></script>
<div class="sample">
<button type="button" id="test1">Add column</button>
<div class="demo">
<h4>demo</h4>
<div class="demo-content">
<table class="defaultTable sar-table" id="testTable1">
<thead>
<tr>
<th>TIME</th>
<th>%user</th>
<th>%nice</th>
<th>%system</th>
<th>%iowait</th>
<th>%idle</th>
</tr>
</thead>
<tbody>
<tr>
<td class="removeMe">[X]</td>
<td class="removeMe">[X]</td>
<td class="removeMe">[X]</td>
<td class="removeMe">[X]</td>
<td class="removeMe">[X]</td>
<td class="removeMe">[X]</td>
</tr>
<tr>
<td>12:10:01 AM</td>
<td>28.86</td>
<td>0.04</td>
<td>1.65</td>
<td>0.08</td>
<td>69.36</td>
</tr>
<tr>
<td>12:20:01 AM</td>
<td>26.54</td>
<td>0.00</td>
<td>1.64</td>
<td>0.08</td>
<td>71.74</td>
</tr>
<tr>
<td>12:30:01 AM</td>
<td>29.73</td>
<td>0.00</td>
<td>1.66</td>
<td>0.09</td>
<td>68.52</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

var index = $(this).index();
$(".defaultTable tr").each(function() {
//remove body
$(this).find("td:eq("+index+")").remove();
//and head
$(this).find("th:eq("+index+")").remove();
});
DEMO

You could try by getting column number from table
$('.removeMe').click(function(){
var colNum = $(this).parent().children().index($(this));// getting the column number
console.log(colNum);
$(".defaultTable tbody tr").each(function() {
$(this).find("td:eq("+colNum+")").remove();
});
});

Adding mine in with the lot of answers:
Working Example:
http://jsfiddle.net/Twisty/h0asbe6o/
jQuery
function removeColumn(n, o) {
o = (o != "undefined") ? o : $("#testTable1");
console.log("Removing Column '" + o.find("thead tr th:eq(" + n + ")").text() + "' (" + n + ") from " + o.attr("id"));
o.find("tr").each(function(k, e) {
$(e).find("th:eq(" + n + ")").empty().remove();
$(e).find("td:eq(" + n + ")").empty().remove();
});
return true;
}
Also you'd want to fix a few creation issues:
$(document).ready(function() {
$('.defaultTable').dragtable();
$('#test1').click(function() {
$("#testTable1 > thead > tr").append('<th>New Column</th>');
$("#testTable1 > tbody > tr").each(function(key, el) {
if (key == 0) {
var rm = $("<span>", {
class: "removeMe"
})
.html("[X]")
.click(function() {
removeColumn($(this).index());
$(this).remove();
});
rm.appendTo(el);
} else {
$(el).append('<td>New cell in the column</td>');
}
});
$('.defaultTable').removeData().dragtable();
});
$('.removeMe').on("click", function() {
removeColumn($(this).index());
$('.defaultTable').removeData().dragtable();
});
});
This will create new columns properly and allow you to delete either static or dynamically created elements.
EDIT
If you felt like improving the UI, you could do something like this:
http://jsfiddle.net/Twisty/h0asbe6o/4/
HTML
<div class="sample">
<button type="button" id="test1">Add column</button>
<div class="demo">
<h4>demo</h4>
<div class="demo-content">
<table class="defaultTable sar-table" id="testTable1">
<thead>
<tr>
<th><span class="cTitle handle">TIME</span><span class="removeMe">[x]</span></th>
<th><span class="cTitle handle">%user</span><span class="removeMe">[x]</span></th>
<th><span class="cTitle handle">%nice</span><span class="removeMe">[x]</span></th>
<th><span class="cTitle handle">%system</span><span class="removeMe">[x]</span></th>
<th><span class="cTitle handle">%iowait</span><span class="removeMe">[x]</span></th>
<th><span class="cTitle handle">%idle</span><span class="removeMe">[x]</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>12:10:01 AM</td>
<td>28.86</td>
<td>0.04</td>
<td>1.65</td>
<td>0.08</td>
<td>69.36</td>
</tr>
<tr>
<td>12:20:01 AM</td>
<td>26.54</td>
<td>0.00</td>
<td>1.64</td>
<td>0.08</td>
<td>71.74</td>
</tr>
<tr>
<td>12:30:01 AM</td>
<td>29.73</td>
<td>0.00</td>
<td>1.66</td>
<td>0.09</td>
<td>68.52</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS
.removeMe {
font-size: .65em;
float: right;
cursor: pointer;
margin-top: -0.5em;
color: #aaa;
}
.removeMe:hover {
color: #222;
}
jQuery
function removeColumn(n, o) {
o = (o != "undefined") ? o : $("#testTable1");
o.find("tr").each(function(k, e) {
if (k == 0) {
$(e).find("th").eq(n).hide("slow").remove();
} else {
$(e).find("td").eq(n).hide("slow").remove();;
}
});
return true;
}
var dragOptions = {
dragHandle: '.handle'
};
$(document).ready(function() {
$('.defaultTable').dragtable(dragOptions);
$('#test1').click(function() {
var head = $("<th>").html("<span class='cTitle handle'>New Column</span>");
var rm = $("<span>", {
class: "removeMe"
})
.html("[X]")
.click(function() {
removeColumn($(this).parent().index());
$(this).remove();
});
rm.appendTo(head);
head.appendTo("#testTable1 > thead > tr");
$("#testTable1 > tbody > tr").each(function(key, el) {
$(el).append('<td>New Cell</td>');
});
$('.defaultTable').removeData().dragtable(dragOptions);
});
$('.removeMe').on("click", function() {
removeColumn($(this).parent().index());
$('.defaultTable').removeData().dragtable(dragOptions);
});
});

ASP.NET Radio buttons selection to hide/show div section

I am trying to hide a section based on the result of a Yes/No radio button selection where yes is true and no is false. I have it to where if the user selects a button, the field is shown, but it does it for both yes or no, also if the user clicks the no, it should remain hidden(which it doesn't). Thanks for any help.
Here is the JQuery code
$(document).ready(function () {
$('input[type="radio"]').click(function () {
if ($(this).prop('#ImportPartRadio', true)) {
$('#ImportPartQuestions').show();
}
else if ($(this).prop('#ImportPartRadio', false)){
$('#ImportPartQuestions').hide();
}
});
});
Here is the div sections
#*import parts radio button*#
<div class="span-18 last" id="ImportPart">
<table class="item-display">
<tr>
<td class="label required" id="ImportPartRadio">
<div class='tooltip'>Is this an import part?<span class="tooltiptext">This information can be used to calssify the part for US Customs purposes.</span></div></td>
<td class="value" colspan="5">
Yes: #Html.RadioButtonFor(model => model.ImportPart, true)
No: #Html.RadioButtonFor(model => model.ImportPart, false)
</td>
</tr>
</table>
</div>
#*This table is for full procurement and sales procurement setup only*#
<div class="span-18 last" id="ImportPartQuestions">
<table class="item-display">
<tr>
<td class="label">If an import, what is the material and function of part?</td>
<td colspan="5" class="value">
#Html.TextAreaFor(model => model.MaterialAndFunction, new { #placeholder = "Description Here", maxLength = 300 })
#Html.ValidationMessageFor(model => model.MaterialAndFunction)
</td>
</tr>
</table>
</div>
I have been googling for hours and can't seem to find a solution the works, this is as close as any of them come to fully working.
Here is the html code rendered by the browser

$(document).ready(function() {
$('input[name="ImportPart"]').change(function() {
var radioValue = $(this).val();
var questionsDiv = $('#ImportPartQuestions');
if (radioValue == "True") {
questionsDiv.show();
} else {
questionsDiv.hide();
}
});
});
OR using .toggle( display )
$('input[name="ImportPart"]').change(function() {
$('#ImportPartQuestions').toggle(this.value === "True");
});

$(document).ready(function () {
$('#ImportPartRadio input[type="radio"]').click(function () {
if ($(this).val() === 'True') {
$('#ImportPartQuestions').show();
} else {
$('#ImportPartQuestions').hide();
}
});
});
// edited to match case with your True value, and fixed a typo.

Why not get the change event which will be more robust:
$(document).ready(function () {
$('input[type="radio"]').change(function () {
if ($(this).val()==true) {
$('#ImportPartQuestions').show();
}
else {
$('#ImportPartQuestions').hide();
}
});
});

HTML+JavaScript: How to highlight a row on click of a button in Javascript?

I am using below code to generate a dynamic table-
<!DOCTYPE html>
<html>
<head>
<script>
document.write("<table id=appTable border=1 style=margin-top:10px; margin-left:10px;>");
document.write("<tr><th>Select</th><th>Name</th><th>Location</th><th>Action</th></tr>");
for (row = 1; row < 5; row++) {
document.write("<tr>");
for (col = 1; col <= 4; col++) {
if(col == 1) {
document.write("<td><input type='checkbox' id='mapCheck' name='myTextEditBox' /></td>");
}
if(col == 2) {
document.write("<td width='140'>Name</td>");
}
if(col == 3) {
document.write("<td width='200'>Location</td>");
}
if(col == 4) {
document.write("<td><button type='button'>select</button></td>");
}
}
document.write("</tr>")
}
document.write("</table>")
</script>
</body>
</html>
When the select button is clicked the table row should highlight the entire row.
Any idea how to implement it in javascript & css ?

Here you go! Add a function to your button onclick while creating it and write a function as below:
DEMO
So changed button html before appending will be
document.write("<td><button type='button' onclick='highlight(this)'>select</button></td>")
^^^^^Add this
and a function
function highlight(ctrl){
var parent=ctrl.parentNode.parentNode;
parent.style.background='red';
}
UPDATE
To remove previous selected on click of other below is one of the approach you can opt to:
DEMO
CSS
.backChange{
background:red;
}
JS
Scenario 1
function highlight(ctrl){
var elements=document.getElementsByTagName('tr'); //get all the tr elements
for(var i=0;i<elements.length;i++)
elements[i].className=''; //clear the className from all the tr elements
var parent=ctrl.parentNode.parentNode;
parent.className="backChange"; //add ClassName to only this element's parent tr
}
Scenario 2
Now If you have classList that are already there in tr and you just want to add or remove one particular class which changes its style then you can do it as below:
DEMO
function highlight(ctrl){
var elements=document.getElementsByTagName('tr');
for(var i=0;i<elements.length;i++)
elements[i].classList.remove('backChange'); //remove one particular class from list of classNames in that element
var parent=ctrl.parentNode.parentNode;
parent.classList.add("backChange");//Add that particular class to classList of element's parent tr
}
UPDATE 2
Without using Class and applying inline styles you can try as below:
DEMO
function highlight(ctrl){
var elements=document.getElementsByTagName('tr');
for(var i=0;i<elements.length;i++)
elements[i].style.background=''; //remove background color
var parent=ctrl.parentNode.parentNode;
parent.style.background="red";//add it to specific element.
}

You can achieve what you want by adding an onclick function to your button:
<button type='button' onclick='highlight(this)'>
And then include the function before your loop:
function highlight(button) {
button.parentNode.parentNode.className = 'highlight';
// the first parentNode is the td
// the second is the tr,
// then you add a class of highlight to the row
}
And add the css for the highlight:
.highlight {background:red;}
Example fiddle

Have a look at following snippet:
function hightLight(ele)
{
ele.parentElement.parentElement.className = "highlight";
}
document.write("<table id=appTable border=1 style=margin-top:10px; margin-left:10px;>");
document.write("<tr><th>Select</th><th>Name</th><th>Location</th><th>Action</th></tr>");
for (row=1; row<5; row++)
{
document.write("<tr>");
for (col=1; col<=4; col++)
{
if(col==1)
{ document.write("<td><input type='checkbox' id='mapCheck' name='myTextEditBox' /></td>");
}
if(col==2)
document.write("<td width='140'>Name</td>");
if(col==3)
document.write("<td width='200'>Location</td>");
if(col==4)
document.write("<td><button onclick='hightLight(this)' type='button'>select</button></td>");
}
document.write("</tr>");
}
document.write("</table>");
.highlight
{
background-color:yellow;
}
<!DOCTYPE html>
<html>
<body>
</body>
</html>

I would advise against using a button here and rather use the checkboxes which you already have. If you use a button to select a row, then how would you de-select it? You can then use the buttons to fire up actions on the selected row.
From a raw Javascript perspective (i.e. without using any library like jQuery etc.), you can work your algorithm like this:
Find all checkboxes in the table,
Bind a "change" event to all these checkboxes,
If the checkbox is checked then select the row by changing its parent's (td) parent (tr) background color.
Putting this together:
var chk = document.querySelectorAll("table input[type=checkbox]");
for (i = 0; i < chk.length; i++) {
chk[i].addEventListener("change", function() {
selectRow(this);
});
}
function selectRow(elem) {
if (elem.checked) {
elem.parentNode.parentNode.style.backgroundColor = 'yellow';
} else {
elem.parentNode.parentNode.style.backgroundColor = '';
}
}
<table>
<thead>
<tr><th>Select</th><th>Name</th><th>Location</th></tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>Name 1</td>
<td>Location 1</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Name 2</td>
<td>Location 2</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Name 3</td>
<td>Location 3</td>
</tr>
</tbody>
</table>

Try like this if you caan use JQuery Demo
$("button").on("click", function () {
$("tr").each(function () {
$(this).removeClass("highlight");
});
$(this).closest("tr").addClass("highlight");
});
CSS:
.highlight {
background-color:#ccc;
color:#000000;
font-weight:bold;
}

$('#your_table_id').on('click', 'td', function () {
$(this).closest('tr').css({'background-color': 'red'});
});

Making an editable dropdown and populating it from an external JS

I want to make an editable dropdown, and on double click of the data the dropdown should appear and make populate the options from and external JS, this should be made to run more than once.
The following is the HTML for this
<div class="tabbable">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<table id='table-draggable1'>
<tbody class="connectedSortable">
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
<tr>
<td>156</td>
<td>668</td>
<td>100.95</td>
<td class="master">100.95</td> //editable dropdown
</tr>
<tr>
<td class="desc">256</td>
<td>668</td>
<td>100.95</td>
<td class="master">100.95</td> // ondblclick should be editable
</tr>
</tbody>
</table>
</div>
</div>
</div>
The jquery which i tried for making the dropdown editable
$document.ready(function ()
{
dropdown();
$(function ()
{
$(".master").dblclick(function (e)
{
e.stopPropagation();
var currentEle = $(e.target);
var value = $(e.target).html();
console.log($(e.target));
if ($.trim(value) === "")
{
$(currentEle).data('mode', 'add');
}
else
{
$(currentEle).data('mode', 'edit');
}
updateVal(currentEle, value);
});
});
function updateVal(currentEle, value)
{
$(currentEle).html("<select class='master'></select>");
var mode = $(currentEle).data('mode');
alert(mode);
$(".master").focus();
$(".master").keyup(function (event)
{
if (event.keyCode == 13)
{
$(this).parent().html($(this).val().trim());
$(".master").remove();
}
});
}
$(document).click(function (e)
{
if ($(".master") !== undefined)
{
if ($(".master").val() !== undefined)
{
$(".master").parent().html($(".master").val().trim());
$(".master").remove();
}
}
});
}
function dropdown()
{
var resp = "<option>" + 1 + "</option>"; //this should be populated in dropdown
$(".master").html(resp);
}
}
});
http://jsfiddle.net/tXakG/

You can accomplish this by using the datalist tag in HTML5.
<input type="text" name="product" list="productName"/>
<datalist id="productName">
<option value="a">Apple</option>
<option value="o">Orange</option>
<option value="b">Banana</option>
</datalist>
If you double click on the input text in the browser a list with the defined option will appear.
Added using javascript : data is conceded that taken from server through ajax
http://jsfiddle.net/rajaveld/7yM6V/
Else you can use jquery :
You can refer is jQuery UI for the same.