In my project i have a table that populate data into. In this table i have a dynamic header with span(x axis)
and dynamic value with input(y axis)
. They are both populated dynamically depending on user insert. In between them are input checkbox. The main goal is to find the value of a certain span
and find the value of a certain input
then locate the checkbox where they meet then check the checkbox.
Here is what i have tried
var $td = $('#flooring').find('span:contains('+value.floorno+')').find('input[value='+ value.material +']');
$('#flooringtable tr:not(:eq(0)) td').find(':eq('+$td.index()+')').find('input[type="checkbox"]').prop("checked", true);
UPDATE
This is the default table since i add the input dynamically it is not here
<table id="flooring">
<tr>
<td><strong><p>Flooring</p></strong>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<hr/>
</td>
<td>
<span>1st Floor</span>
</td>
<td>
<span>2nd Floor</span>
</td>
<td>
<span>3rd Floor</span>
</td>
<td>
<span>4th Floor</span>
</td>
</tr>
<tr>
<td><span>Reinforced Concrete</span>
</td>
<td>
<input type="checkbox" class="floor1st checkboxfloor" name="flooring[]" />
</td>
<td>
<input type="checkbox" class="floor2nd checkboxfloor" name="flooring[]" />
</td>
<td>
<input type="checkbox" class="loor3rd checkboxfloor" name="flooring[]" />
</td>
<td>
<input type="checkbox" class="floor4th checkboxfloor" name="flooring[]" />
</td>
</tr>
<tr>
<td><span>Plain Cement</span>
</td>
<td>
<input type="checkbox" class="floor1st checkboxfloor" name="flooring[]" />
</td>
<td>
<input type="checkbox" class="floor2nd checkboxfloor" name="flooring[]" />
</td>
<td>
<input type="checkbox" class="floor3rd checkboxfloor" name="flooring[]" />
</td>
<td>
<input type="checkbox" class="floor4th checkboxfloor" name="flooring[]" />
</td>
</tr>
<tr>
<td><span>Marble</span>
</td>
<td>
<input type="checkbox" class="floor1st checkboxfloor" name="flooring[]" />
</td>
<td>
<input type="checkbox" class="floor2nd checkboxfloor" name="flooring[]" />
</td>
<td>
<input type="checkbox" class="floor3rd checkboxfloor" name="flooring[]" />
</td>
<td>
<input type="checkbox" class="floor4th checkboxfloor" name="flooring[]" />
</td>
</tr>
<tr>
<td><span>Wood</span>
</td>
<td>
<input type="checkbox" class="floor1st checkboxfloor" name="flooring[]" />
</td>
<td>
<input type="checkbox" class="floor2nd checkboxfloor" name="flooring[]" />
</td>
<td>
<input type="checkbox" class="floor3rd checkboxfloor" name="flooring[]" />
</td>
<td>
<input type="checkbox" class="floor4th checkboxfloor" name="flooring[]" />
</td>
</tr>
<tr>
<td><span>Tiles</span>
</td>
<td>
<input type="checkbox" class="floor1st checkboxfloor" name="flooring[]" />
</td>
<td>
<input type="checkbox" class="floor2nd checkboxfloor" name="flooring[]" />
</td>
<td>
<input type="checkbox" class="floor3rd checkboxfloor" name="flooring[]" />
</td>
<td>
<input type="checkbox" class="floor4th checkboxfloor" name="flooring[]" />
</td>
</tr>
</table>
Here is the adding of row
var newRow = $('<tr/>');
var i = 0;
newRow.append('<td ><input type="checkbox" class="materialsothersdeleteflagfloor" name="materialsothersdeleteflag[]" />Other(Specify)<span id="materialsfloor_inputtext_othersspan"><input type="text" value = "' + value.material + '" name="" class="" id="materialsfloor_inputtext_others' + i + '"></td>');
for (i; i < numberCheckBox; i++) {
newRow.append('<td><input type="checkbox" class="materialsfloor' + i + ' checkboxmatfloor" name="materialsflooring[]" /></td>');
//$('.checkboxmatfloor[value="' + value.floorno + " " + value.material + '"]').prop("checked", true);
}
Latest / Final Revision
This is literally like 5-6 lines of code. So clean.
function getNewRow(value) {
$('#flooring tr:last-child input.checkboxfloor').each( function(i) {
value.ret = i === 0 ?
'<td ><input type="checkbox" class="othersdeleteflagfloor" name="deleteflag[]" />' +
'Other(Specify)<span id="materialsfloor_inputtext_othersspan">
<input type="text" value = "' + value.material + '" name="floor_inputtext_others'+
value.material.replace(" ", "") + '" class="fcheck" ' +
'id="floor_inputtext_others'+ value.material.replace(" ", "") + '"></td>' +
'<td><input type="checkbox" class="materialsfloor' +
value.material.replace(" ", "") + i + ' checkboxfloor" name="flooring[]" ' +
((i === (parseInt (value.floorno.slice(0,1))-1)) ? 'checked' : '') + ' /></td>' :
value.ret + '<td><input type="checkbox" class="materialsfloor' +
value.material.replace(" ", "") + i + ' checkboxfloor" name="flooring[]" ' +
((i === (parseInt (value.floorno.slice(0,1))-1)) ? 'checked' : '') + ' /></td>';
});
return $('<tr/>').html(value.ret);
}
$.each(strucmat, function (key, value) {
value.otherflag === '0' && value.location === "floor" ?
$("input[value*=\""+value.material+"\"].floor"+value.floorno.slice(0,3))
.prop("checked", true) : (value.location === "floor" ?
$("input[value*=\""+value.material+"\"].fcheck").val() ?
$("input[type=\"checkbox\"].materialsfloor"+ value.material.replace(" ", "") +
(value.floorno.slice(0,1)-1)).prop("checked", true) :
$("#flooring > tbody > tr:last").after(getNewRow(value)) : null);
});
NOTES: Material was the only unique identifier available. I'm not sure what kind of data will eventually be in that variable, but I used a replace to strip the spaces from it.
(value.material.replace(' ', '');)
You may need to add other characters to be stripped out. All we are doing with this is creating a unique ID with it, so no matter what you end up stripping out, when you go to retrieve the value, just use the same replace you did when you created it. Hope that makes sense.
Other than that, I just did some checks on the data and adjusted some of the selectors you were using to check or uncheck the boxes on the fly.
In the case where there were more than one of a material type, I just check if that material exists, if it does, instead of adding a new row, I just find the box for that floor and that material and check it.
Let me know if you have any other issues with it. :)
Have I lost my mind? Maybe ... Maybe ...
function cf(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,w,x,y,z,aa,bb,cc,dd,ee,gg,hh,jj,kk,mm,nn){
for(var ii=0,xx=arguments,ww=xx[atob(nn)];ii<ww;ii++){xx[ii]=atob(xx[ii]);}
function gi(tt,ii,v,ff,rl){return(tt===u?'<'+kk+'><'+i+' '+t+'="'+b+'" '+mm+'="'+cc+dd+f+'" '+jj+'="'+dd+'[]" />'+
hh+'('+gg+')<'+i+' '+t+'="'+bb+'" '+z+'="'+v[m]+'" '+jj+'="'+f+'_'+i+bb+'_'+cc+rl+'" '+mm+'="'+g+'" '+ee+'="'+f+
'_'+i+bb+'_'+cc+rl+'"></'+kk+'>':'')+'<'+kk+'><'+i+' '+t+'="'+b+'" '+mm+'="'+m+'s'+f+rl+ii+' '+b+f+'" '+jj+'="'+
q+'[]" '+(ii===(parseInt(ff))?c:'')+' /></'+kk+'>';}
return function(zz,v){var sl=v[k][w](0,1)-1;var rl=v[m][aa](' ','');var yy='';
v[l]===f?(v[o]==='0'?$(i+'['+z+"*=\""+v[m]+"\"]."+f+v[k][w](0,3))[p](c,y) :
($(i+'['+z+'*="'+v[m]+'"].'+g).val()?$(i+"["+t+"=\""+b+"\"]."+m+"s"+f+rl+sl)[p](c,y) :
$("#"+q+">"+j+">"+u+r+":"+s)[a]($('<'+u+r+'/>')[h](function(){
$('#'+q+' '+u+r+':'+s+'-'+d+' '+i+'.'+b+f)[e](function(iii) {
yy=yy+gi((iii===0?u:x),iii,v,sl,rl);});return yy;})))):n;};}
$.each(strucmat,cf('YWZ0ZXI',"Y2hlY2tib3g=","Y2hlY2tlZA==",'Y2hpbGQ=','ZWFjaA==','Zmxvb3I=','ZmNoZWNr','aHRtbA==','aW5wdXQ=','dGJvZHk=','Zmxvb3Jubw==','bG9jYXRpb24=','bWF0ZXJpYWw=',null,'b3RoZXJmbGFn','cHJvcA==','Zmxvb3Jpbmc=','cg==','bGFzdA==','dHlwZQ==','dA==','c2xpY2U=','eA==',true,'dmFsdWU=','cmVwbGFjZQ==','dGV4dA==','b3RoZXJz','ZGVsZXRlZmxhZw==','aWQ=','U3BlY2lmeQ==','T3RoZXI=','bmFtZQ==','dGQ=','Y2xhc3M=','bGVuZ3Ro'));
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments