https://jsfiddle.net/bob90937/2yw3s376/
I am able to one sentence in one content as u can see from the following
jsp,html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<p id="sentence">a paragraph</p>
<p id="content">And this here is inside a paragraph , about paragliders. happy ending.</p>
css:
.highlighted {
background: yellow
}
javascript:
$(document).ready(function() {
var wordText = $('#sentence').text();
var rootText = $('#content').text();
var rootNode = document.getElementById('content');
highlightWord(rootText, wordText);
function highlightWord(rootText, wordText) {
textNodesUnder(rootNode).forEach(highlightWords);
function textNodesUnder(rootNode) {
var walk = document.createTreeWalker(rootNode, NodeFilter.SHOW_TEXT, null, false);
var text = [],
node;
while (node = walk.nextNode()) text.push(node);
return text;
}
function highlightWords(n) {
for (var i;
(i = n.nodeValue.indexOf(wordText, i)) > -1; n = after) {
var after = n.splitText(i + wordText.length);
var highlighted = n.splitText(i);
var span = document.createElement('span');
span.className = 'highlighted';
span.appendChild(highlighted);
after.parentNode.insertBefore(span, after);
}
}
}
});
IF i have multiple sentence and content and I save it in the table.
How to change the code so that the multiple sentence and content can be highlighted???
..
<table class="gridtable" border="1">
<tbody>
<tr>
<th>sentence</th>
<th>content</th>
</tr>
<tr>
<td id="sentence">a paragraph</td>
<td id="content">And this here is inside a paragraph , about paragliders.happy ending.</td>
<tr>
<td id="sentence">unless they were granted</td>
<td id="content">All Singaporean children of school-going age are required to regularly attend a national primary school, unless they were granted an exemption due to physical or intellectual disabilities.</td>
<tr>
<td id="sentence">efforts to</td>
<td id="content">MOE said that the change is part of the Government ongoing efforts to build a more inclusive society.</td>
</tr>
</table>
https://jsfiddle.net/bob90937/2yw3s376/ the link
You have an ID clash. You gave multiple elements ID's of content and sentence. Your Javascript is only retrieving the first one it finds.
Related
My purpose is simple is to add 'n' <td> to every <tr> in a table.
the problem i am facing is that, it is adding only one <td>, not n <td>, in the last <tr> ,not in all <tr>, with class 'n'
var actions = function(){
return { // this is going to return a long object containg a list of mny function which can be called any time
whichPattern: "pattern1",
addSlots:function(n){
var e =document.getElementById(this.whichPattern),
c = e.children[0].children,
ap_e = document.createElement('td');
for(var i=0; i<c.length; i++){
for(var j=0; j<=n; j++){
var parent = c[i];
ap_e.setAttribute("class", String(j));
parent.appendChild(ap_e);
}
};
pattern_config[this.whichPattern].WP_slotsCounter=n;
//console.log(this);
},
}
};
var pattern_config = {
pattern1:{
WP_slotsCounter:0,
},
};
window.onload = actions().addSlots(3)
<head>
<script type="text/javascript" src="actions.js" ></script>
</head>
<body>
<div id="pattern_body">
<div></div>
<table id="pattern1" border="2">
<tr class="kick instrument">
<td class='1'>gg</td>
<td class="2">dd</td>
</tr>
<tr class="snare instrument">
<td class='1'>vv</td>
<td class="2">aa</td>
</tr>
<tr class="cymbal instrument">
<td class='1'>kk</td>
<td class="2">tt</td>
</tr>
</table>
</div>
</body>
A node can exist only in one location in the tree at a time.
You can use .cloneNode(true) to make a copy to append.
var clone = ap_e.cloneNode(true);
clone.className = String(j);
parent.appendChild(clone);
I also changed setAttribute to set the className property instead.
In this particular case, since the node is really pretty simple, you may just want to create it in the same place where you're appending it instead of creating it beforehand and cloning it.
<body>
<input type="text" id="search"/>
<table id="boxdata">
<tr>
<td class="namebox1">jQuery</td>
</tr>
<tr>
<td class="namebox2">javascript</td>
</tr>
<tr>
<td class="namebox3">php</td>
</tr>
<tr>
<td class="namebox4">sql</td>
</tr>
<tr>
<td class="namebox5">XML</td>
</tr>
<tr>
<td class="namebox6">ASP</td>
</tr>
</table>
</body>
<script>
$(document).ready(function(){
$('#search').keyup(function(){
searchBox($(this).val());
});
});
function searchBox(inputVal) {
$('#boxdata').find('tr').each(function(index, row){
var names = $(row).find('td');
var found = false;
if(names.length > 0) {
names.each(function(index, td) {
var regExp = new RegExp(inputVal, 'i');
if(regExp.test($(td).text()) & inputVal != ''){
found = true;
return false;
}
});
if(found == true)
$(row).addClass("red");
else
$(row).removeClass("red");
}
});
}
</script>
there's a textfield for searching words and there are 6 words in the each 6 boxes below textfield.(I omitted css codes. but, it wouldnt matter to solve the problem.). if i type a letter 's' then the words that including letter 's' like 'javascript', 'sql', 'ASP' these font-color will be changed black to red. And i made it by using table elements in html but i'd like to change all elements into div style to put some data fluidly later. i have difficulty to fix especially jquery. how can i fix it?
You can simplify this a little bit.
function searchBox(inputVal) {
var regExp = new RegExp(inputVal, 'i');
$('#boxdata').find('tr').removeClass('red').filter(function() {
return $(this).find('td').filter(function() {
return regExp.test( $(this).text() );
}).length && $.trim(inputVal).length;
}).addClass('red');
}
So remove the red class from all <tr>'s first, then filter them, test the text of each <td>, if it matches, return the <tr> and then add the class red again.
Here's a fiddle
As for changing from a table to div, the jQuery would depend on how you structure your markup, but the principle would remain the same.
Here's another fiddle
You can make javascript code HTML agnostic by using css classes instead of element names. Demo.
function searchBox(inputVal) {
var regExp = new RegExp(inputVal = $.trim(inputVal), 'i'),
highlight = 'red';
$('#wrapper').find('.word') //instead of tr/td/div
.removeClass(highlight)
.each(function(){
var $this = $(this);
inputVal && regExp.test($this.text()) &&
$this.addClass(highlight);
});
}
Here I have an existing table:
<table>
<tr>
<td>content
</td>
</tr>
</table>
and in JavaScript, I have already obtained this table:
var isert = main_code.getElementsByTagName("table");
How to use JavaScript to attach tags to this table so it looks like:
<div id=extra>
<table>
<tr>
<td>content
</td>
</tr>
</table>
</div>
PS: It seems that insertAdjacentHTML only works on current <table>tag, not entire <table></table>.
Thank!
Try this:
var tables = main_code.getElementsByTagName("table");
for(var i = 0; i < tables.length; i++) {
var div = document.createElement("div");
var _t = tables[i];
var parent = _t.parentNode;
div.id = "extra";
parent.replaceChild(div, _t);
div.appendChild(_t);
}
Although, this adds the same id to multiple div container, if there are more than one table. You might want to use div.className = 'extra' instead.
I've done some code in html and in JavaScript ... My query is when I click on <td>, whatever the value associated with it, has to be displayed in the corresponding text box ...
In front of <td> I've taken the textbox ... for an example I've taken 3 <td> and 3 textboxes
<script type="text/javascript">
function click3(x) {
x = document.getElementById("name").innerHTML
var a = document.getElementById("txt");
a.value = x;
}
function click1(y) {
y = document.getElementById("addr").innerHTML
var b = document.getElementById("txt1");
b.value = y;
}
function click2(z) {
z = document.getElementById("email").innerHTML
var c = document.getElementById("txt2");
c.value = z;
}
</script>
this is my JavaScript code , I know this is not an adequate way to deal such problem, since its giving static way to deal with this problem
does anyone have a better solution for this problem ??
In JavaScript/jQuery
If click1, click2 and click3 are supposed to be three event then you have to keep all three function you can shorted the script code for assigning values to text field.
<script type="text/javascript">
function click3(x) {
document.getElementById("txt").value = document.getElementById("name").innerHTML;
}
function click1(y) {
document.getElementById("txt1").value = document.getElementById("addr").innerHTML;
}
function click2(z) {
document.getElementById("txt2").value = document.getElementById("email").innerHTML;
}
</script>
You can make a single function if you have single click event and shorten the code for assignment like this,
function SomeClick(x) {
document.getElementById("txt").value = document.getElementById("name").innerHTML;
document.getElementById("txt1").value = document.getElementById("addr").innerHTML;
document.getElementById("txt2").value = document.getElementById("email").innerHTML;
}
As far as I understood your question, you could try the following, assuming that's how your HTML is structured:
HTML Markup:
<table id="mytable">
<tr>
<th>Name</th>
<th>Address</th>
<th>Email</th>
</tr>
<tr>
<td class="name">Tom</td>
<td class="addr">789</td>
<td class="email">tom#dot.com</td>
</tr>
<tr>
<td class="name">Dick</td>
<td class="addr">456</td>
<td class="email">dick#dot.com</td>
</tr>
<tr>
<td class="name">Harry</td>
<td class="addr">123</td>
<td class="email">harry#dot.com</td>
</tr>
</table>
<input id="txt1" type="text" />
<input id="txt2" type="text" />
<input id="txt3" type="text" />
jQuery:
$(".name").click(function(){
$("#txt1").val($(this).text());
$("#txt2").val($(this).nextAll().eq(0).text());
$("#txt3").val($(this).nextAll().eq(1).text());
});
$(".addr").click(function(){
$("#txt2").val($(this).text());
$("#txt1").val($(this).prevAll().eq(0).text());
$("#txt3").val($(this).nextAll().eq(0).text());
});
$(".email").click(function(){
$("#txt3").val($(this).text());
$("#txt2").val($(this).prevAll().eq(0).text());
$("#txt1").val($(this).prevAll().eq(1).text());
});
DEMO: http://jsfiddle.net/Z9weS/
You can combine columns and rows. Per cell consisting id you give it th column title and
number of series it could be the index of the row combination of row and column gives the
address as per table cell by a specific event you can read the value of the id
Then you know to pull the cell value.
$('tr')
.click(function() {
ROW = $(this)
.attr('id');
$('#display_Colume_Raw')
.html(COLUME + ROW);
$('#input' + COLUME + ROW)
.show();
STATUS = $("#input" + COLUME + ROW)
.val();
});
I have the following div that contains the table and its data queried from database
<div id="content">
<table>
<tbody>
<tr>
<th class="header" colspan="2">Food items include:</th>
</tr>
<tr>
<td id="15" class="fruits">Papaya+salt</td>
<td><p>This includes papaya and salt</p></td>
</tr>
<tr>
<td class="meat">Baked chicken</td>
<td><p>This includes a chicken thide and kethup</p></td>
</tr>
<tr>
<td id="1" class="Juices">Strawberry Sting</td>
<td><p>Sugar, color and water</p></td>
</tr>
<table>
</div>
That table is defined in a page.aspx
and here is my code used to sort that table data alphabetically
OldFunc = window.onload;
window.onload = OnLoad;
function OnLoad(){
try{
var pathName = window.location.pathname.toLowerCase();
if( pathName=="/Resources/Glossary.aspx") {
sort_it();
}
OldFunc();
}
catch(e) {
}
}
function TermDefinition(def_term,def_desc)
{
this.def_term=def_term;
this.def_desc=def_desc;
}
function sort_it()
{
var gloss_list=document.getElementsByTagName('td');
var desc_list=document.getElementsByTagName('td p');
var gloss_defs=[];
var list_length=gloss_list.length;
for(var i=0;i<list_length;i++)
{
gloss_defs[i]=new TermDefinition(gloss_list[i].firstChild.nodeValue,desc_list[i].firstChild.nodeValue);
}
gloss_defs.sort(function(a, b){
var termA=a.def_term.toLocaleUpperCase();
var termB=b.def_term.toLocaleUpperCase();
if (termA < termB)
return -1;
if (termA > termB)
return 1;
return 0;
})
for(var i=0;i<gloss_defs.length;i++)
{
gloss_list[i].firstChild.nodeValue=gloss_defs[i].def_term;
desc_list[i].firstChild.nodeValue=gloss_defs[i].def_desc;
}
}
Please lookat the the two getElementsByTagName, I think I am misuse its content since nothing is done on the output.
Invalid:
desc_list=document.getElementsByTagName('td p');
You can't pass a css selector to that function, only a tag name like div\ span input etc'.
You might want to use:
desc_list = $('td p');
Since you tagged the question with jQuery, or document.querySelectorAll for vanilla js:
desc_list = document.querySelectorAll('td p');