带动态值的输入选择器和带有动态值jquery的跨度

时间：2015-04-11 04:01:25

标签： javascript jquery html

在我的项目中，我有一个填充数据的表。在此表中，我有一个动态标头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);

更新

这是默认表，因为我动态添加输入不在这里

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

1 个答案:

答案 0 :(得分：1)

JSFIDDLE-REV:LUCKY7

最新/最终修订

这就像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(' ', '');)

您可能需要添加要删除的其他字符。我们所做的就是用它创建一个唯一的ID，所以无论你最终剥离什么，当你去检索它时，只需使用你创建它时所做的相同替换。希望这是有道理的。

除此之外，我只是对数据进行了一些检查，并调整了一些用于检查或取消选中框的选择器。

如果材料类型不止一种，我只检查该材料是否存在，如果存在，而不是添加新行，我只找到该地板和该材料的框并检查它。

如果您有任何其他问题，请告诉我。 ：）

我是否忘记了？也许......也许......

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'));
相关问题
最新问题