Yesterday I asked a question and, "with a little help from my friends" got my little javascript working.
This one:
<script type="text/javascript" >
function paint_cells() {
var tds = document.querySelectorAll('tbody td'), i;
for(i = 0; i < tds.length; i += 3) {
if(tds[i+1].textContent != tds[i+2].textContent){
tds[i+2].bgColor = "red";
}
}
}
paint_cells();
</script>
Now I would like to tweak this to cater for multiple correct answers. For example, both
'don't hurry' or 'do not hurry' are correct. In my MySQL table, they are stored as a string like this:
don't hurry|do not hurry
I want to split the string on | and then check if the student's answer is in the array (same as I do in PHP when marking the answers).
Not all answers have multiple correct answers. I hope that is not a problem for .split()??
I tried this, but I am not getting the result I want. Can you please help me tweak this to give me the result I want?
Edit: I thought maybe the apostrophes were causing the problem, so I escaped them. I trimmed each variable.
But I still don't get what I want! Any tips please?
<script type="text/javascript" >
function paint_cells() {
var tds = document.querySelectorAll('tbody td'), i;
for(i = 0; i < tds.length; i += 3) {
var arr = tds[i+1].textContent.split('|');
for(j = 0; j < arr.length; j++) {
arr[j].trim();
arr[j].replace(/'/g, "\'");
}
var myvar = tds[i+2].textContent;
myvar.trim();
myvar.replace(/'/g, "\'");
//console.log("Your line would be here")//Prints a line on the console
if(!arr.includes(myvar)){
//if(arr[0] != myvar){
alert('Array length: ' + arr.length + ' Answers: ' + tds[i+1].textContent + ' Student answer:' + myvar);
tds[i+2].bgColor = "red";
}
}
}
paint_cells();
</script>
Quotes don't matter. You have to reset the array to the trimmed value... trim returns the modified value, it doesn't "change in place".
var arr = answers.split('|');
for(var ii=0; ii<arr.length; ii++){
arr[ii] = arr[ii].trim().toLowerCase();
}
Here's a working example (run code snippet below):
function paint_cells() {
var tds = document.querySelectorAll('tbody td');
for (var i = 0; i < tds.length; i += 3) {
var cell_1 = tds[i + 1];
var cell_2 = tds[i + 2];
var answers = cell_1.textContent;
var arr = answers.split('|');
for (var ii = 0; ii < arr.length; ii++) {
arr[ii] = arr[ii].trim().toLowerCase();
}
var guess = (cell_2.textContent || "").trim().toLowerCase();
//console.log("Your line would be here")//Prints a line on the console
if (arr.indexOf(guess) < 0) {
console.log('Array length: ' + arr.length + ' Answers: ' + answers + ' Student answer:' + cell_2.textContent);
cell_2.style.backgroundColor = "red";
}
}
}
paint_cells()
<table>
<tbody>
<tr>
<td></td>
<td>don't hurry|do not hurry</td>
<td>do not hurry</td>
</tr>
<tr>
<td></td>
<td>don't hurry|do not hurry</td>
<td>don't hurry</td>
</tr>
<tr>
<td></td>
<td>don't hurry|do not hurry</td>
<td>abc</td>
</tr>
<tr>
<td></td>
<td>don't hurry|do not hurry</td>
<td>xyz</td>
</tr>
</tbody>
</table>
Related
I am trying to send a dynamic TD of table which returned 3 values..I am using the line below to submit the value...I want to be able to pass all three values to a URL LIKE THIS 778, 44, 45
function JSalert() {
// var valueID = document.getElementById('idweek1').innerHTML
var data = document.querySelectorAll('[name=idweek1]');
for (var i = 0; i < data.length; i++) {
theids = data[i].className + " " + data[i].childNodes[0].nodeValue;
window.location = 'http://localhost/bcwater/public/submitinvestment/'+value8+'/'+theids;
}
}
<td id="idweek1" name="idweek1">778</td>
<td id="idweek1" name="idweek1">44</td>
<td id="idweek1" name="idweek1">55</td>
I was able to get it done using the method below
var array_of_name = [];
var elements_arr = document.getElementsByClassName("idweek1");
for (var i in elements_arr) {
array_of_name.push(elements_arr[i].innerHTML);
}
console.log("TRGY",array_of_name);
So when i pass the variable to the URL it works fine
window.location = 'http://localhost/bcwater/public/submitinvestment/'+value8+'/'+array_of_name;
Basically nothing with your code, except it's missing <table> & <tbody> elements.
var data = document.querySelectorAll('[name=idweek1]');
var value8 = 88888888;
for (var i = 0; i < data.length; i++) {
id = data[i].childNodes[0].nodeValue;
console.log(id);
console.log('http://localhost/bcwater/public/submitinvestment/' + value8 + '/' + id);
}
// window.location.href = 'http://localhost/bcwater/public/submitinvestment/' + value8 + '/' + id;
<table>
<tbody>
<tr>
<td id="idweek1" name="idweek1">778</td>
<td id="idweek1" name="idweek1">44</td>
<td id="idweek1" name="idweek1">55</td>
</tr>
</tbody>
</table>
I'm trying my hand at web development and one of my early projects is to create a grid that is mutable in size and responds to mouse events.
For some reason (I'm sure there is a good one), my function to change the grid size doesn't always remove all of the necessary rows.
Ex. When changing the grid size from 10 to 4, or 6 to 2, there are additional rows that are not removed
CODE PEN
HTML
<!DOCTYPE html>
<html>
<head>
<title>My Grid</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='container'>
<div id='userSettings'>
<h1>Welcome to "My Grid"</h1>
<form>
<input id='gridSizeValue' type='text' name="gridSize">
<input id='button' type='button' value="Change Grid Size">
</form>
</div>
<table class='mainTable' style="border-color: black; border-top-width: 5px;">
<tr class="tableRow">
<td class="tableColumn">
<td class="tableColumn">
<td class="tableColumn">
<td class="tableColumn">
</tr>
<tr class="tableRow">
<td class="tableColumn">
<td class="tableColumn">
<td class="tableColumn">
<td class="tableColumn">
</tr>
<tr class="tableRow">
<td class="tableColumn">
<td class="tableColumn">
<td class="tableColumn">
<td class="tableColumn">
</tr>
<tr class="tableRow">
<td class="tableColumn">
<td class="tableColumn">
<td class="tableColumn">
<td class="tableColumn">
</tr>
</table>
</div>
JavaScript
$(document).ready(function(){
$('#button').click(function(){
var gridSize = document.getElementById('gridSizeValue').value;
var amountOfTableRows = document.getElementsByClassName('tableRow').length;
setTableRows(amountOfTableRows, gridSize);
});
styleTable();
});
function setTableRows(currentAmountOfRows, newGridSize) {
// Check if the number of rows is less than or greater than current amount of rows
// either add or subtract rows
// loop through rows and either add or subtract columns
if (newGridSize > currentAmountOfRows) {
var rowsToAdd = newGridSize - currentAmountOfRows;
for (var i = 0; i < rowsToAdd; i++) {
$('.mainTable').append("<tr class=\"tableRow\"></tr>");
}
newAmountOfRows = document.getElementsByClassName('tableRow');
for (var i = 0; i < newAmountOfRows.length; i++) {
currentAmountOfColumnsInRow = newAmountOfRows[i].getElementsByClassName('tableColumn').length;
columnsToAdd = newGridSize - currentAmountOfColumnsInRow;
// console.log("Need to add " + columnsToAdd + "columns");
for (var j = 0; j < columnsToAdd; j++) {
$('.tableRow:nth-child(' + (i+1) +')').append("<td class=\"tableColumn\">");
}
}
}
else if (newGridSize < currentAmountOfRows){
var rowsToSubtract = currentAmountOfRows - newGridSize;
for (var i = 0; i < rowsToSubtract; i++) {
$('.tableRow:nth-child(' + (i+1) +')').remove();
}
newAmountOfRows = document.getElementsByClassName('tableRow');
for (var i = 0; i < newAmountOfRows.length; i++) {
currentAmountOfColumnsInRow = newAmountOfRows[i].getElementsByClassName('tableColumn').length;
columnsToSubtract = currentAmountOfColumnsInRow - newGridSize;
// console.log("There are " + currentAmountOfColumnsInRow + " columns in row" + (i+1));
for (var j = 0; j < columnsToSubtract; j++) {
$('.tableColumn:nth-child(' + (i+1) +')').remove();
}
}
}
styleTable();
}
function styleTable(){
$('td').mouseenter(function(){
$(this).css("background-color","white");
});
$('td').mouseleave(function(){
$(this).css("background-color","black");
});
//Option 1: set height and width of each "cell" to the total height of table / cound of rows
// rowHeight = $('td').eq(0).height();
tableHeight = 400;
// alert("The Table Height is" + tableHeight);
numberOfRows = document.getElementsByClassName('tableRow').length;
// alert("rows " + numberOfRows);
dynamicCellHeight = (tableHeight / numberOfRows);
// alert("The Cell Height is " + dynamicCellHeight);
cellHeightInt= Number(dynamicCellHeight);
$('td').height(cellHeightInt);
$('td').width(cellHeightInt);
}
When you already have 6 rows and change the size 2, your code will call pass through the else statement, where you do :
for (var i = 0; i < rowsToSubtract; i++) {
$('.tableRow:nth-child(' + (i+1) +')').remove();
}
You are subtracting 4 rows, so actually the code is executing:
$('.tableRow:nth-child(1)').remove();
$('.tableRow:nth-child(2)').remove();
$('.tableRow:nth-child(3)').remove();
// at this point your table has 3 rows
$('.tableRow:nth-child(4)').remove();
So at the last line, you are trying to remove the fourth line of a table which has 3 rows ... so nothing happens.
You could invert the for loop looping backwards from rowsToSubtract to 0, that would solve your problem. But there are better ways to do this...
Just explaining why it's going wrong here :)
(Concurrent issue?)
for (var i = rowsToSubtract; i > 0; i--) {
$('.tableRow:nth-child(' + (i) +')').remove();
}
When rows are being subtracted from 8 to 2 (by 6), starting from removing 5th row, you can't do remove since it does not exist.
And yep, the code to remove columns for each row should also be fixed like aforementioned:
for (var j = columnsToSubtract; j > 0; j--) {
$('.tableColumn:nth-child(' + (i) +')').remove();
}
Thank you both very much for your help, it makes sense that what I was was trying to remove items that the code has no reference to and therefor does nothing.
I rewrote the code in a much simpler function to simply redraw the table in a much more concise way.
function drawNewTable(newGridSize){
$('.mainTable').remove();
// Draw New Grid -> Add Table -> Add Rows -> Add Column
$('.tableDiv').append("<table class='mainTable'>")
for(var i = 0; i < newGridSize; i++){
$('.mainTable').append("<tr class='tableRow'>");
for(var j = 0; j < newGridSize; j++){
$('.tableRow:nth-child(' + (i+1) +')').append("<td class=\"tableColumn\">");
}
$('.mainTable').append("</tr>");
}
$('.tableDiv').append("</table>");
styleTable();
}
I need to compare two HTML tables' rows assuming that data in first cell can be duplicated but data in second cell is always unique. I need to find whether first cell AND second cell in table1 is the same as data in first cell AND second cell in table2 for instance:
Table1:
<Table>
<tr>
<td>123</td>
<td>321</td>
</tr>
<tr>
<td>545</td>
<td>345</td>
</tr>
<tr>
<td>0</td>
<td>312</td>
</tr>
<tr>
<td>123</td>
<td>323331</td>
</tr>
</Table>
Second table:
<table>
<tr>
<td>545</td>
<td>345</td>
</tr>
<tr>
<td>545</td>
<td>3122</td>
</tr>
<tr>
<td>123</td>
<td>321</td>
</tr>
</table>
The result of this should be:
123 321 - good, do nothing
545 345 - good, do nothing
545 3122 - wrong its not in table1 <-
Here's what I've got so far...
$('#runCheck').click(function(){
var firstTable = $('#firstDiv table tr');
var secondTable = $('#secDiv table tr');
$(secondTable).each(function(index){
var $row = $(this);
var secTableCellZero = $row.find('td')[0].innerHTML;
var secTableCellOne = $row.find('td')[1].innerHTML;
$(firstTable).each(function(indexT){
if ($(this).find('td')[0].innerHTML === secTableCellZero){
if ($(this).find('td')[1].innerHTML !== secTableCellOne){
$('#thirdDiv').append("first: " + secTableCellZero + " second: " + secTableCellOne+"<br>");
}
}
});
});
});
Where am I going it wrong?
Just to clarify once again:
2nd table says :
row1 - john|likesCookies
row2 - peter|likesOranges
1st table says :
row1 - john|likesNothing
row2 - john|likesCookies
row3 - steward|likesToTalk
row4 - peter|likesApples
now it should say :
john - value okay
peter - value fail.
a lot alike =VLOOKUP in excel
Check this working fiddle : here
I've created two arrays which store values in each row of tables 1 and 2 as strings. Then I just compare these two arrays and see if each value in array1 has a match in array 2 using a flag variable.
Snippet :
$(document).ready(function() {
var table_one = [];
var table_two = [];
$("#one tr").each(function() {
var temp_string = "";
count = 1;
$(this).find("td").each(function() {
if (count == 2) {
temp_string += "/";
}
temp_string = temp_string + $(this).text();
count++;
});
table_one.push(temp_string);
});
$("#two tr").each(function() {
var temp_string = "";
count = 1;
$(this).find("td").each(function() {
if (count == 2) {
temp_string += "/";
temp_string = temp_string + $(this).text();
} else {
temp_string = temp_string + $(this).text();
}
count++;
});
table_two.push(temp_string);
});
var message = "";
for (i = 0; i < table_two.length; i++) {
var flag = 0;
var temp = 0;
table_two_entry = table_two[i].split("/");
table_two_cell_one = table_two_entry[0];
table_two_cell_two = table_two_entry[1];
for (j = 0; j < table_one.length; j++) {
table_one_entry = table_one[j].split("/");
table_one_cell_one = table_one_entry[0];
table_one_cell_two = table_one_entry[1];
console.log("1)" + table_one_cell_one + ":" + table_one_cell_two);
if (table_two_cell_one == table_one_cell_one) {
flag++;
if (table_one_cell_two == table_two_cell_two) {
flag++;
break;
} else {
temp = table_one_cell_two;
}
} else {}
}
if (flag == 2) {
message += table_two_cell_one + " " + table_two_cell_two + " found in first table<br>";
} else if (flag == 1) {
message += table_two_cell_one + " bad - first table has " + temp + "<br>";
} else if (flag == 0) {
message += table_two_cell_one + " not found in first table<br>";
}
}
$('#message').html(message);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<table id="one">
<tr>
<td>123</td>
<td>321</td>
</tr>
<tr>
<td>545</td>
<td>345</td>
</tr>
<tr>
<td>0</td>
<td>312</td>
</tr>
<tr>
<td>123</td>
<td>323331</td>
</tr>
</table>
<hr>
<table id="two">
<tr>
<td>545</td>
<td>345</td>
</tr>
<tr>
<td>545</td>
<td>3122</td>
</tr>
<tr>
<td>123</td>
<td>321</td>
</tr>
</table>
<hr>
<div id="message">
</div>
</div>
If I understand your requirements, it would be easier to read the first table and store the couples as strings: 123/321, 545/345, etc...
Than you can read the second table and remove from the first list all the rows found in both.
What remains in the list are couples that do not match.
From purely an efficiency standpoint if you loop through the first table just once and create an object using the first cell value as keys and an array of values for second cells, you won't have to loop through that table numerous times
this then makes the lookup simpler also
var firstTable = $('#firstDiv table tr');
var secondTable = $('#secDiv table tr');
var firstTableData = {}
firstTable.each(function() {
var $tds = $(this).find('td'),
firstCellData = $tds.eq(0).html().trim(),
secondCellData == $tds.eq(1).html().trim();
if (!firstTableData[firstCellData]) {
firstTableData[firstCellData] = []
}
firstTableData[firstCellData].push(secondCellData)
})
$(secondTable).each(function(index) {
var $tds = $(this).find('td');
var secTableCellZero = $tds.eq(0).html().trim();
var secTableCellOne = $tds.eq(1).html().trim();
if (!firstTableData.hasOwnProperty(secTableCellZero)) {
console.log('No match for first cell')
} else if (!firstTableData[secTableCellZero].indexOf(secTableCellOne) == -1) {
console.log('No match for second cell')
}
});
I'm not sure what objective is when matches aren't found
I have a simple HTML table, which uses rowspans in some random columns. An example might look like
A | B |
---|---| C
D | |
---| E |---
F | | G
I'd like to iterate over the rows such that I see rows as A,B,C, D,E,C, then F,E,G.
I think I can probably cobble together something very convoluted using cell.index() to check for "missed" columns in later rows, but I'd like something a little more elegant...
without jquery:
function tableToMatrix(table) {
var M = [];
for (var i = 0; i < table.rows.length; i++) {
var tr = table.rows[i];
M[i] = [];
for (var j = 0, k = 0; j < M[0].length || k < tr.cells.length;) {
var c = (M[i-1]||[])[j];
// first check if there's a continuing cell above with rowSpan
if (c && c.parentNode.rowIndex + c.rowSpan > i) {
M[i].push(...Array.from({length: c.colSpan}, () => c))
j += c.colSpan;
} else if (tr.cells[k]) {
var td = tr.cells[k++];
M[i].push(...Array.from({length: td.colSpan}, () => td));
j += td.colSpan;
}
}
}
return M;
}
var M = tableToMatrix(document.querySelector('table'));
console.table(M.map(r => r.map(c => c.innerText)));
var pre = document.createElement('pre');
pre.innerText = M.map(row => row.map(c => c.innerText).join('\t')).join('\n');
document.body.append(pre);
td {
border: 1px solid rgba(0,0,0,.3);
}
<table>
<tr>
<td colspan=2>A</td>
<td rowspan=2>B</td>
</tr>
<tr>
<td>C</td>
<td rowspan=3>D</td>
</tr>
<tr>
<td rowspan=2>E</td>
<td rowspan=4>F</td>
</tr>
<tr></tr>
<tr>
<td rowspan=2 colspan=2>G</td>
</tr>
<tr></tr>
<tr>
<td rowspan=3 colspan=3>H</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td colspan=3>I</td>
</tr>
</table>
Try this:
<table id="tbl">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2" rowspan="2">A</td>
<td rowspan="2">C</td>
</tr>
<tr>
<td rowspan="2">E</td>
</tr>
<tr>
<td>F</td>
<td>G</td>
</tr>
</table>
Script:
var finalResult = '';
var totalTds = $('#tbl TR')[0].length;
var trArray = [];
var trArrayValue = [];
var trIndex = 1;
$('#tbl TR').each(function(){
var currentTr = $(this);
var tdIndex = 1;
trArray[trIndex] = [];
trArrayValue[trIndex] = [];
var tdActuallyTraversed = 0;
var colspanCount = 1;
$('#tbl TR').first().children().each(function(){
if(trIndex > 1 && trArray[trIndex - 1][tdIndex] > 1)
{
trArray[trIndex][tdIndex] = trArray[trIndex - 1][tdIndex] - 1;
trArrayValue[trIndex][tdIndex] = trArrayValue[trIndex - 1][tdIndex];
finalResult = finalResult + trArrayValue[trIndex][tdIndex];
}
else
{
if(colspanCount <= 1)
{
colspanCount = currentTr.children().eq(tdActuallyTraversed).attr('colspan') != undefined ? currentTr.children().eq(tdActuallyTraversed).attr('colspan') : 1;
}
if(colspanCount > 1 && tdIndex > 1)
{
trArray[trIndex][tdIndex] = currentTr.children().eq(tdActuallyTraversed + colspanCount).attr('rowspan') != undefined ?currentTr.children().eq(tdActuallyTraversed + colspanCount).attr('rowspan') : 1;
trArrayValue[trIndex][tdIndex] = trArrayValue[trIndex][tdIndex - 1];
colspanCount--;
}
else
{
trArray[trIndex][tdIndex] = currentTr.children().eq(tdActuallyTraversed).attr('rowspan') != undefined ?currentTr.children().eq(tdActuallyTraversed).attr('rowspan') : 1;
trArrayValue[trIndex][tdIndex] = currentTr.children().eq(tdActuallyTraversed).html();
tdActuallyTraversed++;
}
finalResult = finalResult + trArrayValue[trIndex][tdIndex];
}
tdIndex++;
});
trIndex++;
});
alert(finalResult);
Fiddle
i am not sure about the performance, but it works well.
what I understood with your question is: You want to split the merged cell with same value and then iterate the table simply by row.
I've created a JSFiddle that will split the merged cells with the same value. Then you'll have a table that can be iterated simply by rows to get the desired output that you specified.
See it running here http://jsfiddle.net/9PZQj/3/
Here's the complete code:
<table id="tbl" border = "1">
<tr>
<td>A</td>
<td>B</td>
<td rowspan="2">C</td>
</tr>
<tr>
<td>D</td>
<td rowspan="2">E</td>
</tr>
<tr>
<td>F</td>
<td>G</td>
</tr>
</table>
<br>
<div id="test"> </div>
Here's the jquery that is used to manipulate the table's data.
var tempTable = $('#tbl').clone(true);
var tableBody = $(tempTable).children();
$(tableBody).children().each(function(index , item){
var currentRow = item;
$(currentRow).children().each(function(index1, item1){
if($(item1).attr("rowspan"))
{
// copy the cell
var item2 = $(item1).clone(true);
// Remove rowspan
$(item1).removeAttr("rowspan");
$(item2).removeAttr("rowspan");
// last item's index in next row
var indexOfLastElement = $(currentRow).next().last().index();
if(indexOfLastElement <= index1)
{
$(currentRow).next().append(item2)
}
else
{
// intermediate cell insertion at right position
$(item2).insertBefore($(currentRow).next().children().eq(index1))
}
}
});
console.log(currentRow)
});
$('#test').append(tempTable);
You can use this Gist. It supports all the requirements by W3C, even "rowspan=0" (which seems to be only supported by Firefox).
Have made a table and stored it in a variale getcontent by using basic HTML.
getcontent="<table style="height: 1000px; ; width: 500px;" border="1">
<tbody>
<tr>
<td>[Assignment name]</td>
<td>[<span>Approximate Value of Contract</span>]</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>"
Contentinsquare is an array containg string which can be filled in th table. (SQUARE BRACKETS] in getcontent
contentinsquare=["name","100$"]
i want the value of contentinsqaure to be placed in between the sqaure brackets.For that i have used the code :-
var contentinsquare=["name","100$"]
var strInputCode = contentinsquare[1].replace(/&(lt|gt);/g, function (strMatch, p1){
return (p1 == "lt")? "<" : ">";
});
var strTagStrippedText = strInputCode.replace(/<\/?[^>]+(>|$)/g, "");
contentinsquare[1]=strTagStrippedText
var strforlabelname = []
var strfortextarea = []
var strfortext = []
var str = []
label = dojo.query('label');
console.log(label, "all label names")
for( i = 0; i < label.length; i++)
{
if(label[i].id != "")
{
inner = dojo.byId(label[i].id).innerHTML
var name = inner.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
strforlabelname.push(name)
}
}
console.log(strforlabelname, "string")
text = dojo.query('input')
for( i = 0; i < text.length; i++)
{
if(text[i].id == "")
{
}
else
{
innertext = dijit.byId(text[i].id).getValue();
str.push(innertext)
//console.log(str,"strng1")
}
}
textarea = dojo.query('textarea')
for( i = 0; i < textarea.length; i++)
{
if(textarea[i].id == ""||textarea[i].id =="textareaidfirst")
{
}
else
{
innertextarea = dojo.byId(textarea[i].id).value
str.push(innertextarea)
}
}
for( i = 0; i < strforlabelname.length; i++)
{
for( j = 0; j < contentinsquare.length; j++)
{
if(contentinsquare[j] == strforlabelname[i])
{
var patt = new RegExp("\\[" + strforlabelname[i] + "\\]", "g")
getcontent = getcontent.replace(patt, str[i]);
}
}
}
This results to :-
Result :-
"<table style="height: 1000px; ; width: 500px;" border="1">
<tbody>
<tr>
<td>name</td>
<td>[<span>Approximate Value of Contract</span>]</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>"
that is the sqaure brackets contaning <span> tag is not working. i want the 100 $ to be replaced over thr.