I have the following HTML report generated by a software (Navisworks):
<tr class="contentRow">
<td colspan="2" class="contentCell">
<a target="_blank" href="100+200_WS-U2-U1_default-Hard_files\cd000001.jpg ">
<img border="0" width="95" height="95" src="100+200_WS-U2-U1_default-Hard_files\cd000001.jpg">
</a>
<!-- HERE I WOULD LIKE TO INSERT A BUTTON -->
</td>
<td colspan="2" class="contentCell">Clash1</td>
<!-- more td !-->
<td class="item1Content">
<i>Element ID</i>:
509894
</td>
<!-- more contet as td !-->
<td class="item2Content"><i>Element ID</i>:
576096
</td>
<!-- more contet as td !-->
</tr>
<tr class="contentRow">
<td colspan="2" class="contentCell">
<a target="_blank" href="100+200_WS-U2-U1_default-Hard_files\cd000001.jpg ">
<img border="0" width="95" height="95" src="100+200_WS-U2-U1_default-Hard_files\cd000001.jpg">
</a>
<!-- HERE I WOULD LIKE TO INSERT A BUTTON -->
</td>
<td colspan="2" class="contentCell">Clash2</td>
<!-- more td !-->
<td class="item1Content">
<i>Element ID</i>:
509894
</td>
<!-- more contet as td !-->
<td class="item2Content"><i>Element ID</i>:
576096
</td>
<!-- more contet as td !-->
</tr>
I would like to do the following:
add a Button after each <a></a> tag
append a function that will collect the ID of the
<td class="item1Content">
<i>Element ID</i>:
509894
</td>
and the ID of the
<td class="item2Content"><i>Element ID</i>:
576096
</td>
and copies it to the clipboard
Could someone give me a starting point where to look? I am pretty new to jQuery.
Try the following code:
var rows = $('#testTable > tbody > tr');
$.each(rows, function(index, value){
$(`<input type="button" value="Get Info"/ onclick="getInfo(this)">`).appendTo($(this).find('td:first-child'))
});
function getInfo(that){
var id1 = $(that).parent().parent().find('.item1Content')[0].innerText;
var id2 = $(that).parent().parent().find('.item2Content')[0].innerText;
console.log(id1);
console.log(id2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable">
<tr class="contentRow">
<td colspan="2" class="contentCell">
<a target="_blank" href="100+200_WS-U2-U1_default-Hard_files\cd000001.jpg ">
<img border="0" width="95" height="95" src="100+200_WS-U2-U1_default-Hard_files\cd000001.jpg">
</a>
<!-- HERE I WOULD LIKE TO INSERT A BUTTON -->
</td>
<td colspan="2" class="contentCell">Clash1</td>
<!-- more td !-->
<td class="item1Content">
<i>Element ID</i>:
509894-1
</td>
<!-- more contet as td !-->
<td class="item2Content"><i>Element ID</i>:
576096-2
</td>
<!-- more contet as td !-->
</tr>
<tr class="contentRow">
<td colspan="2" class="contentCell">
<a target="_blank" href="100+200_WS-U2-U1_default-Hard_files\cd000001.jpg ">
<img border="0" width="95" height="95" src="100+200_WS-U2-U1_default-Hard_files\cd000001.jpg">
</a>
<!-- HERE I WOULD LIKE TO INSERT A BUTTON -->
</td>
<td colspan="2" class="contentCell">Clash2</td>
<!-- more td !-->
<td class="item1Content">
<i>Element ID</i>:
509894-3
</td>
<!-- more contet as td !-->
<td class="item2Content"><i>Element ID</i>:
576096-4
</td>
<!-- more contet as td !-->
</tr>
</table>
Related
I have the following form inside SharePoint 2013 web application :-
I need to remove all the Table <tr> except the ones that start with "name" & "title". so can anyone adivce how i can achieve this ? . here is part of the markup for the above image (it show two Tr on that have Content Type (should be removed), while the other contain Name ):-
<table id="formTbl" class="ms-formtable" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 8px;">
<tbody>
<tr>
<td class="ms-formlabel" valign="top" nowrap="true">
<h3 class="ms-standardheader">Content Type</h3>
</td>
<td class="ms-formbody" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Name
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<td class="ms-formbody" width="350px" valign="top">
</tr>
Now i have jquery version 1.7 loaded inside the web application, but i prefer to achieved using pure javaScript.
Thanks
EDIT here is a more detailed markup :-
<div id="contentRow">
<div id="sideNavBox" class="ms-dialogHidden ms-forceWrap ms-noList">
<div id="contentBox" aria-relevant="all" aria-live="polite">
<div id="notificationArea" class="ms-notif-box"></div>
<div id="DeltaPageStatusBar">
<div id="customcalender"></div>
<div id="DeltaPlaceHolderMain">
<a id="mainContent" tabindex="-1" name="mainContent"></a>
<div style="padding-left:5px">
<table id="onetIDListForm" class="ms-core-tableNoSpace">
<tbody>
<tr>
<td>
<div class="ms-webpart-zone ms-fullWidth">
<div id="MSOZoneCell_WebPartWPQ2" class="s4-wpcell-plain ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth ">
<div class="ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth ">
<div id="WebPartWPQ2" class="noindex " style="" allowdelete="false" width="100%" haspers="false" webpartid="6c7d849e-da6b-4138-be9f-b99bde542065">
<table class="ms-informationbar" width="100%" cellspacing="0" cellpadding="2" border="0" style="margin-bottom: 5px;">
<div id="listFormToolBarTop" style="display: none;">
<span style="display:none">
<span></span>
<table width="100%">
<tbody>
<tr>
<td width="100%" valign="top">
<table id="formTbl" class="ms-formtable" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 8px;">
<tbody>
<tr>
<td class="ms-formlabel" valign="top" nowrap="true">
<h3 class="ms-standardheader">Content Type</h3>
</td>
<td class="ms-formbody" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Name
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<tr>
When in doubt, filter is your friend:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/jjzx6mge/4/
$('#formTbl tr').filter(function () {
return !$(".ms-standardheader", this).text().match(/Name|Title/i);
}).remove();
The result returned of a function passed to filter is a boolean value telling which items to retain (truthy), or which to exclude (falsey).
This one targets only rows that have the requested text in the ms-standardheader classed element.
It also only targets a specific inner table to avoid the case of deep searching from the top level table and wiping out entire tables within it.
While you can do this with plain old JS, significantly more code is required.As you already have a version of jQuery installed, it makes sense to use it.
This would work:
$(function() {
$('#formTbl tr').each(function() {
var frstVal = $(this).find('td').eq(0).text();
if (!frstVal.match(/name|title/i)) {
$(this).remove()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="formTbl" class="ms-formtable" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 8px;">
<tbody>
<tr>
<td class="ms-formlabel" valign="top" nowrap="true">
<h3 class="ms-standardheader">Content Type</h3>
</td>
<td class="ms-formbody" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Title
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Name
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<td class="ms-formbody" width="350px" valign="top">
</tr>
This will remove every tr that has a .ms-standardheader element that contains the text Name or Title
$('#formTbl tr').each(function() {
var that = $(this);
var label = that.find('.ms-standardheader').text();
if (label.indexOf('Name') != -1 || label.indexOf('Title') != -1) {
that.remove();
}
});
And here I am, doing this the good ol' plain JS way, since you've asked for it :)
http://jsfiddle.net/m53esfpo/3/
Edit: Updated code and fiddle (thanks #TrueBlueAussie)
Removes every tr except the ones that start with name or title.
var t = document.getElementById('formTbl');
for (var i = 0; i < t.getElementsByTagName("tr").length; i++) {
var s = t.getElementsByTagName("tr")[i].getElementsByClassName('ms-formlabel');
if (s.length > 0) {
if (s[0].innerText.indexOf('Name') < 0 && s[0].innerText.indexOf('Title') < 0) {
t.getElementsByTagName("tr")[i].parentNode.removeChild(t.getElementsByTagName("tr")[i]);
}
}
}
You can do it with this:
$("#formTbl tr td h3").not("h3:contains('Name'):contains('Title')").closest('tr').remove();
I have the following HTML table:
<div class="someClass" id="someID">
<!-- Move all images inside the td's here -->
<table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;" id="mainTable">
<tbody>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="Images/9.jpg" class="bvz_beeldthumb">
</td>
<td align="center">
<img width="127" height="191" border="0" src="Images/10.jpg" class="bvz_beeldthumb">
</td>
</tr>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="Images/11.jpg" class="bvz_beeldthumb">
</td>
<td align="center">
<img width="127" height="191" border="0" src="Images/12.jpg" class="bvz_beeldthumb">
</td>
</tr>
....
</tbody>
</table>
What I want is go trough each td and remove the image and insert it before the table. And than remove the entire table.
What is the best way to do this?
Thanks.
You can use jQuery and use each() to iterate through all of the td elements and move all of the images within td before the table.
$('td').each(function(){
$('img').insertBefore('table');
$('table').hide();
});
SEE DEMO
I got this working:
WORKING FIDDLE
$(document).ready(function(){
$('.bvz_beeldthumb').each(function(){
$('.someClass').append(this);
});
$('#mainTable').remove();
});
Document ready means that when the document is ready the code will be fired.
It finds all images with class bvz_beeldthumb on the page and moves it to the div someClass. After that it removes the table.
Try This
$("#mainTable td").each(function() {
var Img=$(this).find("img");
$("#someID").prepend(Img);//here element 'id' in which you want to put these images.
$(this).find("img").html('');
});
I hope this helps you!!
You can try something like
$('#mainTable img').insertBefore('#mainTable')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;" id="mainTable">
<tbody>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=1" class="bvz_beeldthumb" />
</td>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=2" class="bvz_beeldthumb" />
</td>
</tr>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=3" class="bvz_beeldthumb" />
</td>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=4" class="bvz_beeldthumb" />
</td>
</tr>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=5" class="bvz_beeldthumb" />
</td>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=6" class="bvz_beeldthumb" />
</td>
</tr>
</tbody>
</table>
I have created form template in Mailchimp, I have been through the documentation and using all the Mailchimp tags respectively its even showing me the icons to drag/ movable content editable etc.
Whenever I edit the content its visible through the campaign test area but when i copy the block and change the positioning, it changes its position in the backend but do not show any changes on the campaign test area.
Here is some piece of the html i am using, i have checked the html for issue but i am unable to find any issues.
<tr mc:repeatable="ntwologo" mc:variant="new-layout-twologo">
<td mc:hideable align="center" valign="top" class="fix-box">
<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
<!-- start layout-3 container width 600px -->
<table width="600" align="center" border="0" cellspacing="0" cellpadding="0" class="container" bgcolor="#ffffff" style="background-color: #ffffff; ">
<tr>
<td valign="top">
<!-- start layout-3 container width 560px -->
<table width="560" align="center" border="0" cellspacing="0" cellpadding="0" class="full-width" bgcolor="#ffffff" style="background-color:#ffffff;">
<!--start space height -->
<tr>
<td height="20"></td>
</tr>
<!--end space height -->
<!-- start image content -->
<tr>
<td valign="top" width="100%">
<table class="full-width">
<tr>
<td>
<div class="heading" style="margin-bottom:20px;" mc:edit="text heading">
Most Active Canadian
</div>
</td>
</tr>
<tr>
<td class="twologos">
<img mc:allowdesigner="" mc:allowtext="" style="border:1px solid #b5ae92;" src="https://gallery.mailchimp.com/85ff5a532432ef3d1b871c206/images/dceb568a-6e4c-48b8-a2b7-1db04b6780d8.jpg" mc:edit="layoutleftlogo">
<img mc:allowdesigner="" mc:allowtext="" style="border:1px solid #b5ae92;" src="https://gallery.mailchimp.com/85ff5a532432ef3d1b871c206/images/f1eb0308-e0ad-4f6e-b15c-e5583f72a4cf.jpg" mc:edit="layoutrightlogo">
</td>
</tr>
<tr>
<td>
<div class="yaletext" mc:edit="text content">
<!-- text here -->
<br>
Read More
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- end image content -->
</table>
<!-- end layout-3 container width 560px -->
</td>
</tr>
</table>
<!-- end layout-3 container width 600px -->
</td>
</tr>
</table>
</td>
</tr>
<!-- END LAYOUT-3 -->
I would like to use the td.ms-vb-title in order to get the text 2,004, 2,005, 2,006 in the class ms-vb2 attribute.
I tried to use prev() but it didn't work...
HTML:
<tbody>
<tr iid="92,1,0" class="ms-itmhover" setedgeborder="true">
<td class="ms-vb-itmcbx ms-vb-firstCell">
<input type="checkbox" class="s4-itm-cbx"></td>
<td class="ms-vb2"></td>
<td height="100%" class="ms-vb-title" onmouseover="OnChildItem(this)" id="msomenuid2"></td>
<td class="ms-vb2">
<div align="right">2,004</div>
</td>
<td class="ms-vb2">
<div align="right">1,000</div>
</td>
<td class="ms-vb2">
<div align="right">400</div>
</td>
<td class="ms-vb2 ms-vb-lastCell">
<div align="right">600</div>
</td>
</tr>
<tr iid="92,2,0" class="ms-alternating ms-itmhover" setedgeborder="true">
<td class="ms-vb-itmcbx ms-vb-firstCell">
<input type="checkbox" class="s4-itm-cbx"></td>
<td class="ms-vb2"></td>
<td height="100%" class="ms-vb-title" onmouseover="OnChildItem(this)"></td>
<td class="ms-vb2">
<div align="right">2,005</div>
</td>
<td class="ms-vb2">
<div align="right">1,170</div>
</td>
<td class="ms-vb2">
<div align="right">460</div>
</td>
<td class="ms-vb2 ms-vb-lastCell">
<div align="right">1,200</div>
</td>
</tr>
<tr iid="92,3,0" class="ms-itmhover" setedgeborder="true">
<td class="ms-vb-itmcbx ms-vb-firstCell">
<input type="checkbox" class="s4-itm-cbx"></td>
<td class="ms-vb2"></td>
<td height="100%" class="ms-vb-title" onmouseover="OnChildItem(this)"></td>
<td class="ms-vb2">
<div align="right">2,006</div>
</td>
<td class="ms-vb2">
<div align="right">660</div>
</td>
<td class="ms-vb2">
<div align="right">1,120</div>
</td>
<td class="ms-vb2 ms-vb-lastCell">
<div align="right">780</div>
</td>
</tr>
</tbody>
Javascript:
var arrayList = $("td.ms-vb-title:contains('')");
var a = $(arrayList).prev().eq(0).find("ms-vb2");
alert(arrayList.length);
alert(a.length);
$.each(arrayList, function (i, e) {
areaname[i] = $(e).text();
});
You should use .closest()
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree
Change your code to
var a = $(arrayList).closest('tr').find(".ms-vb2");
Here the html markup having a table, i need to fetch td's content on click and save it into hidden field.
JS FIDDLE DEMO
Html Markup :
<table>
<tr style="color:#333333;background-color:#F7F6F3;" class="odd">
<td style="width:70px;" class=" sorting_1">1</td>
<td class=" "> <span id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_lblworkcategory">Customer Relations</span>
</td>
<td>one</td>
<td align="center" style="width:80px;" class=" ">
<img atl="edit" style="border-width:0px;cursor:pointer" src="images/edt1.png" class="update_1" title="Edit" id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_Image1">
</td>
<td class=" ">View Details
</td>
</tr>
<tr style="color:#333333;background-color:#F7F6F3;" class="odd">
<td style="width:70px;" class=" sorting_1">2</td>
<td class=" "> <span id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_lblworkcategory">Marketing </span>
</td>
<td>two</td>
<td align="center" style="width:80px;" class=" ">
<img atl="edit" style="border-width:0px;cursor:pointer" src="images/edt1.png" class="update_2" title="Edit" id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_Image1">
</td>
<td class=" ">View Details
</td>
</tr>
<tr style="color:#333333;background-color:#F7F6F3;" class="odd">
<td style="width:70px;" class=" sorting_1">3</td>
<td class=" "> <span id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_lblworkcategory">General</span>
</td>
<td>three</td>
<td align="center" style="width:80px;" class=" ">
<img atl="edit" style="border-width:0px;cursor:pointer" src="images/edt1.png" class="update_3" title="Edit" id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_Image1">
</td>
<td class=" ">View Details
</td>
</tr>
</table>
<input id="hdid" type="hidden" />
<input id="hdcol2" type="hidden" />
<input id="hdcol3" type="hidden" />
JavaScript:
$("img[class^='update_']").live('click', function (event) {
var getId = $(this).attr("class")
$("#hdid").val(getId);
alert(getId)
});
$(this).closest('tr').find('td').eq(1).text();
and
$(this).closest('tr').find('td').eq(2).text();
Demo -----> http://jsfiddle.net/bpGXp/19/
Updated One -----> http://jsfiddle.net/bpGXp/21/ (with no whitespace)
have a look here: http://jsfiddle.net/bpGXp/18/
CODE
$("img[class^='update_']").live('click', function (event) {
var tr = $(this).closest("tr");
var tds = $(tr).find("td");
alert($(tds[0]).text() + " | " + $(tds[1]).text() + " | " + $(tds[2]).text());
//save col1, col2 and col3 values where you need it
});
hope it helps