如何在 div 标签上添加斑马条纹背景答案

【问题标题】：How to add zebra stripe background on div tag如何在 div 标签上添加斑马条纹背景
【发布时间】：2019-01-16 11:45:44
【问题描述】：

我想用 div 标签替换行颜色。当用户单击添加更多按钮时，我的第二个 div 被追加

<div id="dynamic_field">    
    <div class="row"> 
        <div class="col s12"  style="padding-top: 12px;">
            <div class="col s12 m12 ">
                <?php if($ViewID!=''){
        $edu_view=mysql_query("SELECT * FROM tbl_student_education WHERE studentid= '$v_stduentid' and student_resume_id='$ViewID'");
        while($Get_edu=mysql_fetch_array($edu_view)) {?>
             <div class="col s12 m12 "><label for="title">Certificate Title</label>
                <textarea  class="materialize-textarea" style="padding: 0px;" id="title" name="title[]"><?php echo $Get_edu['degree'];?></textarea>
             </div>
             <div class="col s12 m12 "><label for="title">School / College, City</label>

                <textarea  id="location" name="location[]" class="materialize-textarea" style="padding: 0px;"><?php echo $Get_edu['location'];?></textarea>
            </div>
              <div class="col s3 m3 "><label for="title">Marks</label>
                <input id="marks" name="marks[]" type="text" value="<?php echo $Get_edu['marks'];?>"  />
             </div>
             <div class="col s3 m3 "><label for="title">Division</label>
                <input id="divsion" name="divsion[]" type="text" value="<?php echo $Get_edu['division'];?>" placeholder="1st" />
             </div>
              <div class="col s3 m3 "><label for="title">Year</label>
                <input id="year" name="year[]" type="text" value="<?php echo $Get_edu['passing_year'];?>"  />
             </div>
        <?php } } ?>        
                <?php if($EditID!=''){
        $edu_edit=mysql_query("SELECT * FROM tbl_student_education WHERE studentid= '$e_stduentid' and student_resume_id='$EditID'");
        while($Get_edu=mysql_fetch_array($edu_edit)) {?>
             <div class="col s12 m12 "><label for="title">Certificate Title</label>
                <textarea  class="materialize-textarea" style="padding: 0px;" id="title" name="title[]"><?php echo $Get_edu['degree'];?></textarea>
             </div>
             <div class="col s12 m12 "><label for="title">School / College, City</label>

                <textarea  id="location" name="location[]" class="materialize-textarea" style="padding: 0px;"><?php echo $Get_edu['location'];?></textarea>
            </div>
              <div class="col s3 m3 "><label for="title">Marks</label>
                <input id="marks" name="marks[]" type="text" value="<?php echo $Get_edu['marks'];?>"  />
             </div>
             <div class="col s3 m3 "><label for="title">Division</label>
                <input id="divsion" name="divsion[]" type="text" value="<?php echo $Get_edu['division'];?>" placeholder="1st" />
             </div>
              <div class="col s3 m3 "><label for="title">Year</label>
                <input id="year" name="year[]" type="text" value="<?php echo $Get_edu['passing_year'];?>"  />
             </div>


        <?php } ?>
         <div class="col s3 m3"><button type="button" name="add" id="add" class="btn btn-success pull-right">Add More</button></div>
    <?php   } ?>
                <?php if($ViewID=='' && $EditID==''){?>
             <div class="col s12 m12 "><label for="title">Certificate Title</label>
                <textarea  class="materialize-textarea" style="padding: 0px;" id="title" name="title[]">Higher School Secondary Certificate</textarea>
             </div>
             <div class="col s12 m12 "><label for="title">School / College, City</label>

                <textarea  id="location" name="location[]" class="materialize-textarea" style="padding: 0px;"></textarea>
            </div>
              <div class="col s3 m3 "><label for="title">Marks</label>
                <input id="marks" name="marks[]" type="text" value=""  />
             </div>
             <div class="col s3 m3 "><label for="title">Division</label>
                <input id="divsion" name="divsion[]" type="text" value="" placeholder="1st"  />
             </div>
              <div class="col s3 m3 "><label for="title">Year</label>
              <select id="year"  name="year[]">
                <option value="2019" selected>2019</option>
                <option value="2018">2018</option>
                <option value="2017">2017</option>

              </select>
             </div>

             <div class="col s3 m3"><button type="button" name="addmoreEdu" id="addmoreEdu" class="btn btn-success pull-right" >Add More</button></div>
             <?php } ?>  
            </div>
        </div> 
    </div>
</div>

我确实尝试添加这个 CSS：

#dynamic_field > div:nth-of-type(odd) {
    background: #f5f5f5;
}

问题是当用户点击添加更多按钮时，行中的背景颜色不会改变。这是我的 jQuery 代码，当单击添加更多按钮时会附加 div。

$(document).ready(function(){  
  var i=0;  
  $('#addmoreEdu').click(function(){ 
       i++;  
       $('#dynamic_field').append('<div id="row'+i+'"><div class="col s12 m12 "><label for="title">Certificate Title</label><textarea  class="materialize-textarea" style="padding: 0px;" id="title'+i+'" name="title[]">Secondary School Certificate</textarea></div><div class="col s12 m12 "><label for="title">School / College, City</label><textarea  id="location'+i+'" name="location[]" class="materialize-textarea" style="padding: 0px;"></textarea></div><div class="col s3 m3 "><label for="title">Marks</label><input id="marks'+i+'" name="marks[]" type="text" value=""  /></div><div class="col s3 m3 "><label for="title">Division</label><input id="divsion'+i+'" name="divsion[]" type="text" value="" placeholder="1st"  /></div><div class="col s3 m3 "><label for="title">Year</label><select name="year[]"><option value="2019" selected>2019</option><option value="2018">2018</option><option value="2017">2017</option><option value="2016">2016</option><option value="2015">2015</option></select></div><div class="col s3 m3"><button type="button" name="remove" id="'+i+'" class="btn btn-danger button btn_remove">X</button></div></div>');  
  $('select').material_select('');

$('.btn_remove').click(function(){ 
       var button_id = $(this).attr("id");   
       $('#row'+button_id+'').remove();  
  });
});
});

这很容易在 tr 标签上应用斑马条纹，但我很困惑如何在 div 标签上应用它。

【问题讨论】：

我不知道斑马条纹是什么意思，但这里有一篇关于条纹 css 背景的文章：css-tricks.com/stripes-css
阅读此w3schools.com/bootstrap/bootstrap_tables.asp
我将您的代码放在JSFiddle 中，它按预期工作，那么您能否生成一个证明问题的minimal reproducible example？
当用户点击添加更多按钮时，第一次 div 背景为白色，然后下一个 div 背景将变为灰色.. 当用户再次添加更多按钮时，第三个 div 背景再次为白色
w3schools.com/css/tryit.asp?filename=trycss_table_striped 我想要这样......它在桌子上工作，但我想要在 div 上

标签： javascript jquery html css

【解决方案1】：

$(document).ready(function(){  
      var i=0;
        
      $('#addmoreEdu').click(function(){ 
           i++;  
           
           $('#dynamic_field').append('<div class="row"><div id="row'+i+'"><div class="col s12 m12 "><label for="title">Certificate Title</label><textarea  class="materialize-textarea" style="padding: 0px;" id="title'+i+'" name="title[]">Secondary School Certificate</textarea></div><div class="col s12 m12 "><label for="title">School / College, City</label><textarea  id="location'+i+'" name="location[]" class="materialize-textarea" style="padding: 0px;"></textarea></div><div class="col s3 m3 "><label for="title">Marks</label><input id="marks'+i+'" name="marks[]" type="text" value=""  /></div><div class="col s3 m3 "><label for="title">Division</label><input id="divsion'+i+'" name="divsion[]" type="text" value="" placeholder="1st"  /></div><div class="col s3 m3 "><label for="title">Year</label><select name="year[]"><option value="2019" selected>2019</option><option value="2018">2018</option><option value="2017">2017</option><option value="2016">2016</option><option value="2015">2015</option></select></div><div class="col s3 m3"><button type="button" name="remove" id="'+i+'" class="btn btn-danger button btn_remove">X</button></div></div></div>');  
	   
	$('.btn_remove').click(function(){ 
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });
 	});
 	});

#dynamic_field > div:nth-of-type(even) {
    background: #f5f5f5;
}

 <div id="dynamic_field"> 	
		<div class="row"> 
     		<div class="col s12"  style="padding-top: 12px;">
        <div class="col s12 m12 "><label for="title">Certificate Title</label>
     		 	 	<textarea  class="materialize-textarea" style="padding: 0px;" id="title" name="title[]">Higher School Secondary Certificate</textarea>
     		 	 </div>
     		 	 <div class="col s12 m12 "><label for="title">School / College, City</label>
     		 	
     		 	 	<textarea  id="location" name="location[]" class="materialize-textarea" style="padding: 0px;"></textarea>
    			</div>
     		 	  <div class="col s3 m3 "><label for="title">Marks</label>
     		 	 	<input id="marks" name="marks[]" type="text" value=""  />
     		 	 </div>
     		 	 <div class="col s3 m3 "><label for="title">Division</label>
     		 	 	<input id="divsion" name="divsion[]" type="text" value="" placeholder="1st"  />
     		 	 </div>
     		 	  <div class="col s3 m3 "><label for="title">Year</label>
     		 	  <select id="year"  name="year[]">
     		 	  	<option value="2019" selected>2019</option>
     		 	  	<option value="2018">2018</option>
     		 	  	<option value="2017">2017</option>
     		 	  	<option value="2016">2016</option>
     		 	  	<option value="2015">2015</option> 	  	
     		 	  </select>
     		 	 </div>
     		 	 
     		 	 <div class="col s3 m3"><button type="button" name="addmoreEdu" id="addmoreEdu" class="btn btn-success pull-right" >Add More</button></div>
        
        </div>
    </div>
 </div>
 <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

现在这正如我预期的那样完美运行。我在 div 中进行了一些更改，然后在 div 上显示斑马条纹

【讨论】：