javascript - 如何在 div 标签上添加斑马条纹背景
问题描述
我想用 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 标签上应用它。
解决方案
$(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 上显示斑马条纹
推荐阅读
- vue.js - IE11 - 无法打开 http://localhost:8080
- c++ - 如何访问不在基类中的派生类中的 STL 类的成员函数?(正文中的详细解释)
- r - 如何在 dplyr 函数的左侧执行 NSE?
- c - 消息队列消息接收给出错误无效参数
- python - 如何正则表达式完全匹配由任意数量的换行符和/或文本分隔的两个时间戳
- javascript - 使用 jquery 附录部分计算 jquery / javascript 中的文本字段数组?
- ios - 如何获取专辑的缩略图
- python-3.x - 使用 for 循环替换 dict 中键的值
- mysql - 如何将选择语句结果转换为 JSONARRAY 并更新另一个表
- javascript - 在 TinyMCE 中输入下线时出错