I have the below table format . I want to implement jquery functionality when the user click on cell of Row1 of this table.
I want to merge or split the cell based on the user action.
Say , the user click on "7-8" then it has to split into two different cells like 7 and 8 with proper data.
Say , the user click on "2" then the nearest left cell has to be get merged and form a cell like "1-2" with proper data. (As given in "7-8").
Same way if he click on "4" then it should create "3-4" with proper data .
Here Row2 and Row5 cells span for 2 columns in case of merge.(Please see the existing table).
I am trying to implement this by changing the colspan values but it is not viable.
Please suggest a cleaner solution.
<table border=1 style="height:200px; border-top:0px;">
<tbody id="MySettings">
<tr>
<td width="15%">Row1</td>
<td colspan="0" width="10%">1</td>
<td colspan="0" width="10%">2<button type="button" style="float:right; margin-right:-6px; margin-top:-11px;"> </button></td>
<td colspan="0" width="10%">3</td>
<td colspan="0" width="10%">4<button type="button" style="float:right; margin-right:-6px; margin-top:-11px;"></button></td>
<td colspan="0" width="10%">5</td>
<td colspan="0" width="10%">6<button type="button" style="float:right; margin-right:-6px; margin-top:-11px;"> </button></td>
<td colspan="2" width="10%">7 - 8<button type="button" style="float:right; margin-right:-6px; margin-top:-11px;"></button></td>
</tr>
<tr id="MySettings_2">
<td>Row2</td>
<td colspan="0"> <input type="checkbox" name="CheckBox1" value="1" checked="true"></td>
<td colspan="0"> <input type="checkbox" name="CheckBox2" value="1" checked="true"></td>
<td colspan="0"> <input type="checkbox" name="CheckBox3" value="1" checked="true"></td>
<td colspan="0"> <input type="checkbox" name="CheckBox4" value="1" checked="true"></td>
<td colspan="0"> <input type="checkbox" name="CheckBox5" value="1" checked="true"></td>
<td colspan="0"> <input type="checkbox" name="CheckBox6" value="1" checked="true"></td>
<td colspan="2"> <input type="checkbox" name="CheckBox7_8" value="1" checked="true"></td>
</tr>
<tr id="Row3">
<td>Row3</td>
<td>88.98</td>
<td>33.98</td>
<td>43.34</td>
<td>123.98</td>
<td>0</td>
<td>65.43</td>
<td>33.19</td>
<td>27.8</td>
</tr>
<tr id="Row4">
<td>Row4</td>
<td>101</td>
<td>340</td>
<td>555.8</td>
<td>21</td>
<td>0</td>
<td>56</td>
<td>456</td>
<td>10</td>
</tr>
<tr id="Row5">
<td>Row5</td>
<td colspan="0">7</td>
<td colspan="0">3</td>
<td colspan="0">6</td>
<td colspan="0">0</td>
<td colspan="0">0</td>
<td colspan="0"> 4</td>
<td colspan="2">10</td>
</tr>
</tbody>
</table>
Thanks
JSfiddle Link
$("#MySettings tr:first-child .col2").click(function() {
if($(this).attr("colspan") == "0") {
$(this).attr("colspan", "2");
$(this).prev().css("display","none");
$(this).text("1-2");
}
else {
$(this).attr("colspan", "0");
$(this).text("2");
$(this).prev().css("display","table-cell");
}
});
Hope above Link help you. :)
Related
I'm need to copy some tr with inputs when onclick event is triggered, by clean JavaScript, not jQuery or something else, and generate ids for inputs. I attached my html. I'm new in js, whole what I found its copy one element. I'm be gradfull for any help.
<tr id='needToCopy'>
<tr style='height:16.5pt'>
<td></td>
<td colspan="" class="s4">
Label
</td>
</tr>
<tr style='height:18pt'>
<td></td>
<td colspan="3" class="s17">
Label1
</td>
<td class="s6">
<input id="firstID"/>
</td>
</tr>
<tr style='height:60.0pt'>
<td></td>
<td class="s15" colspan="3">
label2
</td>
<td class="s14">
<input id="secondID"/>
</td>
</tr>
<tr style='height:18.0pt'>
<td></td>
<td class="s15" colspan="3">
label3
</td>
<td class="s14">
<input id=thirdId"/>
</td>
</tr>
</tr>
<button onclick="copy()">Press Me</button>
If you are looking to copy the entire contents of the table, you can do it with a small bit of javascript. As mentioned in the comments, you can't have a table row inside a table row, so I'm not sure if you wanted your labels as table tds? For demo purposes I changed the surround <tr> to <table> tags. You can see the 'copy' functionality working in the snippet. I also added an id to your button.
EDIT: 2nd version is probably closer to what you're looking for (layout wise)
document.getElementById('copybtn').addEventListener('click', copybtn, false);
function copy() {
var html = $('#needToCopy').html();
$('#needToCopy tr:last').after("<tr>" + html + "</tr>");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!--<table id='needToCopy'>
<tr style='height:16.5pt'>
<td></td>
<td colspan="" class="s4">
Label
</td>
</tr>
<tr style='height:18pt'>
<td></td>
<td colspan="3" class="s17">
Label1
</td>
<td class="s6">
<input id="firstID" />
</td>
</tr>
<tr style='height:60.0pt'>
<td></td>
<td class="s15" colspan="3">
label2
</td>
<td class="s14">
<input id="secondID" />
</td>
</tr>
<tr style='height:18.0pt'>
<td></td>
<td class="s15" colspan="3">
label3
</td>
<td class="s14">
<input id="thirdId" />
</td>
</tr>
</table>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<h2>Labels</h2>
<table id='needToCopy'>
<tr style='height:18pt'>
<td>Label 1</td>
<td>Label 2</td>
<td>Label 3</td>
</tr>
<tr style='height:60.0pt'>
<td class="s6">
<input id="firstID">
</td>
<td class="s15">
<input id="secondID" />
</td>
<td class="s14">
<input id="thirdId" />
</td>
</tr>
</table>
<button id="copybtn" onclick="copy()">Press Me</button>
cloneNode if you want to make copy of same node in html.
var div = document.getElementById('div_id'),
clone = div.cloneNode(true); // true means clone all childNodes and all event handlers
clone.id = "some_id";
document.body.appendChild(clone);
It's quite simple if you want to copy a element inside
just use this code:
$("#IDTag").clone();
if you wish to prepend or append it, you can do that too by using:
$('#td').prependTo('#IDTag');
Be sure to give a ID to your element before you expect the results!
I have an HTML Table like the following.
<table id="items">
<tr class="total_up">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value" id="total"><div id="total">$875.00</div></td>
</tr>
<tr class="disc" id="disc">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Discount</td>
<td class="total-value" id="discount">
<div id="discount"><input type="text" name="disco" class="dis"></div>
<input type="button" id="discount" name="apply" value="apply"/>
</td>
</tr>
</table>
I want the value of the input field with class=dis to a Javascript variable. I already tried the following, but failed.I am a noob in jQuery.
$("#items #disc").val();
#disc is a tr. The input has the class dis. Try like following.
$("#items #disc .dis").val();
I have a form page and certain items only appear on the list if a link is clicked on. I want the link to hide when it is clicked on and the action it calls un-hides.
This is my test page:
function toggle_it(itemID) {
// Toggle visibility between none and ''
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = ''
event.preventDefault()
} else {
document.getElementById(itemID).style.display = 'none';
event.preventDefault()
}
}
<table width="500" border="1" cellpadding="3">
<cfform action="" method="POST">
<tr>
<td align="center"><strong>ID</strong>
</td>
<td align="center"><strong>DESCRIPTION</strong>
</td>
<td align="center">
<strong>SAY IT</strong>
</td>
</tr>
<tr>
<td align="center">a</td>
<td>
The field with no name
</td>
<td>
<cfinput type="Text" name="aaa" value="">
</td>
</tr>
<tr id="tr1" style="display:none">
<td align="center">a1</td>
<td>Add-on1</td>
<td>
<cfinput type="Text" name="a1" value="Add-on1">
</td>
</tr>
<tr id="tr2" style="display:none">
<td align="center">a2</td>
<td>Add-on2</td>
<td>
<cfinput type="Text" name="a2" value="Add-on2">
</td>
</tr>
<tr id="tr3" style="display:none">
<td align="center">a3</td>
<td>Add-on - Daily1</td>
<td>
<cfinput type="Text" name="a1d" value="Add-on - Daily1">
</td>
</tr>
<tr id="tr4" style="display:none">
<td align="center">a4</td>
<td>Add-on - Daily2</td>
<td>
<cfinput type="Text" name="a2d" value="Add-on - Daily2">
</td>
</tr>
<tr>
<td colspan=3>
<input type="submit" name="Submit" value="Submit">
</td>
</tr>
</cfform>
</table>
<!--- ----------------------------------------------------------------- --->
<table border="0">
<tr>
<td align="right">Add-on1: </td>
<td>Add-on1
</td>
</tr>
<tr>
<td align="right">Add-on2: </td>
<td>Add-on2
</td>
</tr>
<tr>
<td align="right">Add-on3 - Daily1: </td>
<td>Add-on - Daily1
</td>
</tr>
<tr>
<td align="right">Add-on4 - Daily2: </td>
<td>Add-on - Daily2
</td>
</tr>
</table>
The code is in CF but this is a JavaScript function.
BTW. Thank you whoever wrote the original script I found on Stackoverflow a while back.
Plunker
Description: Gave html elements for toggle unique ids. Also needed to update the javascript to get the parent element of the parent element of the link clicked. This only works when there are two elements to reach the tr.
Importantly, this code has an extra unhide that isn't needed...since we are hiding it and there is nothing to click.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table width="500" border="1" cellpadding="3">
<cfform action="" method="POST">
<tr>
<td align="center"><strong>ID</strong></td>
<td align="center"><strong>DESCRIPTION</strong></td>
<td align="center">
<strong>SAY IT</strong>
</td>
</tr>
<tr>
<td align="center">a</td>
<td>
The field with no name
</td>
<td>
<cfinput type="Text" name="aaa" value="">
</td>
</tr>
<tr id="tr1" style="display:none">
<td align="center">a1</td>
<td>Add-on1</td>
<td>
<cfinput type="Text" name="a1" value="Add-on1">
</td>
</tr>
<tr id="tr2" style="display:none">
<td align="center">a2</td>
<td>Add-on2</td>
<td>
<cfinput type="Text" name="a2" value="Add-on2">
</td>
</tr>
<tr id="tr3" style="display:none">
<td align="center">a3</td>
<td>Add-on - Daily1</td>
<td>
<cfinput type="Text" name="a1d" value="Add-on - Daily1">
</td>
</tr>
<tr id="tr4" style="display:none">
<td align="center">a4</td>
<td>Add-on - Daily2</td>
<td>
<cfinput type="Text" name="a2d" value="Add-on - Daily2">
</td>
</tr>
<tr>
<td colspan=3>
<input type="submit" name="Submit" value="Submit"></td>
</tr>
</cfform>
</table>
<!--- ----------------------------------------------------------------- --->
<table border="0">
<tr>
<td align="right">Add-on1: </td>
<td>Add-on1</td>
</tr>
<tr>
<td align="right">Add-on2: </td>
<td>Add-on2</td>
</tr>
<tr>
<td align="right">Add-on3 - Daily1: </td>
<td>Add-on - Daily1</td>
</tr>
<tr>
<td align="right">Add-on4 - Daily2: </td>
<td>Add-on - Daily2</td>
</tr>
</table>
</body>
</html>
JS
// Code goes here
function toggle_it(itemClickedID, itemID) {
// Toggle visibility between none and ''
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = '';
//gets the parent element of the parent element which is the row
document.getElementById(itemClickedID).parentElement.parentElement.style.display = 'none';
event.preventDefault();
} else {
event.preventDefault();
//gets the parent element of the parent element which is the row
document.getElementById(itemClickedID).parentElement.parentElement.style.display = '';
document.getElementById(itemID).style.display = 'none';
}
}
I have a table similar to the following:
Level
$1,000
$500
$100
Other Amount
The HTML is generated by a web based program that allows you to enter your desired values but does not provide an option to re-order them.
The values are ordered highest to lowest but I need them to be lowest to highest.
Here is the HTML that produced the table:
<table width="100%" id="TablePledgeLevelInner">
<tbody>
<tr>
<td width="1%"> </td>
<td>Level<br>
</td>
</tr>
<tr>
<td nowrap="">
<input type="radio" id="Radio1" onclick="SetAmount(form, 1000);" value="764853" name="PledgeLevelID">
</td>
<td>$1,000 <br>
</td>
</tr>
<tr>
<td nowrap="">
<input type="radio" id="Radio1" onclick="SetAmount(form, 500);" value="764915" name="PledgeLevelID">
</td>
<td>$500 <br>
</td>
</tr>
<tr>
<td nowrap="">
<input type="radio" id="Radio1" onclick="SetAmount(form, 100);" value="764921" name="PledgeLevelID">
</td>
<td>$100 <br>
</td>
</tr>
<tr>
<td nowrap="">
<input type="radio" id="Radio1" onclick="SetAmount(form, 0);" value="764922" name="PledgeLevelID">
</td>
<td>Other Amount <br>
</td>
</tr>
</tbody>
</table>
How would I reorder this table using Jquery or Javascript?
Thanks in advance. Any help is greatly appreciated.
Use jQuery DataTables. It'll let you sort the output and provide loads of other nice functionality out of the box.
I have a table where each row has some data and the user can submit all rows or single row or some rows. So, every row has a checkbox now and If the user checks the checkbox the background colour of this row should be changed(I have implemented this using jquery). Now there is another checkbox to select All these checkboxes, I have implemented this too with jquery. Now the issue is that when I selectAll checkboxes the row background-colour doesnot change , but when I check individual rows it gets changed. Being a novice coder I can understand that click event is not happening so the background colour is not changing. So I have used change event instead of click , but it's still the same. The functions for select All and row background colour change are working good but individually. Need help regarding this...
Thanks in advance,
NoviceCoder.
Without any of your code I tried something. See if you can apply to your code. (working example)
HTML
<table>
<thead>
<tr>
<th><input type="checkbox" name="selectAll" id="selectAll" /></th>
<th>Row name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="select" /></td>
<td>test row 0</td>
</tr>
<tr>
<td><input type="checkbox" name="select" /></td>
<td>test row 1</td>
</tr>
<tr>
<td><input type="checkbox" name="select" /></td>
<td>test row 2</td>
</tr>
<tr>
<td><input type="checkbox" name="select" /></td>
<td>test row 3</td>
</tr>
<tr>
<td><input type="checkbox" name="select" /></td>
<td>test row 4</td>
</tr>
</tbody>
</table>
CSS
.selected { background-color: #ffff00; }
Javascript
jQuery(function($) {
$('tbody :checkbox').change(function() {
$(this).closest('tr').toggleClass('selected', this.checked);
});
$('thead :checkbox').change(function() {
$('tbody :checkbox').prop('checked', this.checked).trigger('change');
});
});
this is a simple example for your request just copy/paste all this code, in new page and run it. Enjoy
<html>
<head>
<title>How to highlight the selected row in table/gridview using jquery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"
charset="utf-8"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$("#checkall").live('click',function(event){
$('input:checkbox:not(#checkall)').attr('checked',this.checked);
//To Highlight
if ($(this).attr("checked") == true)
{
//$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#FF3700");
$("#tblDisplay").find('tr:not(#chkrow)').css("background-color","#FC9A01");
}
else
{
//$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#fff");
$("#tblDisplay").find('tr:not(#chkrow)').css("background-color","#FFF");
}
});
$('input:checkbox:not(#checkall)').live('click',function(event)
{
if($("#checkall").attr('checked') == true && this.checked == false)
{
$("#checkall").attr('checked',false);
$(this).closest('tr').css("background-color","#ffffff");
}
if(this.checked == true)
{
$(this).closest('tr').css("background-color","#FC9A01");
CheckSelectAll();
}
if(this.checked == false)
{
$(this).closest('tr').css("background-color","#ffffff");
}
});
function CheckSelectAll()
{
var flag = true;
$('input:checkbox:not(#checkall)').each(function() {
if(this.checked == false)
flag = false;
});
$("#checkall").attr('checked',flag);
}
});
</script>
</head>
<body>
<table width="50%" cellspacing="0" border="0" align="left" id="tblDisplay" cellpading="0"
style="font-family: verdana; font-size: 10px;">
<thead>
<tr id="chkrow">
<th>
<input type="checkbox" id="checkall" />
</th>
<th>
Sr.
</th>
<th style="text-align: left;">
First Name
</th>
<th style="text-align: left;">
Last Name
</th>
<th>
Country
</th>
<th>
Marital Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="1" />
</td>
<td style="text-align: center;">
1
</td>
<td style="text-align: left;">
Adeel
</td>
<td style="text-align: left;">
Fakhar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="2" />
</td>
<td style="text-align: center;">
2
</td>
<td style="text-align: left;">
Omer
</td>
<td style="text-align: left;">
Fakhar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="3" />
</td>
<td style="text-align: center;">
3
</td>
<td style="text-align: left;">
Umer
</td>
<td style="text-align: left;">
Mukhtar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="4" />
</td>
<td style="text-align: center;">
4
</td>
<td style="text-align: left;">
Mark
</td>
<td style="text-align: left;">
Waugh
</td>
<td style="text-align: center;">
Australia
</td>
<td style="text-align: center;">
Married
</td>
</tr>
</tbody>
</table>
</body>
</html>