I would like to change the text of a cell on toggle switch within a row where the toggle switch resides.
Table
<table class="table" id="visitor_table">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td class="item_id">
#Html.DisplayFor(modelItem => item.VisitorId)
</td>
<td class="item_firstname">
#Html.DisplayFor(modelItem => item.FirstName)
</td>
<td class="item_lastname">
#Html.DisplayFor(modelItem => item.LastName)
</td>
<td class="item_requeststatus">
#Html.DisplayFor(modelItem => item.RequestStatus)
</td>
<td id="item_checkbox">
#if (item.RequestStatus != "Pending")
{
<input id=#item.VisitorId onclick="toggleclick(#item.VisitorId)" checked="checked" class="switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">
<label for=#item.VisitorId></label>
}
else
{
<input id=#item.VisitorId onclick="toggleclick(#item.VisitorId)" class="switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">
<label for=#item.VisitorId></label>
}
</td>
</tr>
}
</tbody>
</table>
Below is what the script should be
Script
function toggleClick()
{
if cell[4] is checked{
set cell[3] to "Approved"
} else {
set cell[3] to "Pending"
}
}
My code to the effect above is still nowhere near what I want to achieve. I've searched here and other websites and none works for me. See below for my feeble attempt.
Attempt
function toggleclick(x) {
var table = document.getElementById("visitor_table");
var row = $(table).closest('tr');
var x = row.find("td:eq(0)").html();
alert(x);
}
I really need your help on this. Thank you.
You need to pass current element toggleclick function
<input id=#item.VisitorId onclick="toggleclick(this, #item.VisitorId)" checked="checked" class="switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">
toggleclick function will be like below.
Check below sample code
function toggleclick(_this, x) {
//var table = document.getElementById("visitor_table");
var row = $(_this).closest('tr');
if ($(_this).is(':checked')) // check if checkbox is checked or not
{
row.find("td:eq(3)").html("Approved"); //find 3rd cell and set HTML
} else {
row.find("td:eq(3)").html("Pending");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="item_id">
</td>
<td class="item_firstname">
</td>
<td class="item_lastname">
</td>
<td class="item_requeststatus">Approved
</td>
<td id="item_checkbox">
<input id=#item.VisitorId onclick="toggleclick(this,2)" checked="checked" class="switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">
</td>
</tr>
<tr>
<td class="item_id">
</td>
<td class="item_firstname">
</td>
<td class="item_lastname">
</td>
<td class="item_requeststatus">Approved
</td>
<td id="item_checkbox">
<input id=#item.VisitorId onclick="toggleclick(this)" checked="checked" class="switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">
</td>
</tr>
<tr>
<td class="item_id">
</td>
<td class="item_firstname">
</td>
<td class="item_lastname">
</td>
<td class="item_requeststatus">Approved
</td>
<td id="item_checkbox">
<input id=#item.VisitorId onclick="toggleclick(this)" checked="checked" class="switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">
</td>
</tr>
</tbody>
</table>
This method will do what you need it to:
function toggleClick(event) {
var
inputElement = event.target,
// This only works as long as the input is a direct child of the row.
cellElement = inputElement.parentElement,
// This will return the td before the td with the input.
previousCell = cellElement.previousSibling;
previousCell.textContent = (inputElement.checked)
? 'Approved'
: 'Pending';
}
It is not very flexible, it expects the input element to be a direct child of the td element and if you add an extra column between 3 and 4 it will also cease working as intended.
You could try finding the closest tr element and within that element look for a td with the class item_requeststatus.
Related
Can someone help to select the the first row of my html table on page load using jquery or javascript.
after the page loads, it should select/highlight the first row and put all of the data from the selected row to the input boxes.
Here is my HTML CODE
HTML
<table id="tblCases">
<thead>
<tr>
<th>CASE KEY</th>
<th>DEPARTMENT CASE</th>
<th>DEPARTMENT</th>
<th style="display: none;">DEPT CODE</th>
<th style="display: none;">CHARGE</th>
<th>OFFENSE CODE</th>
<th>LAB CASE</th>
<th>INCIDENT REPORT DATE</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<p>
<b>Case Details</b>
</p>
<table>
<tr>
<td>
Department Case
</td>
<td>
<input type="text" name="Department Case #" id="txtDepartmentCase" value="" />
</td>
</tr>
<tr>
<td>
Department
</td>
<td>
<select id="drpDepartment">
</select>
</td>
</tr>
<tr>
<td>
Charge
</td>
<td>
<select id="drpCharge">
</select>
</td>
</tr>
<tr>
<td>
Lab Case
</td>
<td>
<input type="text" name="Lab Case" id="txtLabCase" value="" />
</td>
</tr>
<tr>
<td>
Incident Report Date
</td>
<td>
<input type="text" name="Incident Report Date" id="txtIncidentReportDate" value="" />
</td>
</tr>
<tr>
<td>
<input type="hidden" name="Case key" id="txtCaseKey" value="" />
</td>
</tr>
</table>
<br />
<table>
<tr>
<td>
<input type="button" value="Edit" id="btnEdit" onclick="" />
</td>
<td>
<input type="button" value="Save" id="btnSave" onclick="SaveData(); this.form.reset();" />
</td>
<td>
<input type="button" value="Cancel" id="btnCancel" onclick="" />
</td>
</tr>
</table>
Here is my JS CODE, Here I include the onclick selection on the html table and also I include the function for populating the input boxes with the data from the selected row.
Javascript/jquery
$(function () {
///<summary> Highlights the row when selected</summary>
///<param name="editing" type="text">Editing state</param>
///<returns type="text"></returns>
$('#tblCases tr').click(function () {
if (isEditing) {
return;
}
$('#tblCases tr').removeClass('selectedRow');
$(this).addClass('selectedRow');
});
});
var table = document.getElementById("tblCases");
var rIndex;
for (var i = 1; i < table.rows.length; i++) {
///<summary>Display selected row data in text input.</summary>
///<param name="editing" type="text">Editing state</param>
/// <returns type="text"></returns>
table.rows[i].onclick = function () {
if (isEditing) {
return;
}
rIndex = this.rowIndex;
console.log(rIndex);
document.getElementById("txtCaseKey").value = this.cells[0].innerHTML;
document.getElementById("txtDepartmentCase").value = this.cells[1].innerHTML;
document.getElementById("drpDepartment").value = this.cells[3].innerHTML;
document.getElementById("drpCharge").value = this.cells[5].innerHTML;
document.getElementById("txtLabCase").value = this.cells[6].innerHTML;
document.getElementById("txtIncidentReportDate").value = this.cells[7].innerHTML;
};
}
function setEditingState(editing) {
///<summary>Defines the editing state which inlcude the behavior of buttons, input fields and row selection if a certain button was clicked</summary>
///<param name="editing" type="button; text">Editing state</param>
isEditing = editing;
// Disable or enable fields.
$('#txtDepartmentCase').attr('disabled', !editing);
$('#drpDepartment').attr('disabled', !editing);
$('#drpCharge').attr('disabled', !editing);
$('#txtLabCase').attr('disabled', !editing);
$('#txtIncidentReportDate').attr('disabled', !editing);
// Disable or enable buttons.
$('#btnEdit').attr('disabled', editing);
$('#btnSave').attr('disabled', !editing);
$('#btnCancel').attr('disabled', !editing);
}
Here's something to get you started:
var first_name = $('#source_table').find('tbody tr:first td:first').text();
var last_name = $('#source_table').find('tbody tr:first td:nth-child(2)').text();
var age = $('#source_table').find('tbody tr:first td:nth-child(3)').text();
$('#first_name').val(first_name);
$('#last_name').val(last_name);
$('#age').val(age);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="source_table" border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Joe</td>
<td>Hunt</td>
<td>20</td>
</tr>
<tr>
<td>Jane</td>
<td>Middletow</td>
<td>19</td>
</tr>
</tbody>
</table>
<br/>
<table>
<tr>
<td>First Name :</td>
<td><input type="text" id="first_name"></td>
</tr>
<tr>
<td>Last Name :</td>
<td><input type="text" id="last_name"></td>
</tr>
<tr>
<td>Age :</td>
<td><input type="text" id="age"></td>
</tr>
I want to Check or Uncheck an Checkbox which is part of an tr.
From this tr I already have the Name as Information.
I need something like "Uncheck checkbox on tr where tr.name = $name"
<tr>
<td id="klauselname">
002
</td>
<td>
50591
</td>
<td>
Text
</td>
<td id="td-center">
<input class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
<tr>
<td id="klauselname">
003
</td>
<td>
50601
</td>
<td>
Text
</td>
<td id="td-center">
<input class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
Do u have any idea? o.o
First of all , as others pointed out , IDs in your DOM should always be unique. You can use classes or other attributes for mass manipulation , but not IDs.
So lets clear the duplicate ids like this and at the same time add some IDs on your Checkboxes.
<tr>
<td id="myUniqueID_1">002</td>
<td>50591</td>
<td>Text</td>
<td class="td-center" id="myUniqueID_3">
<input id='myCheckBox_1' class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
<tr>
<td id="myUniqueID_2">003</td>
<td>50601</td>
<td>Text</td>
<td class="td-center" id="myUniqueID_4">
<input id='myCheckBox_2' class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
now we can add a function that will take care the Checkbox changes. We will use the checked property and will change it to false or true depending on our needs.
<script>
function changeState(elID){
var myCheckBoxStatus = document.getElementById(elID).checked;
if(myCheckBoxStatus)
document.getElementById(elID).checked = false;
else
document.getElementById(elID).checked = true;
}
</script>
and lets also place a button to test it out
<button onclick='changeState("myCheckBox_2");'>Toggle</button>
Here is what i am doing.. its categorized table where when clicked to button shows detail regarding otherwise remain hidden, CSS is working good for me, problem is when i click on button to display tbody nothing happens, can't get what's wrong with it. have a look on my code..
css for make him hidden unless he is not clicked,
.down1 {
display: none;
}
$(document).ready(function(){
$("#show1").click(function(){
$(".down1").toggle();
});
});
<table align="center" cellpadding="10" width="300">
<tr>
<th bgcolor="brown"></th>
<th bgcolor="brown">Day</th>
<tr>
<td align="center" bgcolor="lightgrey">
<input type="button" value="+" id="show1" />
</td>
<td align="center" bgcolor="lightgrey">Monday</td>
<tbody class="down1">
<tr>
<td>
<input type="checkbox" />
</td>
<td>9:00 -10:00 (time) </td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>9:00 -10:00 (time)</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>9:00 -10:00 (time)</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>9:00 -10:00 (time)</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>9:00 -10:00 (time)</td>
</tbody>
</tr>
</tr>
</table>
This example can help you : Example
$(document).ready(function(){
$("#show1").click(function(){
$(".down1").toggle();
if ($(this).val() == '+') {
$(this).val('-');
} else $(this).val('+');
});
});
Not sure but is this what you want?
JSfiddle:
http://jsfiddle.net/yoy5xph3/1/
$(".down1").toggle();
$("#show1").click(function(){
$(".down1").toggle();
});
I removed the css and toggled the .down1 at the start so it hides.
You can show my DEMO CODE
It's working
Jquery
$(document).ready(function(){
$("#show1").click(function(){
$(".down1").toggle();
if ($(this).val() == '+') {
$(this).val('-');
} else $(this).val('+');
});
});
Markup
<tbody class="down1">
<tr>
<td><input type="checkbox" /></td><td>9:00 -10:00 (time) </td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>9:00 -10:00 (time) </td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>9:00 -10:00 (time) </td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>9:00 -10:00 (time) </td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>9:00 -10:00 (time) </td>
</tr>
</tbody>
I would like to display the results of checkbox button selection in a pop-up screen:
for example if I selected from below: A. Airconditioning and e. Dishwasher. I want a pop-up screen that says "You Have Selected Air Conditioning and Dishwasher" that will be displayed in a click of a button lets call it "display".
<table name="BuyProduct" id ="BuyProduct_H" style="width:100%;" >
<tr>
<td class="auto-style2" colspan="3">1- What were the products that you bought? </tr>
<tr>
<td class="auto-style53"></td>
<td colspan="2" class="auto-style54">
<input id="cbconditioning" type="checkbox" onclick="Chosen()" />a. Air Conditioning</td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
<input id="cbradio" type="checkbox" onclick="Chosen()"/>b. TV Radio (TV, Home Theatre, etc.)</td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
<input id="cbrefrigeration" type="checkbox" onclick="Chosen()"/>c. Refrigeration</td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
<input id="cblaundry" type="checkbox" onclick="Chosen()"/>d. Laundry (Washer, Dryer, etc)</td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
<input id="cbdishwasher" type="checkbox" onclick="Chosen()" />e. Dishwasher</td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
<input id="cbtreatment" type="checkbox" onclick="Chosen()"/>f. Water Treatment (Water Dispencer)</td>
</tr>
<tr>
<td class="auto-style57"></td>
<td colspan="2" class="auto-style58">
<input id="cbhousewares" type="checkbox" onclick="Chosen()"/>g. Small Housewares (Microwave, Kitchen appliances, etc.)<br />
</td>
</tr>
<tr>
<td class="auto-style59"></td>
<td colspan="2" class="auto-style60">
<input id="cbothers" type="checkbox" onclick="Chosen()"/>h. Others Please Specify</td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td class="auto-style51"></td>
<td>
<asp:TextBox ID="TextBox26" runat="server"></asp:TextBox>
</td>
<td>
</td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
</td>
</tr>
<input type="button" id="chosenlaunch" onclick="Chosen()" value="Equipments Purchased"/>
</table>
This is the script that I worked on so far but it shows multiple popups instead of one including all the checked results:
function Chosen() {
if (document.getElementById('cbconditioning').checked == true) {
alert("You Chose Air Conditioning");
}
if (document.getElementById('cbradio').checked == true) {
alert("You Chose Radio");
}
if (document.getElementById('cbrefrigeration').checked == true) {
alert("You Chose Refrigeration")
}
if (document.getElementById('cblaundry').checked == true) {
alert("You Chose Laundry")
}
if (document.getElementById('cbdishwasher').checked == true) {
alert("You Chose Dishwasher")
}
if (document.getElementById('cbtreatment').checked == true) {
alert("You Chose Treatment")
}
if (document.getElementById('cbhousewares').checked == true) {
alert("You Chose Housewares")
}
if (document.getElementById('cbothers').checked == true) {
alert("You Chose Others")
}
}
You can achieve it using jquery dialog box , there are many ways , I am not giving my code here rather giving you the link , try this
JQuery dialog
I have an html table with cells that span multiple rows:
<table border="1" style=""><tbody id="x">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3">**</td>
<td>AAAA</td>
<td> </td>
</tr>
<tr id="row2">
<td>BBBB</td>
<td> </td>
</tr>
<tr>
<td>CCCC</td>
<td> </td>
</tr>
<tr>
<td style=""> </td>
<td id="ee">EEEE</td>
<td> </td>
</tr>
<tr>
<td style=""> </td>
<td id="dd">DDDD</td>
<td> </td>
</tr>
</tbody></table>
<script type="text/javascript">
alert ("index of dd before delete =" + document.getElementById("dd").cellIndex);
document.getElementById("row2").style.display="none";
alert ("index of dd after delete =" + document.getElementById("dd").cellIndex);
</script>
I am trying to manipulate it in Javascript, eg hide row2.
When I do that, the multi-row cell containing "**" moves down, shifting all the cells in row 3 by 1 to the right. Evidently I have to reduce its rowSpan.
But it seems when I am looking at row 1, I have no way of knowing that there is a multi-row cell intersecting this row - it seems I have to scan all the rows above row2 for multi-row cells.
Is there a better/quicker way to find out what multi-row cells affect the hiding (or deleting) operation?
Try this using javascript... It is working properly.
Change the value of currRowToDelete for Range [1 to 6].
Refer for working code: http://jsfiddle.net/arunkumrsingh/cdS2D/1/
<table id="tbl" border="1" runat="server" >
<tr id="row1">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row2">
<td rowspan="3">**</td>
<td>AAAA</td>
<td> </td>
</tr>
<tr id="row3">
<td>BBBB</td>
<td> </td>
</tr>
<tr id="row4">
<td>CCCC</td>
<td> </td>
</tr>
<tr id="row5">
<td style=""> </td>
<td id="ee">EEEE</td>
<td> </td>
</tr>
<tr id="row6">
<td style=""> </td>
<td id="dd">DDDD</td>
<td> </td>
</tr>
</table>
<script type="text/javascript">
var trs = document.getElementById("tbl").getElementsByTagName("tr");
var tds;
var bDeleted = false;
var currRowToDelete = 3;
for(var i=0;i<currRowToDelete;i++)
{
tds = trs[i].getElementsByTagName('td');
for(var j=0;j<tds.length;j++)
{
var currRowSpan = tds[j].rowSpan;
if(currRowSpan > 1)
{
if(eval(i + 1) == currRowToDelete)
{
var cell = document.createElement("td");
cell.innerHTML = tds[j].innerHTML;
trs[i + 1].insertBefore(cell, trs[i + 1].getElementsByTagName('td')[0]);
document.getElementById("tbl").deleteRow(i);
bDeleted = true;
document.getElementById("tbl").rows[i].cells[0].rowSpan = eval(currRowSpan -1);
}
else
{
if(eval(currRowSpan + i) >= currRowToDelete)
document.getElementById("tbl").rows[i].cells[0].rowSpan = eval(currRowSpan -1);
}
}
}
}
if(bDeleted == false)
document.getElementById("tbl").deleteRow(currRowToDelete -1);
</script>
I have a solution, in which you don't have to calculate the Rowspan and Colspan.
Step 1: Get the content of HTML (As mentioned above) and save as EXCEL file.
Step 2: Delete the particular Row (ie Row 2).
Step 3: Save as HTML file and Read the HTML content.
You will get the HTML in correct format.