I have something like this:
<table id="myTable">
<tr>
<td class="1">cell 1</td>
<td class="2">cell 2</td>
</tr>
<tr>
<td class="3">cell 3</td>
<!-- from here -->
<td class="4">cell 4</td>
<!-- to here -->
</tr>
</table>
What I need is to replace the all the code from cell 4 in JavaScript, I mean replace
<td class="4">cell 4</td>
with
<td id="8" class="3" title="important">cell 4</td>
I tried this:
var cell = document.getElementById("myTable").rows[1].cells;
cell[1] = newCode;
function myFunction() {
var h1 = document.getElementsByClassName("4")[0];
var atttittle = document.createAttribute("tittle");
atttittle.value = "important";
h1.setAttributeNode(atttittle);
var attid = document.createAttribute("id");
attid.value = "8";
h1.setAttributeNode(attid);
var attclass = document.createAttribute("class");
attclass.value = "3";
h1.setAttributeNode(attclass);
var element=document.getElementById("8");
alert(element.outerHTML);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table id="myTable">
<tr>
<td class="1">cell 1</td>
<td class="2">cell 2</td>
</tr>
<tr>
<td class="3">cell 3</td>
<td class="4">cell 4</td>
</tr>
</table>
<button onclick="myFunction()">Click here replace </button>
</body>
</html>
sorry for previous answer.I changed to JavaScript
You could use JQuery for that. something like this: http://api.jquery.com/replacewith/
Hope it helps
EDIT:
In your example you could use something like this:
$( ".4" ).replaceWith( "<td id="8" class="3" tittle="important">cell 4</td>" );
Related
i've searched for answers to my question with partial success but unfortunately the answer i found only changes one field not ALL fields.
I have a table on my website as follows:
<table>
<tr>
<td>1</td>
<td id="demand">DL-001</td>
<td>Description 1</td>
</tr>
<tr>
<td>2</td>
<td id="demand">DL-002</td>
<td>Description 2</td>
</tr>
<tr>
<td>3</td>
<td id="demand">DL-003</td>
<td>Description 3</td>
</tr>
</table>
This is generated by a PHP script, querying the details from a MySQL database.
What I would like to do is use jQuery to replace each of the following:
<td id="demand">DL-001</td>
with
<td id="demand">DL-001</td>
Any help would be greatly appreciated!
Edit: Added jQuery from OP's comment:
$(".demand").text('text'); replaces all tds with class "demand" contents to 'text'.
However when I use the following, it does not work:
$(".demand").text('<a href=\'order.php?d=' + data[2] + '\'>' + data[2] + '</a>');
Change your ID's to classes - ID's in a DOM must be unique, and will cause problems with most javascript.
Below is a working snippet, with the IDs changed, and sample jQuery that could be used to accomplish this.
// no-conflict safe document ready
jQuery(function($) {
// loop over all td's with the class of demand
$('td.demand').each(function() {
// load the DL-XXX into a variable (since it's used more than once)
var dl = $(this).text();
// change the td html to the link, referencing the DL-XXX number
$(this).html('' + dl + '');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td class="demand">DL-001</td>
<td>Description 1</td>
</tr>
<tr>
<td>2</td>
<td class="demand">DL-002</td>
<td>Description 2</td>
</tr>
<tr>
<td>3</td>
<td class="demand">DL-003</td>
<td>Description 3</td>
</tr>
</table>
To achieve expected result, use below option of using jquery append
$(".demand").each(function(){
var val = $(this).text()
$(this).html(''+val+'')
})
https://codepen.io/nagasai/pen/zWxbqK
Try this:
(function($) {
var demands = $(".demand");
demands.each(function() {
// Make sure to strip-off redundant calls to $(this)
// Calling $(this) once suffices
var el = $(this),
txt = el.text();
el.html($("<a>", {href: 'order.php?d='+txt, text: txt}));
});
})(jQuery);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<table>
<tr>
<td>1</td>
<td class="demand">DL-001</td>
<td>Description 1</td>
</tr>
<tr>
<td>2</td>
<td class="demand">DL-002</td>
<td>Description 2</td>
</tr>
<tr>
<td>3</td>
<td class="demand">DL-003</td>
<td>Description 3</td>
</tr>
</table>
</body>
</html>
I have the code below:
function colspan(){
var x = document.getElementById("Cell2");
x.setAttribute("colspan", 2);
x.next().remove();
}
<table border="1">
<tr>
<td id="Cell1">Cell 1</td>
<td id="Cell2">Cell 2</td>
<td id="Cell3">Cell 3</td>
</tr>
<tr>
<td id="Cell4">Cell 4</td>
<td id="Cell5">Cell 5</td>
<td id="Cell6">Cell 6</td>
</tr>
<tr>
<td id="Cell7">Cell 7</td>
<td id="Cell8">Cell 8</td>
<td id="Cell9">Cell 9</td>
</tr>
</table>
<input type="button" onclick="colspan();" value="Change"/>
I would like to delete the next cell of the current cell I have called. When the Cell 2 is colspan, the Cell 3 should be removed, but I use .next().remove() is not working. Anyone can help?
This is something you could do.
function colspan() {
var ele = document.getElementById("Cell2");
ele.setAttribute("colspan", 2);
if (ele.nextElementSibling) {
ele.nextElementSibling.remove();
}
}
<table border="1">
<tr>
<td id="Cell1">Cell 1</td>
<td id="Cell2">Cell 2</td>
<td id="Cell3">Cell 3</td>
</tr>
<tr>
<td id="Cell4">Cell 4</td>
<td id="Cell5">Cell 5</td>
<td id="Cell6">Cell 6</td>
</tr>
<tr>
<td id="Cell7">Cell 7</td>
<td id="Cell8">Cell 8</td>
<td id="Cell9">Cell 9</td>
</tr>
</table>
<input type="button" onclick="colspan();" value="Change" />
I think you are mixing jQuery and pure JS..
You should use nextSibling() & removeChild(element) on parent.
have a look here: Remove element by id
The last remove() function was on jquery function. so use jquery library link and call the id with jquery type.
function colspan(){
var x = document.getElementById("Cell2");
x.setAttribute("colspan", 2);
$('#Cell2').next().remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td id="Cell1">Cell 1</td>
<td id="Cell2">Cell 2</td>
<td id="Cell3">Cell 3</td>
</tr>
<tr>
<td id="Cell4">Cell 4</td>
<td id="Cell5">Cell 5</td>
<td id="Cell6">Cell 6</td>
</tr>
<tr>
<td id="Cell7">Cell 7</td>
<td id="Cell8">Cell 8</td>
<td id="Cell9">Cell 9</td>
</tr>
</table>
<input type="button" onclick="colspan();" value="Change"/>
What I am trying to do is onLoad essentially, find all id's of each td, that has a number 1-7 and replace it with the image that corresponds with that number i.e.
<td id="7" class="level">7</td>
would change the 7, the content to ...
<td id="7" class="level"><img src="../img/CL7.png" alt=""></td>
So what i have so far is as follows:
$(document).ready(function()
{
$("td").click(function()
{
var findID =$(this).attr('id');
var replace ="<img src=\"../img/cl"+ findID +".png\" alt=''>";
function ReplaceCellContent(findID, replace)
{
return $("tbody tr td.level:contains('" + findID + "')").html(replace);
}
var myStringArray = [1,2,3,4,5,6,7];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
ReplaceCellContent(findID, replace);
}
});
});
So it will go, find all of the ID's of the td's onclick of each td. I want it to do this to ALL of the ids ranging from 1-7, when the page loads.
I am somewhat new to JQuery/JavaScript,I DO HAVE THE SCRIPT LINK TO JQUERY API THROUGH GOOGLE FYI, so any explanation would be greatly appreciated as well. I was trying to use the loop at the bottom to loop through all of the possible numbers and just plug them in but i can't think of how to connect each back to of its original td, which had had that ID.
the HTML Table that the JQuery needs to change looks like this, written out:
<table class="sortable">
<thead>
<tr>
<th>Player Name</th>
<th>Level</th>
</tr>
</thead>
<tbody>
<tr>
<td>Krack</td>
<td id="7" class="level">7</td>
</tr>
<tr>
<td>Lively</td>
<td id="6" class="level">6</td>
</tr>
<tr>
<td>Bamon Williams</td>
<td id="6" class="level">6</td>
</tr>
<tr>
<td>Sinister Char</td>
<td id="5" class="level">5</td>
</tr>
<tr>
<td>Senior BoomBox</td>
<td id="5" class="level">5</td>
</tr>
<tr>
<td>Blitzking</td>
<td id="4" class="level">4</td>
</tr>
<tr>
<td>Hadooooken</td>
<td id="2" class="level">2</td>
</tr>
<tr>
<td>Jumpman2392</td>
<td id="2" class="level">2</td>
</tr>
<tr>
<td>ALEC*</td>
<td id="2" class="level">2</td>
</tr>
<tr>
<td>Frokido</td>
<td id="2" class="level">2</td>
</tr>
<tr>
<td>B. McOxbig</td>
<td id="2" class="level">2</td>
</tr>
<tr>
<td>[MES] Koko</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>PinkStrank</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>papa von</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>Nuski</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>LunchBoxes</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>Grenade65</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>[MGS]TOAD</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>NoahS</td>
<td id="1" class="level">1</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
jQuery is great, but I don't recommend it for everything and especially not until you really have a good understanding of JavaScript, so this solution only uses jQuery to register a function to be called when the page is ready for interaction:
// When the document is ready, run the following function:
$(function(){
// Get all the TD elements:
var allTheTDs = document.querySelectorAll("td.level");
// Loop through the array of all the TD elements
for(var i = 0; i < allTheTDs.length; ++i){
// Check to see if the current TD has an ID of 7 or less
if(allTheTDs[i].id <=7 ){
// Remove the current content of the TD
allTheTDs[i].innerHTML = "";
// Create a new img element
var img = document.createElement("img");
// Configure the new img element to have a src attribute value
// that is based on the id value
img.src = "../img/CL" + allTheTDs[i].id + ".png";
// Give the img an alt to match the src, just to show
// it works
img.alt = "../img/CL" + allTheTDs[i].id + ".png";
// Append the new image into the current TD
allTheTDs[i].appendChild(img);
}
}
});
Here's a working fiddle: https://jsfiddle.net/96hkhy4j/4/
You may do something like this
$(document).ready(function() {
var myStringArray = [1,2,3,4,5,6,7];
for (var i = 1; i <= myStringArray.length; i++) {
var findID = i;
var replace ="<img src=\"../img/cl"+ findID +".png\" alt=''>";
ReplaceCellContent(findID, replace);
}
function ReplaceCellContent(findID, replace) {
return $("tbody tr td.level:contains('" + findID + "')").html(replace);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="sortable">
<thead>
<tr>
<th>Player Name</th>
<th>Level</th>
</tr>
</thead>
<tbody>
<tr>
<td>Krack</td>
<td id="7" class="level">7</td>
</tr>
<tr>
<td>Lively</td>
<td id="6" class="level">6</td>
</tr>
<tr>
<td>Bamon Williams</td>
<td id="6" class="level">6</td>
</tr>
<tr>
<td>Sinister Char</td>
<td id="5" class="level">5</td>
</tr>
<tr>
<td>Senior BoomBox</td>
<td id="5" class="level">5</td>
</tr>
<tr>
<td>Blitzking</td>
<td id="4" class="level">4</td>
</tr>
<tr>
<td>Hadooooken</td>
<td id="2" class="level">2</td>
</tr>
<tr>
<td>Jumpman2392</td>
<td id="2" class="level">2</td>
</tr>
<tr>
<td>ALEC*</td>
<td id="2" class="level">2</td>
</tr>
<tr>
<td>Frokido</td>
<td id="2" class="level">2</td>
</tr>
<tr>
<td>B. McOxbig</td>
<td id="2" class="level">2</td>
</tr>
<tr>
<td>[MES] Koko</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>PinkStrank</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>papa von</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>Nuski</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>LunchBoxes</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>Grenade65</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>[MGS]TOAD</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>NoahS</td>
<td id="1" class="level">1</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
Just replace line 3 with this..
$(document).ready(function()
{
$("tbody td").each(function()
{
var findID =$(this).attr('id');
var replace ="<img src=\"../img/cl"+ findID +".png\" alt=''>";
function ReplaceCellContent(findID, replace)
{
return $("tbody tr td.level:contains('" + findID + "')").html(replace);
}
var myStringArray = [1,2,3,4,5,6,7];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
ReplaceCellContent(findID, replace);
}
});
});
Hi you just add jQuery and try this way
<script src="jquery-2.2.1.min.js"></script>
<script>
$('table tr td:nth-child(2)').each(function() {
var id =$(this).attr('id');
$(this).html('<img src="../img/CL'+id+'.png" alt="">')
});
</script>
<head>
<script src= "http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
</head>
<body>
<table width="779" border="5" id="test">
<tr class="tablerow">
<td>ee</td>
<td>11</td>
<td>test</td>
<td>3</td>
<td>15974079
</tr>
<tr>
<td>ww1</td>
<td>hi</td>
<td>test2</td>
<td>d</td>
<td>15859779
</tr>
<tr class="tablerow">
<td>ww2</td>
<td>hi</td>
<td>test2</td>
<td>t </td>
<td>15974386</td>
</tr>
<tr>
<td>ww2</td>
<td>hi</td>
<td>test4</td>
<td>e</td>
<td>15974386</td>
</tr>
<tr>
<td>ww4</td>
<td>hi</td>
<td>test5</td>
<td>d</td>
<td>15974652</td>
</tr>
<tr>
<td>sssd</td>
<td>fgdg</td>
<td>test6</td>
<td>dzz</td>
<td>15974652</td>
</tr>
<tr>
<td>sssd</td>
<td>d</td>
<td>test7</td>
<td>d</td>
<td>15974652</td>
</tr>
</table>
<script>
var arr = $("#test tr");
$.each(arr, function(i, item) {
var currIndex = $("#test tr").eq(i);
var matchText = currIndex.children("td").eq(2).text();
$(this).nextAll().each(function(i, inItem) {
if(matchText===$(this).children("td").eq(2).text()) {
$(this).remove();
}
});
});
</script>
</body>maybe is duplicate question but i tried many links and couldn't get my answer.
I need to remove duplicate row base on third column, not first one
use eq instead first, but its not work probably,actually in very small table works but when the number or rows and columns get big its doesn't work
for example:
doesn't display forth row even not duplicate when i choose eq(4)or eq(2)
in row "ww4"
i checked this one
but its only work with first column
i tried this one too but that one is check all column in row not only base on one columns i need check only value of third row
<head>
<script src= "http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
</head>
<body>
<table width="779" border="5" id="test">
<tr class="tablerow">
<td>ee
<td>11
<td>test
<td>
<td>15974079 </tr>
<tr>
<td>ww1
<td>hi
<td>test2
<td>
<td>15859779 </tr>
<tr class="tablerow">
<td>ww2
<td>hi
<td>test2
<td>
<td>15974386 </tr>
<tr>
<td>ww2
s<td>hi
<td>test4
<td>
<td>15974386 </tr>
<tr>
<td>ww4
<td>hi
<td>test5
<td>
<td>15974652 </tr>
<tr>
<td>sssd
<td>fgdg
<td>test6
<td>dzz
<td>15974652
</tr>
<tr>
<td>sssd
<td>
<td>test7
<td>
<td>15974652</tr>
</table>
<script>
var arr = $("#test tr");
$.each(arr, function(i, item) {
var currIndex = $("#test tr").eq(i);
var matchText = currIndex.children("td").eq(2).text();
$(this).nextAll().each(function(i, inItem) {
if(matchText===$(this).children("td").eq(2).text()) {
$(this).remove();
}
});
});
</script>
</body>
try this
var seen = {};
$('table tr').each(function() {
var txt = $(this).children("td:eq(2)").text();
if (seen[txt])
$(this).remove();
else
seen[txt] = true;
});
http://jsfiddle.net/VbUxd/440/
Hi guys I have a repeating table that has many TR rows that looks like this:
<table>
<tr class="RowStyle" style="background-color:White;">
<td>field 1</td>
<td>field 2</td>
<td>field 3</td>
<td class="selector">field 4</td>
<td>field 5</td>
</tr>
<tr class="RowStyle" style="background-color:White;">
<td>field 1</td>
<td>field 2</td>
<td>field 3</td>
<td class="selector"> </td>
<td>field 5</td>
</tr>
<tr class="RowStyle" style="background-color:White;">
<td>field 1</td>
<td>field 2</td>
<td>field 3</td>
<td class="selector"> </td>
<td>field 5</td>
</tr>
Jquery:
if ( $('.selector').val() = ' ' ) {
$('.RowStyle').css('background-color', 'red');
}
I need to some how be able to say if text = nothing or   then change the style of the background, can anyone help me with this - here is my fiddle...
try this
$('.selector').each(function(i, element){
if($(element).text().trim().length == 0)
{
$(element).parent().css('background-color', 'red');
}
});
Fiddle Demo
Try,
$('.selector').filter(function(){
return $.trim($(this).text()) === ""
}).closest('tr').css('background-color', 'red');
DEMO
Try this:
$('.selector').each(function(){
if (!$(this).text().trim().length) {
$(this).closest('.RowStyle').css('background-color', 'red');
}});
Demo
try
if ( !$('.selector').text().length || $('.selector').html() == ' ' ) {
$(this).parent().css('background-color', 'red');
}