I have a HTML tag like:
<tr class="evenRow" id="5"><td align="left" noWrap="nowrap">
<input id="array_5" type="checkbox" value="on"/> </td>
<td align="left" noWrap="nowrap"> SAMPLE </td>
<td align="center" id="row_at_plant_0" noWrap="nowrap" class="data-current-value" row_index="2"> 1112</td>
<td align="left" noWrap="nowrap"> 1.0457 </td>
</tr>
I have this code to get the <td> tag that has row_index attribute when array_* is checked. But it's not working in IE.
$('table#headerSelectTable input[id^="array_"]:checked').each(function() {
input = $(this).parent().parent().find('.data-current-value');
if ($(this).parent().parent().get(0).tagName == 'TR') {
rows.push(input);
}
});
Related
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. :)
My end goal with this project is to basically have a spreadsheet (really just a giant HTML table) with the contenteditable value set to true. The other thing I need is to be able to create an input box, and drag it anywhere on the screen, including on the spreadsheet. Right now, whenever I try to drag an input box, it gives me the little red circle with a line through it in the top right corner of the box, telling me that I can't drop it anywhere.
My HTML is so long because it's a huge spreadsheet, but with a couple hundred fewer rows, it basically looks like this:
$(document).ready(function() {
$("#addTileButton").click(function() {
$("body").append("<div id=draggable></div>");
var tile = $("<form><input id=tile draggable=true type=text> </form>");
$("#draggable").append(tile);
$("#tile").draggable();
});
});
td {
border: 1px solid black;
}
#tile {
cursor: move;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
</head>
<button id="addTileButton">Click to add tile</button>
<div contenteditable="true" id="tableDiv">
<table cellspacing="0" border="0">
<colgroup width="509"></colgroup>
<colgroup span="5" width="166"></colgroup>
<tr>
<td height="32" align="left" valign=bottom><b><font face="Cambria">State Name</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">GA (P)</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">C.3</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">ExCom</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">HRC</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">SC</font></b>
</td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Afghanistan</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Albania</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Algeria</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
</tr>
Thanks in advance!
EDIT - I don't need the generated element to be an input field. It just has to be an element that can have text in it.
Try making a droppable div
<div id="droppable">
...
</div>
And in Jquery
$("#droppable").droppable();
I want to only display the first 6 rows of the table and when I press a button, the previous six will be hidden and the next six will be shown.
Here is my javascript that shows the first 6 tables:
function setInnerHTML(){
<%
ArrayList userBoxList = BoxList.getInstance().getUserBoxList();
if(userBoxList.size()>6){%>
document.getElementById('down').disabled = false;
document.getElementById('page').value = counter + 1;
<% size = 6;
}
else{
size = userBoxList.size();
}
for(x=0; x < size; x++)
{
UserBox box = (UserBox) userBoxList.get(x); %>
document.getElementById(origID).onclick = changeColor;
var items = document.getElementById(origID).getElementsByTagName("td");
items[0].innerHTML = "<%=box.getInfo().getBoxNumber()%>";
items[1].innerHTML = "<%=box.getInfo().getBoxName()%>";
items[2].innerHTML = "<%=box.getInfo().getOwnerUserName()%>";
items[3].innerHTML = "<%=box.getInfo().getCurrentSize()%>" + "MB";
origID++;
<%}
%>
}
My HTML code:
<tr style="height:40px;" bgcolor="#FFFFFF" id="0">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="1">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="2">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="3">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="4">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="5">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
It's not good practice to mix logic with view. Try to use already existing components to display table.
You could choose displayTag: http://www.displaytag.org/1.2/ or datatables https://datatables.net/ or many others.
Use server side processing with ajax call to display next records.
I solved this problem by creating the table dynamically just using
> document.getElementById.style.display = "table-row" and
> document.getElementById.style.display = "none"
to hide and show the TR.
I have created a GSP page with two dynamic table with data and now i have to compare the data (inner html) and if any difference then highlight in table 2.
how to do it on clicking button using JS/jquery on clientside?
Table 1 is -
<table class="table loadTable" id ="table1">
<thead>
<tr bgcolor="#f0f0f0">
<td nowrap=""><b>COLUMN_NAME</b></td>
<td nowrap=""><b>DATA_TYPE</b></td>
<td nowrap=""><b>IS_NULLABLE</b></td>
<td nowrap=""><b>CHARACTER_MAXIMUM_LENGTH</b></td>
<td nowrap=""><b>NUMERIC_PRECISION</b></td>
<td nowrap=""><b>COLUMN_KEY</b></td>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="">CountryCode </td>
<td nowrap="">int </td>
<td nowrap="">YES </td>
<td nowrap="">NULL </td>
<td nowrap="">10 </td>
</tr>
<tr>
<td nowrap="">Number </td>
<td nowrap="">varchar </td>
<td nowrap="">NO </td>
<td nowrap="">20 </td>
<td nowrap="">NULL </td>
<td nowrap="">PRI </td>
</tr><tr>
<td nowrap="">Type </td>
<td nowrap="">tinyint </td>
<td nowrap="">NO </td>
<td nowrap="">NULL </td>
<td nowrap="">3 </td>
<td nowrap="">PRI </td>
</tr>
<tr>
<td nowrap="">Date </td>
<td nowrap="">smalldatetime </td>
<td nowrap="">NO </td>
<td nowrap="">NULL </td>
<td nowrap="">NULL </td>
</tr>
</tbody>
table 2 is -
<table class="table loadTable" id ="table2">
<thead>
<tr bgcolor="#f0f0f0">
<td nowrap=""><b>COLUMN_NAME</b></td>
<td nowrap=""><b>DATA_TYPE</b></td>
<td nowrap=""><b>IS_NULLABLE</b></td>
<td nowrap=""><b>CHARACTER_MAXIMUM_LENGTH</b></td>
<td nowrap=""><b>NUMERIC_PRECISION</b></td>
<td nowrap=""><b>COLUMN_KEY</b></td>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="">CountryCode</td>
<td nowrap="">int</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">10</td>
<td nowrap=""></td>
</tr>
<tr>
<td nowrap="">PhoneNumber</td>
<td nowrap="">varchar</td>
<td nowrap="">NO</td>
<td nowrap="">20</td>
<td nowrap="">NULL</td>
<td nowrap="">PRI</td>
</tr>
<tr>
<td nowrap="">Type</td>
<td nowrap="">tinyint</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">3</td>
<td nowrap="">PRI</td>
</tr>
<tr>
<td nowrap="">EffectiveDate</td>
<td nowrap="">datetime</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">NULL</td>
<td nowrap=""></td>
</tr>
</tbody>
</table>
if we click on following button then table 2 should get highlighted with any non matching data with table2.
<div style="align:right"><input type="submit" value="Compare IVR & TNS" /></div>
I wrote a quick function that should work as long as the number of rows is always the same and the user can't remove a row. in which case you should add id's to the rows and compare the rows by id or key.
function compareTables(t1, t2){
var t2rows = t2.find('tbody > tr');
t1.find('tbody > tr').each(function(index){
var t1row = $(this);
var t2row = $(t2rows[index]);
var t2tds = t2row.find('td');
t1row.find('td').each(function(index){
if($(this).text().trim() != $(t2tds[index]).text().trim() ){
console.log('difference: table1:('+$(this).text()+') table2:('+$(t2tds[index]).text()+')');
//set row in error
return;
}
});
});
}
I am building a website of yellopages in which I want to upload and display images on some pages.
First, I insert the image name in to the database while uploading. I want to get the image name on the parent page.
addproduct.php
<form action="" method="post" enctype="multipart/form-data" name="uploadform" id="uploadform">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="42%" align="right">Product Title </td>
<td width="1%"> </td>
<td width="118" height="118" align="center" bordercolor="#FFFFFF" bgcolor="#FFFFFF" ><iframe src="" id="fileframe" name="fileframe" width="118" height="118" scrolling="no" frameborder="0"></iframe></td>
</tr>
<tr>
<td align="right"> </td>
<td> </td>
<td onclick="whatever();">value</td>
</tr>
<tr>
<td align="right"> </td>
<td> </td>
<td><label>
<input name="thefile" type="file" id="thefile" />
upload</label></td>
</tr>
<tr>
<td align="right">Product Description </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="right"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><label>
<input name="web" type="submit" id="web" value="Continue" />
</label></td>
</tr>
</table>
</form>
Javascript in this page
function whatever() {
mmspobj=document.getElementId("fileframe");
// if (mmspobj.tagName=='iframe'){
//alert("hi");
//mmsiobj=window.frames[fileframe].document.getElementId('fileframe').value;
alert(mmspobj);
//}
}
uploader.js
function init() {
fileUploadEvents();
}
function fileUploadEvents() {
var links = document.getElementsByTagName("a");
if (links) {
for (var x=0; x<links.length; ++x) {
if (links[x].className == "uploadfile")
links[x].onclick = uploadFile;
}
}
}
function uploadFile() {
var uploadForm = document.getElementById("uploadform");
if (uploadForm) {
uploadForm.target="fileframe";
uploadForm.action="upload.php";
}
uploadForm.submit();
}
How can I get the image name in addproduct.php?
You might find it easier to have the iframe call a JavaScript function in the parent, rather than have the parent window try to read the name from the iframe.