i am having table data like this
how to remove text on specific td ( Generasi, Unit Code, Agent Code, Unit Name ) with having duplicate text and keep only 1
so the results can be like this
this is my fiddle
JSFIDDLE
I Have Fixed this. Please find the below changes in html and script.
This code will add a table below your table which is not sorted and remove your js totally and paste the below.
In HTML I have added a div below
var FinalIndex = [];
var tbl = $('table#tableUnit tr').get().map(function(row) {
return $(row).find('td').get().map(function(cell) {
return $(cell).html();
});
});
/* console.log(tbl) */
$.each(tbl, function(index, data) {
if (data.length > 5) {
console.log('data:' + index);
count = 0;
$.each(tbl, function(indexF, dataF) {
if (indexF <= index) {
if (data[0] == dataF[0] && data[1] == dataF[1] && data[2] == dataF[2] && data[3] == dataF[3] && count == 0 && count == 0) {
count = count + 1;
if (index == indexF) {
console.log("comparing :" + index + "with" + indexF);
console.log('count:' + count);
console.log(data[0] + '.' + data[1] + " first value " + dataF[0]);
FinalIndex.push(index);
}
}
}
});
} else {
FinalIndex.push(index);
}
});
console.log(FinalIndex)
function makeTable(tbl) {
var table = '<table>';
$.each(tbl, function(index, value) {
if (jQuery.inArray(index, FinalIndex) !== -1) {
table += '<tr>';
$.each(value, function(ind, v1) {
/* console.log(ind); */
table += '<td>' + v1 + '</td>';
});
table += '</tr>';
}
});
/* return ($(table)); */
table += '</table>';
console.log(table);
$('.finalTable').html(table);
};
makeTable(tbl);
$('#btnOrig').click(function(){
$('#orig_table').toggle();
});
#orig_table{border:1px solid red;box-sizing:border-box;display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button id="btnOrig">Show Original Table</button>
<div id="orig_table">
<table class="table" id="tableUnit" style="width: 100%;">
<thead>
<tr>
<th style="width: 7em;"><strong>Generasi</strong></th>
<th style="width: 20em;"><strong>Unit Code</strong></th>
<th style="width: 20em;"><strong>Agent Code Unit</strong></th>
<th style="width: 6em;"><strong>Unit Name</strong></th>
<th style="width: 6em;" class="center"><strong>No.</strong></th>
<th style="width: 5em;"><strong>Agent Code</strong></th>
<th style="width: 15em;"><strong>Agent Name</strong></th>
<th style="width: 15em;"><strong>VOC</strong></th>
<th style="width: 15em;"><strong>KPM</strong></th>
<th style="width: 15em;" class="right"><strong>Case</strong></th>
<th style="width: 15em;" class="right"><strong>ALP</strong></th>
<th></th>
</tr>
</thead>
<tbody>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-0</strong></td>
<td></td>
<td class="right"><strong>0</strong></td>
<td class="right"><strong>0</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>G-1</td>
<td>A6011</td>
<td>00923917</td>
<td>FRANSISKA YULIANA B.D.</td>
<td>1</td>
<td>00905445</td>
<td>NESTI RAHAYU</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-1</td>
<td>A6011</td>
<td>00923917</td>
<td>FRANSISKA YULIANA B.D.</td>
<td>2</td>
<td>00905448</td>
<td>AISYAH</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">30.000.000</td>
<td></td>
</tr>
<tr>
<td>G-1</td>
<td>A6011</td>
<td>00923917</td>
<td>FRANSISKA YULIANA B.D.</td>
<td>3</td>
<td>00905454</td>
<td>ADYANTA YOGA PRADANA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-1</td>
<td>A7924</td>
<td>00947903</td>
<td>MELVA SUPARDI</td>
<td>4</td>
<td>00947903</td>
<td>MELVA SUPARDI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-1</strong></td>
<td></td>
<td class="right"><strong>5</strong></td>
<td class="right"><strong>48.000.000</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>G-2</td>
<td>A5974</td>
<td>00923389</td>
<td>ALI WIDODO</td>
<td>1</td>
<td>00918088</td>
<td>JOHN HENDRI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">12.000.000</td>
<td></td>
</tr>
<tr>
<td>G-2</td>
<td>A5993</td>
<td>00923678</td>
<td>PATENSAROHA PANJAITAN</td>
<td>2</td>
<td>00924255</td>
<td>PURNAMA MARINTAN</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">4</td>
<td class="right">28.800.000</td>
<td></td>
</tr>
<tr>
<td>G-2</td>
<td>A8603</td>
<td>00966488</td>
<td>RISANG RUDI PERMADI</td>
<td>3</td>
<td>00966488</td>
<td>RISANG RUDI PERMADI</td>
<td>SM</td>
<td>SMG043</td>
<td class="right">2</td>
<td class="right">31.200.000</td>
<td></td>
</tr>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-2</strong></td>
<td></td>
<td class="right"><strong>8</strong></td>
<td class="right"><strong>72.000.000</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>G-3</td>
<td>A2190</td>
<td>00906041</td>
<td>LIESTYANINGSIH PRASETYO</td>
<td>1</td>
<td>00906041</td>
<td>LIESTYANINGSIH PRASETYO</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A6659</td>
<td>00910973</td>
<td>FERMOLINA</td>
<td>2</td>
<td>00910973</td>
<td>FERMOLINA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">4</td>
<td class="right">73.000.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A5974</td>
<td>00923389</td>
<td>ALI WIDODO</td>
<td>3</td>
<td>00911258</td>
<td>CAROTRIANA HARTIANI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">8.400.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A7824</td>
<td>00913029</td>
<td>YULI PURWANTI</td>
<td>4</td>
<td>00913029</td>
<td>YULI PURWANTI</td>
<td>SM</td>
<td>SMG043</td>
<td class="right">1</td>
<td class="right">4.800.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A8603</td>
<td>00966488</td>
<td>RISANG RUDI PERMADI</td>
<td>5</td>
<td>00925635</td>
<td>RICHA DEWI AZDANI</td>
<td>SM</td>
<td>SMG043</td>
<td class="right">4</td>
<td class="right">18.000.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A2006</td>
<td>00905496</td>
<td>MARYANAH</td>
<td>6</td>
<td>00941248</td>
<td>ROCHIMI DIAN PUSPITASARI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">9.600.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A7240</td>
<td>00942942</td>
<td>SOE ESTI MURNIATI</td>
<td>7</td>
<td>00942942</td>
<td>SOE ESTI MURNIATI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">3</td>
<td class="right">23.040.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A8053</td>
<td>00951213</td>
<td>A. M. GANDA MARPAUNG</td>
<td>8</td>
<td>00951213</td>
<td>A. M. GANDA MARPAUNG</td>
<td>JB3</td>
<td>JAM707</td>
<td class="right">1</td>
<td class="right">4.800.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A2006</td>
<td>00905496</td>
<td>MARYANAH</td>
<td>9</td>
<td>00953857</td>
<td>MOCH KEMAL ASYAF</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">36.000.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A2006</td>
<td>00905496</td>
<td>MARYANAH</td>
<td>10</td>
<td>00968671</td>
<td>GITA NELWAN</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">12.000.000</td>
<td></td>
</tr>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-3</strong></td>
<td></td>
<td class="right"><strong>21</strong></td>
<td class="right"><strong>195.640.000</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>G-4</td>
<td>A4040</td>
<td>00909748</td>
<td>KARINA</td>
<td>1</td>
<td>00909748</td>
<td>KARINA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">54.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A6091</td>
<td>00910151</td>
<td>NONAH SUHANAH</td>
<td>2</td>
<td>00910517</td>
<td>ALFIAN IDRUS</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A5974</td>
<td>00923389</td>
<td>ALI WIDODO</td>
<td>3</td>
<td>00912869</td>
<td>ROHMAT</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">12.060.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A6659</td>
<td>00910973</td>
<td>FERMOLINA</td>
<td>4</td>
<td>00925358</td>
<td>ANDRIYANI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">8.400.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A6789</td>
<td>00909167</td>
<td>WAHYU RIDWAN NUGROHO</td>
<td>5</td>
<td>00938577</td>
<td>ACHMAD TAUFIK</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">4.800.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A8822</td>
<td>00944260</td>
<td>DESSY RANTAU WIDIASARI</td>
<td>6</td>
<td>00944260</td>
<td>DESSY RANTAU WIDIASARI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A8896</td>
<td>00946599</td>
<td>ILHAM WAHYUDIN</td>
<td>7</td>
<td>00946599</td>
<td>ILHAM WAHYUDIN</td>
<td>SB</td>
<td>SKB008</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A6091</td>
<td>00910151</td>
<td>NONAH SUHANAH</td>
<td>8</td>
<td>00947779</td>
<td>YENNI CHRISTINA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">12.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A7204</td>
<td>00941979</td>
<td>MANUELA R SIAGIAN</td>
<td>9</td>
<td>00959611</td>
<td>LAURENTIA DYAH IKA G</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">10.400.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A2042</td>
<td>00905588</td>
<td>HENY BAYU SAFITRI</td>
<td>10</td>
<td>00965234</td>
<td>YASAN</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">12.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A6659</td>
<td>00910973</td>
<td>FERMOLINA</td>
<td>11</td>
<td>00968489</td>
<td>ANDRE PERBAWA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">3</td>
<td class="right">36.000.000</td>
<td></td>
</tr>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-4</strong></td>
<td></td>
<td class="right"><strong>14</strong></td>
<td class="right"><strong>167.660.000</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>G-5</td>
<td>A2157</td>
<td>00905917</td>
<td>SYARIFAH</td>
<td>1</td>
<td>00905917</td>
<td>SYARIFAH</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">4</td>
<td class="right">30.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A2043</td>
<td>00905590</td>
<td>BUNGAIDAL ADKHIA</td>
<td>2</td>
<td>00911669</td>
<td>ZULFIKAR</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">18.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A8896</td>
<td>00946599</td>
<td>ILHAM WAHYUDIN</td>
<td>3</td>
<td>00914524</td>
<td>RITAWATI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">3</td>
<td class="right">13.200.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A8896</td>
<td>00946599</td>
<td>ILHAM WAHYUDIN</td>
<td>4</td>
<td>00923652</td>
<td>DEDEN AMARULLAH</td>
<td>SB</td>
<td>SKB008</td>
<td class="right">1</td>
<td class="right">4.200.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A6916</td>
<td>00937689</td>
<td>SUDIRMAN</td>
<td>5</td>
<td>00937689</td>
<td>SUDIRMAN</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A8199</td>
<td>00944267</td>
<td>DEWI KARTINI</td>
<td>6</td>
<td>00944267</td>
<td>DEWI KARTINI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">30.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A8131</td>
<td>00954706</td>
<td>HENDRA SURYA</td>
<td>7</td>
<td>00954706</td>
<td>HENDRA SURYA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">15.600.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A6307</td>
<td>00911807</td>
<td>BERTA M PURBA</td>
<td>8</td>
<td>00964680</td>
<td>DANIEL</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A8822</td>
<td>00944260</td>
<td>DESSY RANTAU WIDIASARI</td>
<td>9</td>
<td>00967703</td>
<td>YANTI ARIANI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">18.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A7824</td>
<td>00913029</td>
<td>YULI PURWANTI</td>
<td>10</td>
<td>00968122</td>
<td>NOVIA BETSY CLARISSA</td>
<td>SM</td>
<td>SMG043</td>
<td class="right">1</td>
<td class="right">24.000.000</td>
<td></td>
</tr>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-5</strong></td>
<td></td>
<td class="right"><strong>18</strong></td>
<td class="right"><strong>165.000.000</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>GRAND TOTAL</strong></td>
<td></td>
<td class="right"><strong>66</strong></td>
<td class="right"><strong>648.300.000</strong></td>
<td></td>
</tr>
</tfoot>
</table>
</div><!-- #orig_table -->
<h2>Final Table:</h2>
<div class="finalTable"></div>
Related
I want to compute and fill the ranking in the image below based on the total. How will be able to achieve this using js/jquery?.
I have created the table manually (dynamically also) using HTML. I also have button to generate the rank (which I know how to do it). I just want to have a function or way to add rank to my column.
So that rank should be in order (1, 2, 2, 3).
<table id="table" class="table table-stripe table-bordered">
<thead>
<tr>
<td class="d-none">ID</td>
<td>Name</td>
<td>Crit1</td>
<td>Crit2</td>
<td>Crit3</td>
<td>Crit4</td>
<td>Crit5</td>
<td>Total</td>
<td>Rank</td>
</tr>
</thead>
<tbody>
<tr>
<td class="d-none">2</td>
<td>aaaa</td>
<td>20</td>
<td>0</td>
<td>50</td>
<td>0</td>
<td>0</td>
<td class="total"></td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">3</td>
<td>Greggggg</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total"></td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">4</td>
<td>Jjjjoohhn</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total"></td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">5</td>
<td>asdada</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total"></td>
<td class="Rank"></td>
</tr>
</tbody>
</table>
Any help will be appreciated.
You have to organise the total score by getting all the values, sort and remove duplicates.
And you can assign the rank value by $('.total').filter(function() {return $(this).text() == v;}).next().text(i + 1);
You can do something like:
$(function() {
//Get all total values, sort and remove duplicates
let totalList = $(".total")
.map(function() {return $(this).text()})
.get()
.sort(function(a,b){return a - b })
.reduce(function(a, b) {if (b != a[0]) a.unshift(b);return a}, [])
//Assign rank
totalList.forEach((v, i) => {
$('.total').filter(function() {return $(this).text() == v;}).next().text(i + 1);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" class="table table-stripe table-bordered">
<thead>
<tr>
<td class="d-none">ID</td>
<td>Name</td>
<td>Crit1</td>
<td>Crit2</td>
<td>Crit3</td>
<td>Crit4</td>
<td>Crit5</td>
<td>Total</td>
<td>Rank</td>
</tr>
</thead>
<tbody>
<tr>
<td class="d-none">2</td>
<td>aaaa</td>
<td>20</td>
<td>0</td>
<td>50</td>
<td>0</td>
<td>0</td>
<td class="total">80</td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">3</td>
<td>Greggggg</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total">65</td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">4</td>
<td>Jjjjoohhn</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total">65</td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">5</td>
<td>asdada</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total">50</td>
<td class="Rank"></td>
</tr>
</tbody>
</table>
You can even make it shorter like
$(".total")
.map(function(){return $(this).text()})
.get()
.sort(function(a,b){return a - b })
.reduce(function(a, b){ if (b != a[0]) a.unshift(b); return a }, [])
.forEach((v,i)=>{
$('.total').filter(function() {return $(this).text() == v;}).next().text(i + 1);
});
I have table with some data in an array to be displayed as below. In this example, I display 2 table datas but it can be more than 2. I have to calculate the column population, collection 1 and collection 2 of each table and show then at the end of each table.
So far I have tried following code to calculate where I first calcuate the number of tables available by counting array.
<script type="text/javascript">
var count = <?php echo json_encode(count($lists)); ?>;
var total = 0;
for(var i = 1; i <= count; i++)
{
var available = $(".used-community .plant_counter_"+i);
$.each(available, function(key, value)
{
total+=parseInt(available[key].innerText);
});
console.log(total);//edit variable name - totala changed to total
}
</script>
<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="47" class="rowList middle">
<td>Wangkha</td>
<td>Soi Wangkha 3</td>
<td class="plant_counter_1">100000</td>
<td>31</td>
<td>11315</td>
</tr>
<tr id="43" class="rowList middle">
<td>one</td>
<td>one address</td>
<td class="plant_counter_1">35000</td>
<td>7</td>
<td>2555</td>
</tr>
<tr id="46" class="rowList middle">
<td>Bang</td>
<td>Bang khuwang Rd</td>
<td class="plant_counter_1">6000</td>
<td>2</td>
<td>730</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="45" class="rowList middle">
<td>sap</td>
<td>sap thawi</td>
<td class="plant_counter_2">80000</td>
<td>15</td>
<td>5475</td>
</tr>
<tr id="44" class="rowList middle">
<td>two-nonthaburi</td>
<td>nonthaburi</td>
<td class="plant_counter_2">69000</td>
<td>11</td>
<td>4015</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
My code is calculating the row with class "plant_counter_1" correctly but for next table it continue adding the sum of table 1 as well. Can anybody teach me where I did mistake and I how can I find out the sum of other two columns
Thank You
Loop over each table and work within that table instance. The total data count is not really needed since it doesn't break down the number of tables.
Since you can easily isolate table instances I would suggest you use common class names across all tables and don't use incremental ones
$('table').each(function(){
var $table =$(this),
$rows = $table.find('tbody tr'),
$lastRowCells = $rows.last().children(),
collectionTotals = $rows.not(':last').map(function(){
var $cells = $(this).children()
return [[+$cells[3].textContent, +$cells[4].textContent]]
}).get()
.reduce(function(a,c){
$.each(c,function(i, val){
a[i] += val;
});
return a;
},[0,0]);
$lastRowCells.eq(3).text(collectionTotals[0]);
$lastRowCells.eq(4).text(collectionTotals[1]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="47" class="rowList middle">
<td>Wangkha</td>
<td>Soi Wangkha 3</td>
<td class="plant_counter">100000</td>
<td>31</td>
<td>11315</td>
</tr>
<tr id="43" class="rowList middle">
<td>one</td>
<td>one address</td>
<td class="plant_counter">35000</td>
<td>7</td>
<td>2555</td>
</tr>
<tr id="46" class="rowList middle">
<td>Bang</td>
<td>Bang khuwang Rd</td>
<td class="plant_counter">6000</td>
<td>2</td>
<td>730</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="45" class="rowList middle">
<td>sap</td>
<td>sap thawi</td>
<td class="plant_counter">80000</td>
<td>15</td>
<td>5475</td>
</tr>
<tr id="44" class="rowList middle">
<td>two-nonthaburi</td>
<td>nonthaburi</td>
<td class="plant_counter">69000</td>
<td>11</td>
<td>4015</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Just a small modification to your code and it will work. Since you need multiple results, your total needs to be an array. Please run attached code snippet for clarity.
var count =2;//change back to your php <?php echo json_encode(count($lists)); ?>;
var total = new Array();
total.push(0);
for(var i = 1; i <= count; i++)
{
total.push(0);
var available = $(".used-community .plant_counter_"+i);
$.each(available, function(key, value)
{
total[i]+=parseInt(available[key].innerText);
});
total.push(0);
console.log(total[i]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="47" class="rowList middle">
<td>Wangkha</td>
<td>Soi Wangkha 3</td>
<td class="plant_counter_1">100000</td>
<td>31</td>
<td>11315</td>
</tr>
<tr id="43" class="rowList middle">
<td>one</td>
<td>one address</td>
<td class="plant_counter_1">35000</td>
<td>7</td>
<td>2555</td>
</tr>
<tr id="46" class="rowList middle">
<td>Bang</td>
<td>Bang khuwang Rd</td>
<td class="plant_counter_1">6000</td>
<td>2</td>
<td>730</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="45" class="rowList middle">
<td>sap</td>
<td>sap thawi</td>
<td class="plant_counter_2">80000</td>
<td>15</td>
<td>5475</td>
</tr>
<tr id="44" class="rowList middle">
<td>two-nonthaburi</td>
<td>nonthaburi</td>
<td class="plant_counter_2">69000</td>
<td>11</td>
<td>4015</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
to make things a little bit of fun
(I assumed the total rows have two extra misplaced columns)
;$(function() {
var tables = $('table > tbody');
var totals = new Array(tables.length);
tables.each(function(nt,t) {
var rows = $('tr',t);
var totalElement = rows.splice(-1);
rows = rows.map(function(nr, r) {
return [$('td',$(r)).slice(-3)
.map( function(nc,c) {
return parseInt($(c).text()) || 0; }).toArray()];
}).toArray();
totals[nt] = rows.reduce( function(a, b) {
return a.map(function(v,n) { return v + b[n]; });
}, [0,0,0] );
$('td',totalElement[0]).splice(-3).forEach(function(c,n) {
$(c).text(totals[nt][n]); });
});
console.log(totals);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="47" class="rowList middle">
<td>Wangkha</td>
<td>Soi Wangkha 3</td>
<td class="plant_counter_1">100000</td>
<td>31</td>
<td>11315</td>
</tr>
<tr id="43" class="rowList middle">
<td>one</td>
<td>one address</td>
<td class="plant_counter_1">35000</td>
<td>7</td>
<td>2555</td>
</tr>
<tr id="46" class="rowList middle">
<td>Bang</td>
<td>Bang khuwang Rd</td>
<td class="plant_counter_1">6000</td>
<td>2</td>
<td>730</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
</tr>
</tbody>
</table>
<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="45" class="rowList middle">
<td>sap</td>
<td>sap thawi</td>
<td class="plant_counter_2">80000</td>
<td>15</td>
<td>5475</td>
</tr>
<tr id="44" class="rowList middle">
<td>two-nonthaburi</td>
<td>nonthaburi</td>
<td class="plant_counter_2">69000</td>
<td>11</td>
<td>4015</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
</tr>
</tbody>
</table>
Well if I understand you correctly. You can store the total sum of each table into array. I think the code explain alone... But I declare an array named
'total' outside of the for statement that contain the total of each table. When the foreach finish to sum all the values in tempTotal, then do a push to total array and save the operation of the first loop. and the second... third... etc
var total = [];
for(var i = 1; i <= 2; i++)
{
var tempTotal = 0;
var available = $(".used-community .plant_counter_"+i);
$.each(available, function(key, value)
{
tempTotal = tempTotal + parseInt(available[key].innerText);
});
total.push(tempTotal);
}
console.log(total);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="47" class="rowList middle">
<td>Wangkha</td>
<td>Soi Wangkha 3</td>
<td class="plant_counter_1">100000</td>
<td>31</td>
<td>11315</td>
</tr>
<tr id="43" class="rowList middle">
<td>one</td>
<td>one address</td>
<td class="plant_counter_1">35000</td>
<td>7</td>
<td>2555</td>
</tr>
<tr id="46" class="rowList middle">
<td>Bang</td>
<td>Bang khuwang Rd</td>
<td class="plant_counter_1">6000</td>
<td>2</td>
<td>730</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="45" class="rowList middle">
<td>sap</td>
<td>sap thawi</td>
<td class="plant_counter_2">80000</td>
<td>15</td>
<td>5475</td>
</tr>
<tr id="44" class="rowList middle">
<td>two-nonthaburi</td>
<td>nonthaburi</td>
<td class="plant_counter_2">69000</td>
<td>11</td>
<td>4015</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I'm trying to modify the contents of specific <td>'s unsuccessfully.
The idea is to change the script word 'S/JUROS' to ' C/JUROS' from 8x.
Any suggestions for the best way to do this? I already managed to rescue the values in an array, but got caught at this stage.
https://jsfiddle.net/diasbass/23swmsvn/
jQuery(document).ready(function($) {
if (jQuery(".tbl-payment-system").length) {
var getTexts = [];
$(".tbl-payment-system tr td.parcelas").each(function() {
getTexts.push($(this).text())
});
var resultTexts = '"' + getTexts.join('", "') + '"';
console.log(resultTexts);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1" class="tbl-payment-system" style="display: table;">
<tbody>
<tr class="even">
<th class="parcelas">Nº de Parcelas</th>
<th class="valor">Valor de cada parcela</th>
</tr>
<tr class="even">
<td class="parcelas">X S/JUROS</td>
<td>R$ 600,00</td>
</tr>
<tr>
<td class="parcelas">2X S/JUROS</td>
<td>R$ 300,00</td>
</tr>
<tr class="even">
<td class="parcelas">3X S/JUROS</td>
<td>R$ 200,00</td>
</tr>
<tr>
<td class="parcelas">4X S/JUROS</td>
<td>R$ 150,00</td>
</tr>
<tr class="even">
<td class="parcelas">5X S/JUROS</td>
<td>R$ 120,00</td>
</tr>
<tr>
<td class="parcelas">6X S/JUROS</td>
<td>R$ 100,00</td>
</tr>
<tr class="even">
<td class="parcelas">7X S/JUROS</td>
<td>R$ 85,71</td>
</tr>
<tr>
<td class="parcelas">8X S/JUROS</td>
<td>R$ 81,87</td>
</tr>
<tr class="even">
<td class="parcelas">9X S/JUROS</td>
<td>R$ 73,47</td>
</tr>
<tr>
<td class="parcelas">10X S/JUROS</td>
<td>R$ 66,76</td>
</tr>
<tr class="even">
<td class="parcelas">11X S/JUROS</td>
<td>R$ 64,81</td>
</tr>
<tr>
<td class="parcelas">12X S/JUROS</td>
<td>R$ 60,24</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/diasbass/23swmsvn/
You can use :contains(), .add(), general sibling selector ~, .map(), .replace(), .get(). Note, not clear if requirement is to change text of html td element or only text stored at array? If expected result is for td element text to be changed you can use .text(function(index, originalText) {}) where new text is returned
jQuery(document).ready(function($) {
if (jQuery(".tbl-payment-system").length) {
var getTexts = [];
var x = $(".tbl-payment-system tr:contains(8X)");
var resultTexts = x.add($("~ tr", x)).map(function() {
return $("td.parcelas", this).text(function(_, text) {
return text.replace(/S(?=\/)/, "C")
}).text()
}).get();
console.log('"' + resultTexts.join('", "') + '"');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1" class="tbl-payment-system" style="display: table;">
<tbody>
<tr class="even">
<th class="parcelas">Nº de Parcelas</th>
<th class="valor">Valor de cada parcela</th>
</tr>
<tr class="even">
<td class="parcelas">X S/JUROS</td>
<td>R$ 600,00</td>
</tr>
<tr>
<td class="parcelas">2X S/JUROS</td>
<td>R$ 300,00</td>
</tr>
<tr class="even">
<td class="parcelas">3X S/JUROS</td>
<td>R$ 200,00</td>
</tr>
<tr>
<td class="parcelas">4X S/JUROS</td>
<td>R$ 150,00</td>
</tr>
<tr class="even">
<td class="parcelas">5X S/JUROS</td>
<td>R$ 120,00</td>
</tr>
<tr>
<td class="parcelas">6X S/JUROS</td>
<td>R$ 100,00</td>
</tr>
<tr class="even">
<td class="parcelas">7X S/JUROS</td>
<td>R$ 85,71</td>
</tr>
<tr>
<td class="parcelas">8X S/JUROS</td>
<td>R$ 81,87</td>
</tr>
<tr class="even">
<td class="parcelas">9X S/JUROS</td>
<td>R$ 73,47</td>
</tr>https://jsfiddle.net/23swmsvn/3/
<tr>
<td class="parcelas">10X S/JUROS</td>
<td>R$ 66,76</td>
</tr>
<tr class="even">
<td class="parcelas">11X S/JUROS</td>
<td>R$ 64,81</td>
</tr>
<tr>
<td class="parcelas">12X S/JUROS</td>
<td>R$ 60,24</td>
</tr>
</tbody>
</table>
jsfiddle https://jsfiddle.net/23swmsvn/5/
Take a look at this
$("td").each(function(){
if (parseInt($(this).text()) >= 8){
$(this).text(($(this).text()).replace("S/JUROS","C/JUROS"));
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tbl1" class="tbl-payment-system" style="display: table;">
<tbody>
<tr class="even">
<th class="parcelas">Nº de Parcelas</th>
<th class="valor">Valor de cada parcela</th>
</tr>
<tr class="even">
<td class="parcelas">X S/JUROS</td>
<td>R$ 600,00</td>
</tr>
<tr>
<td class="parcelas">2X S/JUROS</td>
<td>R$ 300,00</td>
</tr>
<tr class="even">
<td class="parcelas">3X S/JUROS</td>
<td>R$ 200,00</td>
</tr>
<tr>
<td class="parcelas">4X S/JUROS</td>
<td>R$ 150,00</td>
</tr>
<tr class="even">
<td class="parcelas">5X S/JUROS</td>
<td>R$ 120,00</td>
</tr>
<tr>
<td class="parcelas">6X S/JUROS</td>
<td>R$ 100,00</td>
</tr>
<tr class="even">
<td class="parcelas">7X S/JUROS</td>
<td>R$ 85,71</td>
</tr>
<tr>
<td class="parcelas">8X S/JUROS</td>
<td>R$ 81,87</td>
</tr>
<tr class="even">
<td class="parcelas">9X S/JUROS</td>
<td>R$ 73,47</td>
</tr>
<tr>
<td class="parcelas">10X S/JUROS</td>
<td>R$ 66,76</td>
</tr>
<tr class="even">
<td class="parcelas">11X S/JUROS</td>
<td>R$ 64,81</td>
</tr>
<tr>
<td class="parcelas">12X S/JUROS</td>
<td>R$ 60,24</td>
</tr>
</tbody>
</table>
Find 8X using :contains, then go it its parent and nextUntil the end. Then addBack to include 8X and get each rows :first-child.
Then each over them to update the text:-
var elements = $('table td:contains(8X)').parent().nextUntil().addBack().children(':first-child');
elements.each(function() {
$(this).text($(this).text().replace('S/JUROS', 'C/JUROS'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1" class="tbl-payment-system" style="display: table;">
<tbody>
<tr class="even">
<th class="parcelas">Nº de Parcelas</th>
<th class="valor">Valor de cada parcela</th>
</tr>
<tr class="even">
<td class="parcelas">X S/JUROS</td>
<td>R$ 600,00</td>
</tr>
<tr>
<td class="parcelas">2X S/JUROS</td>
<td>R$ 300,00</td>
</tr>
<tr class="even">
<td class="parcelas">3X S/JUROS</td>
<td>R$ 200,00</td>
</tr>
<tr>
<td class="parcelas">4X S/JUROS</td>
<td>R$ 150,00</td>
</tr>
<tr class="even">
<td class="parcelas">5X S/JUROS</td>
<td>R$ 120,00</td>
</tr>
<tr>
<td class="parcelas">6X S/JUROS</td>
<td>R$ 100,00</td>
</tr>
<tr class="even">
<td class="parcelas">7X S/JUROS</td>
<td>R$ 85,71</td>
</tr>
<tr>
<td class="parcelas">8X S/JUROS</td>
<td>R$ 81,87</td>
</tr>
<tr class="even">
<td class="parcelas">9X S/JUROS</td>
<td>R$ 73,47</td>
</tr>
<tr>
<td class="parcelas">10X S/JUROS</td>
<td>R$ 66,76</td>
</tr>
<tr class="even">
<td class="parcelas">11X S/JUROS</td>
<td>R$ 64,81</td>
</tr>
<tr>
<td class="parcelas">12X S/JUROS</td>
<td>R$ 60,24</td>
</tr>
</tbody>
</table>
I am working on implementing a Sudoku puzzle.
The first step I am taking is trying to validate that what the user is inputing is a value between 0-9.
But I'm stuck with the syntax and how to tackle this problem.
<table class="spuzzle">
<caption>Sudoku</caption>
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
</tr>
</thead>
<tbody>
<tr>
<th>A</th>
<td colspan="3" rowspan="3" class="greenBox">
<table class="subTable">
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td>4</td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td>3</td>
<td>5</td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
</table>
</td>
<td colspan="3" rowspan="3" class="goldBox">
<table class="subTable">
<tr>
<td>5</td>
<td contentEditable="true" class="sudEnter"></td>
<td>3</td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
</table>
</td>
<td colspan="3" rowspan="3" class="greenBox">
<table class="subTable">
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td>7</td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td>3</td>
<td>1</td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td>2</td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
</table>
</td>
</tr>
<tr>
<th>B</th>
</tr>
<tr>
<th>C</th>
</tr>
<tr>
<th>D</th>
<td colspan="3" rowspan="3" class="goldBox">
<table class="subTable">
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td>6</td>
<td contentEditable="true" class="sudEnter"></td>
<td>9</td>
</tr>
<tr>
<td>4</td>
<td>7</td>
<td>2</td>
</tr>
</table>
</td>
<td colspan="3" rowspan="3" class="greenBox">
<table class="subTable">
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td>2</td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td>9</td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
</table>
</td>
<td colspan="3" rowspan="3" class="goldBox">
<table class="subTable">
<tr>
<td>9</td>
<td>3</td>
<td>7</td>
</tr>
<tr>
<td>4</td>
<td contentEditable="true" class="sudEnter"></td>
<td>8</td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
</table>
</td>
</tr>
<tr>
<th>E</th>
</tr>
<tr>
<th>F</th>
</tr>
<tr>
<th>G</th>
<td colspan="3" rowspan="3" class="greenBox">
<table class="subTable">
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td>1</td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td>6</td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
</table>
</td>
<td colspan="3" rowspan="3" class="goldBox">
<table class="subTable">
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td>8</td>
<td contentEditable="true"></td>
<td>1</td>
</tr>
</table>
</td>
<td colspan="3" rowspan="3" class="greenBox">
<table class="subTable">
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td>7</td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
</table>
</td>
</tr>
<tr>
<th>H</th>
</tr>
<tr>
<th>I</th>
</tr>
</tbody>
</table>
That's my Sudoku in html and here is the JS I have at the moment:
function inputCheck() {
var userInput = ""
userInput = document.getElementsByClassName("sudEnter");
if (userInput > 0) {
userInput === userInput;
} else if (userInput < 9) {
userInput === userInput;
} else {
document.getElementsByClassName("sudEnter").value = "";
}
}
document.addEventListener("keyup", inputCheck);
In your if you are using === which is used to compare variables. You are basically comparing userInput to userInput. Just use one = though you don't have to do anything at all for that if.
Try substituting input type="number" element with min attribute set to 0 , max attribute set to 9 for td element
$("input").change(function() {
if (this.value > this.max) {
this.value = this.max
}
if (this.value < this.min) {
this.value = this.min
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="number" min="0" max="9" value="0" />
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">test</td></tr>
</thead><tbody>
<tr>
<td>click</td>
<td>//div[#id='wrapper']/div/div/div</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//div[#id='dataTableContent']/div/div/div[2]/table/tbody/tr[1]/td</td>
<td>2</td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=backButton</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//div[#id='dataTableContent']/div/div/div[2]/table/tbody/tr[2]/td</td>
<td>2</td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=backButton</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//div[#id='dataTableContent']/div/div/div[2]/table/tbody/tr[3]/td</td>
<td>2</td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=backButton</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//div[#id='dataTableContent']/div/div/div[2]/table/tbody/tr[4]/td</td>
<td>2</td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=backButton</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>
I want to click through 4 sections.
All have the same path, but not the same tablediv.
/div/div/div[2]/table/tbody/tr[1]/td
--> 1 to 4
How can I do this, thats the code are minimalize,
how can I use a while loop here?
The Code in Selenium has 18 commands..
Thanks
Since you are using Selenium IDE rather than WebDriver, the only "while" loop that you'll be able to execute is by executing plain old javascript.
<tr>
<td>store</td>
<td>iterator</td>
<td>1</td>
</tr>
<tr>
<td>storeEval</td>
<td>while (iterator <= 4) { browserBot.click("/div/div/div[2]/table/tbody/tr[1]/td[" + iterator + "]" }</td>
<td></td>
</tr>
You'll of course need to play with it, this is pseudo-code but will give a pretty decent idea of how to solve it using the IDE.