Add a barcode mulitple times based on the class before - javascript

I have a list of numbers and I need to automatically have them each turned into a barcode. I can get the first one to change, but I cannot get the ones after to change. I have a jquery barcode generator. I am pretty new to this. Please help.
<table width=180 border=0 cellpadding=0 cellspacing=0>
<tr>
<td class="barcode_needed">10133</td>
</tr>
<tr>
<td class="barcode_needed">20133</td>
</tr>
<tr>
<td class="barcode_needed">30133</td>
</tr>
</table>
<link rel="stylesheet" type="text/css" href="http://barcode-coder.com/css/style.css?ft=1298939919" />
<script type="text/javascript" src="http://barcode-coder.com/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://barcode-coder.com/js/jquery-ui-1.7.custom.min.js"></script>
<script type="text/javascript" src="http://barcode-coder.com/js/jquery-barcode-last.min.js"></script>
<script>
$("td.barcode_needed").after("<div id='bcTarget1'>");
$("#bcTarget1").barcode(('G' + $("td.barcode_needed").html()), "code128");
</script>

Your problem is that you are creating multiple <div> elements with the same id attribute. When you do this:
$("#bcTarget1")
jQuery will only find the first one and so you only get one barcode. You're also mixing up your elements by inserting a <div> as a child of a <tr>.
First, fix your HTML structure (including the duplicate id attributes):
$('td.barcode_needed').append('<div class="bcTarget">');
This puts your <div> inside the <td> (so that your element nesting is correct) and replaces the id attribute with a class.
Then, fix the barcodes by referencing the next structure.
$('.bcTarget').each(function() {
var $this = $(this);
$this.barcode(
'G' + $this.closest('td.barcode_needed').text(),
'code128'
);
});
The closest call goes up the tree to find the closest ancestor that matches the selector. You can just use text on the table cells that you find as the <div>s you just added will still be empty when you call .text.
Live example: http://jsfiddle.net/ambiguous/eaYTZ/
You'll probably want to play with the styling a bit of course.

Related

jQuery.after won't accept </tr> to end an element after starting one

I have a table that is generated by some other software, each row contains 50 columns and I'm trying to break the columns by adding a </tr><tr> to the end of a <td> element.
This is the code that is generated on the fly:
<tbody>
<tr>
<td class="col1" scope="col">08/22/2014</td>
<td class="col2" scope="col">Share</td>
<td class="col3" scope="col">Success</td>
<td class="col4" scope="col">Some notes</td>
<td class="col5" scope="col">8/23/2014</td>
...etc
<td class="col51" scope="col">End column</td>
If I use this Jquery:
$( ".col4").after('</tr><tr><td> </td>');
It appends but doesn't respect the </tr>....it ignores it and adds the <tr> on, resulting this code.
<td class="col3" scope="col">Success</td>
<td class="col4" scope="col">Some notes</td>
<tr>
<td> </td>
</tr>
<td class="col5" scope="col">etc...</td>
Wonder what the best way to get JQUERY to append that <TR> for me? When I modify the code in Firebug, breaking the rows gives me the desired output, just not sure how to get JQUERY to give me the </tr>.
jsFiddle Example
Detach the last 2 cells, append them to tbody and wrap them with tr
$('.col4').nextAll().detach().appendTo('tbody').wrapAll('<tr />')
You cannot insert tags separately using JQuery. For instance, take the following code, which inserts a <p> element into the body:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script>
$("body").append("<p>");
</script>
</body>
</html>
Using the Firefox inspector, this is what the DOM looks like:
Thus, $("...").append("<p>"), $("...").append("</p>"), $("...").append("<p></p>") all modify the DOM in the same way.
You cannot handle incomplete or illegally formatted HTML as DOM elements. You want to gather up the correctly formatted children before that column and stuff them into a new complete <tr>.
If you want to handle HTML as text, you need to turn it into text with html() and paste it together into actual, correctly closed HTML, and then convert it back.

Adding html to a table using jquery

I have html table like this:
<table cellpadding="2" cellspacing="1" width="700">
<tbody>
<tr>
<td class="dark" colspan="2">
Customer Details
</td>
</tr>
<tr>
<td>
Customer Contact Name
</td>
<td>
<input name="tbname" type="text" id="tbname" class="widetb">
</td>
</tr>
</tbody>
</table>
I want to add Some text at the start of the table so it's the first td in the table, how can I do this using jquery? I really don't have clue where to start.
I have to do it this way as I don't have access to change this via the html.
Here is a one liner :
$('td.dark').text('Enter your text here!'); // the class is present in your HTML
This will search for the td with class dark which represents the first td and it will insert the text.
In case you have multiple tables:
$('td.dark').eq(0).text('Enter your text here!');
// here 0 represents the position of the table minus 1 , you want to change the text
As example, so:
$('td', 'table').first().text('hello!');
You could try a google search next time.
The jquery method find finds the set of elements in a parent matching a selector, and eq selects a certain element from the set (with element 1 being referenced by 0 as in arrays). Therefore, you can use the following if you only have one table in your entire document:
$("table") // select all tables
.eq(0) // select the one you want (the only one)
.find("td") // select all td's
.eq(0) // select the first one (the one you want)
.html("insert new content here"); // set the td's inner html
If you have multiple tables, it's tricky. You will need the index of your table relative to other tables. For example, if you have
<table>...</table>
...
<table>...</table>
...
<table>table you are targeting</table>
.......
Then the index of your table would be 2 because it is the third table in the document, and indices start at 0. If you have an index, you can use
var table_index=// set this to the index
$("table") // select all tables
.eq(table_index) // select the one you want (with the index)
.find("td") // select all td's
.eq(0) // select the first one (the one you want)
.html("insert new content here"); // set the td's inner html
It helps if you give your table an id, then you can do something similar to:
$('#id >tbody').prepend('<tr><td>A shiny new row<td></tr>');
Give ID to that First td as your code looks like
<table cellpadding="2" cellspacing="1" width="700">
<tbody>
<tr>
<td id="firsttd" class="dark" colspan="2">
Customer Details
</td>
</tr>
<tr>
<td>
Customer Contact Name
</td>
<td>
<input name="tbname" type="text" id="tbname" class="widetb">
</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$('#firsttd').text("Your title here");
</script>
If you can't access the HTML at all and if you have multiple tables then this will work:
var newTR = $( "<tr id='newRow'/>" );
var newTRcontent = "<td colspan=1>Your New Text Here</td>";
$("table:nth-of-type(2) tbody tr").first().before(newTR);
$("#newRow").html(newTRcontent);
I made an example fiddle here
Basically it about using the proper JQuery selector so $(table:nth-of-type(2) will select the second table. Then you can use the code I have above or maybe even better yet here is a one-liner:
$("table:nth-of-type(2) tbody tr").first().before("<tr><td>Your New Text Here</td></tr>");

Removing some text data in HTML file

I am working on visualforce pages. below is given the part of HTML file code that has been generated after executing the apex code.
<table class="detailList" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr></tr>
<tr>
<td class="labelCol"></td>
<td class="dataCol col02"> userName </td>
<td class="labelCol"></td> <td class="dataCol"></td>
</tr>
<tr>
<td class="labelCol"></td>
<td class="dataCol col02"></td>
<td class="labelCol"></td>
<td class="dataCol"></td>
</tr>
</table>
I want to remove the userName anchor tag from this page which is coded in line# 6 whose class Name is "dataCol col02", and there is another anchor tag with the same class name "dataCol col02" at line# 11. keep it in mind that this html is generated by executing an APEX code. Kindly guide me how could i remove the anchor tag at line#6 only..
You can use find, first and remove methods.
$('.dataCol.col02').first().find('a').remove();
In case that you want to remove the userName textNode:
$('.dataCol.col02').first().contents().filter(function () {
return this.nodeType === 3;
}).remove();
Removing all the contents:
$('.dataCol.col02').first().empty();
Use this
$(function(){
$(".dataCol.col02:first a").remove();
});
Demo
You could do something like:
var anchor = document.getElementsByClassName("col02")[0] //select first matching 'col02'
.getElementsByTagName("a")[0] //select first matching <a>
anchor.parentNode.remove(anchor)
You can see it running here: jsfiddle
This assumes of course you only ever want to remove from the first instance of something with class='col02', so is not hugely robust. I imagine the fact it's generated means you can't put in more helpful class/id attributes?
On the flipside unlike the other answers it doesn't depend on jquery : )
Try this -
$('td.dataCol.col02').eq(0).find('a').remove();
or if you would like to empty that td -
$('td.dataCol.col02').eq(0).empty();
$("table .dataCol.col02:first a").remove();
Try this:
$("tr:eq(1) > td:eq(1)").remove()
Do this >>
$(".col02:first > a").remove();
Example Fiddle

Change with jQuery a cell of a table created with JSF

From within a xhtml page created with JSF, I need to use JavaScript / jQuery for changing the content of a cell of a table. I know how to assign a unique id to the div containing the table, and to the tbody. I can also assign unique class names to the div itself and to the target column. The target row is identified by the data-rk attribute.
<div id="tabForm:centerTabView:personsTable" class="ui-datatable ui-widget personsTable">
<table role="grid">
<tbody id="tabForm:centerTabView:personsTable_data" >
<tr data-rk="2" >
<td ... />
<td class="lastNameCol" role="gridcell">
<div> To Be Edited </div>
</td>
<td ... />
</tr>
<tr ... />
</tbody>
</table>
</div>
I have tried with many combinations of different jQuery selectors, but I am really lost. I need to search my target row and my target column inside that particular div or inside that particular table, because the xhtml page may contain other tables with different unique ids (and accidentally with the same row and column ids).
Something like this?
$("#tabForm\\:centerTabView\\:personsTable tr[data-rk=2] td.lastNameCol div").text("edited");
Or if personsTable is unique enough in the current view
$("[id$=personsTable] tr[data-rk=2] td.lastNameCol div").text("edited");
Please check this fiddle for your new html code
Fiddle without colon
Fiddle with Colon

How to remove an element without id

I have the following code:
<%-- other tags --%>
<table>
<tr width="100%">
<td width="130" />
<td id="BottomCell" width="100%" />
</tr>
<tr>
<td/>
<td/>
</tr>
</table>
<%-- other tags --%>
There may be more than one table on the page. I want the td before "BottomCell" to be removed (or hidden) when the page is loaded. How can I do this with javascript or css?
Thanks.
BTW, I'm developing a Sharepoint WebPart that will be put onto a page. The is on that page, which i don't have control of directly. But the WebPart should remove this as long as it shows up on the page.
Wow, going back to basics after using a framework is hard work.
var element = document.getElementById('BottomCell').previousSibling;
var parent = element.parentNode;
parent.removeChild(element);
In jQuery:
$('#BottomCell').prev().detach();
Well, assuming you have only one table, then you could do something like this (in javascript):
var firstCell = document.getElementsByTagName('tr')[0].getElementsByTagName('td')[0];
firstCell.parentNode.removeChild(firstCell);
It would get the first cell of the first row in the entire DOM tree, and remove that cell.
tr > td should do the trick.
Child and Sibling selectors
http://css-tricks.com/child-and-sibling-selectors/
#diodeus if there are only 2 data cells that would be acceptable, however if you wish to remove the first data cell regardless of however many cells are located in that row, you can do something like
var el = document.getElementById('BottomCell');
el.removeChild(el.parentNode.firstChild);
In jQuery I would find the parent and use the :first selector probably

Categories

Resources