селектор для ввода с динамическим значением и диапазоном с динамическим значением jquery

Question

В моем проекте у меня есть таблица, в которую заполняются данные. В этой таблице у меня есть динамический заголовок с span(x axis) и динамическое значение с input(y axis). Они динамически заполняются в зависимости от пользовательской вставки. Между ними установлен флажок ввода. Основная цель - найти значение некоторого span и найти значение определенного input, а затем установить флажок, где они встречаются, и установить флажок.

Вот что я попробовал

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

Это таблица по умолчанию, так как я добавить входной динамически не здесь

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

Вот добавление строки

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

Answer 1

JSFIDDLE-REV:LUCKY7

Последние/Final Revision

Это буквально как 5-6 строк кода. Так чисто.

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

ПРИМЕЧАНИЯ: Материал был единственным уникальным идентификатором. Я не уверен, какие данные в конечном итоге будут в этой переменной, но я использовал замену, чтобы удалить из нее пробелы.

(value.material.replace(' ', '');) 

Возможно, вам придется добавить другие символы для удаления. Все, что мы делаем с этим, - это создание с ним уникального идентификатора, поэтому, несмотря на то, что вы в конечном итоге удаляете, когда вы переходите на получение значения, просто используйте ту же замену, которую вы сделали при ее создании. Надеюсь, это имеет смысл.

Кроме этого, я просто сделал некоторые проверки данных и скорректировал некоторые из селекторов, которые вы использовали, чтобы проверить или снять флажки на лету.

В случае, когда было несколько типов материалов, я просто проверяю, существует ли этот материал, если это так, вместо добавления новой строки, я просто нахожу коробку для этого пола и этот материал и проверяю Это.

Сообщите мне, если у вас есть другие проблемы. :)

Я потерял рассудок? Может быть ... Может быть ...

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'));