selector for input with a dynamic value and span with dynamic value jquery

Brownman Revival

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);
    }
Tech Savant

JSFIDDLE-REV:LUCKY7

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 ...

Revision 10

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.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

jquery get dynamic span id value

From Dev

Dynamic value for jQuery selector $(dynamiValueHere).show();

From Dev

jQuery dynamic input value of another Input

From Dev

Jquery read value of dynamic input field

From Dev

How to get a dynamic JQuery Selector from js function parameter value?

From Dev

Why Jquery selector by 'value' not work in case of dynamic change

From Dev

Javascript: dynamic calculation input value

From Dev

Set initial default value in Angularjs dynamic selector

From Dev

How to get value of dynamic input text using jquery?

From Dev

How to get value of dynamic input text using jquery?

From Dev

jquery get dynamic php value of hidden input type

From Dev

How to set name value of dynamic adding input ? javascript jquery

From Dev

how to generate dynamic input and get the value by id using jquery

From Dev

Can't change width of input with dynamic value in jquery

From Dev

JQuery - Value is undefined for a dynamic element

From Dev

Jquery dynamic selector error

From Dev

jQuery on() with dynamic selector

From Dev

Make dynamic selector jQuery

From Dev

Make jquery selector dynamic

From Dev

jQuery Selector for Dynamic Form

From Dev

angular ng-loop dynamic input and dynamic value to data processing

From Dev

Get the value from a dynamic input element

From Dev

Get value of dynamic input element in form object

From Dev

AngularJS dynamic input value binding to an array model

From Dev

Get the value from a dynamic input element

From Dev

Angular js Dynamic Input and show value

From Dev

Why is a dynamic input value not showing a change with Angularjs?

From Dev

AngularJS dynamic input value binding to an array model

From Dev

Dynamic value from input in datatables url

Related Related

  1. 1

    jquery get dynamic span id value

  2. 2

    Dynamic value for jQuery selector $(dynamiValueHere).show();

  3. 3

    jQuery dynamic input value of another Input

  4. 4

    Jquery read value of dynamic input field

  5. 5

    How to get a dynamic JQuery Selector from js function parameter value?

  6. 6

    Why Jquery selector by 'value' not work in case of dynamic change

  7. 7

    Javascript: dynamic calculation input value

  8. 8

    Set initial default value in Angularjs dynamic selector

  9. 9

    How to get value of dynamic input text using jquery?

  10. 10

    How to get value of dynamic input text using jquery?

  11. 11

    jquery get dynamic php value of hidden input type

  12. 12

    How to set name value of dynamic adding input ? javascript jquery

  13. 13

    how to generate dynamic input and get the value by id using jquery

  14. 14

    Can't change width of input with dynamic value in jquery

  15. 15

    JQuery - Value is undefined for a dynamic element

  16. 16

    Jquery dynamic selector error

  17. 17

    jQuery on() with dynamic selector

  18. 18

    Make dynamic selector jQuery

  19. 19

    Make jquery selector dynamic

  20. 20

    jQuery Selector for Dynamic Form

  21. 21

    angular ng-loop dynamic input and dynamic value to data processing

  22. 22

    Get the value from a dynamic input element

  23. 23

    Get value of dynamic input element in form object

  24. 24

    AngularJS dynamic input value binding to an array model

  25. 25

    Get the value from a dynamic input element

  26. 26

    Angular js Dynamic Input and show value

  27. 27

    Why is a dynamic input value not showing a change with Angularjs?

  28. 28

    AngularJS dynamic input value binding to an array model

  29. 29

    Dynamic value from input in datatables url

HotTag

Archive