when i click on dropdown then select multiple after that i have show same table repeatedly, But i want to show that table with different colors.I have append a table on click function, but i want to stop append when i click fourth time on button and also change the color of table at that time I am new in coding..please help me!
<script>
function yesnoCheck(that) {
if (that.value == "single") {
document.getElementById("first").style.display = "block";
$("#dynamic-forms").empty();
document.getElementById("dynamic-forms").style.display = "none";
document.getElementById("t1").value = "";
$("#dynamic-forms").empty();
document.getElementById("t2").value = "";
$("#dynamic-forms").empty();
document.getElementById("t3").value = "";
$("#dynamic-forms").empty();
document.getElementById("t4").value = "";
$("#dynamic-forms").empty();
document.getElementById("t5").value = "";
$("#dynamic-forms").empty();
document.getElementById("t6").value = "";
$("#dynamic-forms").empty();
document.getElementById("formButton").value = "";
// document.getElementById("form1").value = "clear";
// this.removeparent(form.firstElementChild);
}
else {
document.getElementById("first").style.display = "none";
}
if (that.value == "multiple") {
document.getElementById("second").style.display = "block";
}
else {
document.getElementById("second").style.display = "none";
}
}
// $(document).ready(function () {
$(document).on("click","#tbl1",function (click) {
click.preventDefault();
this.parentElement.remove();
})
$(document).ready(function () {
$("#formButton").click(function () {
// document.form1.style.backgroundColor = 'salmon';
// event.target.style.backgroundColor = 'salmon';
// form1.style.backgroundColor = 'coral';
document.getElementById("dynamic-forms").style.display = "block";
// form1.style.backgroundColor = 'coral';
$("#dynamic-forms").append(
`
<form id="form1" style="margin-bottom:10px;margin-top:10px">
<button style="float:right; margin-right:400px;" type="button1" id="tbl1" value="clear">-</button>
<table style="background-color: #91c8e3;">
<tr>
<td id="location">Location
<input type="text" value="`+$("#pan").val()+`">
</td>
<td>P1
<input type="text">
</td>
</tr>
<tr>
<td>P2
<input type="text">
</td>
<td>P3
<input type="text">
</td>
</tr>
<tr>
<td>Sometime
<input type="text">
</td>
<td>Full day
<input type="text">
</td>
</tr>
</table>
</form>
`
)
$("#pan").val("");
});
});
jQuery(function ($) {
function copyForms($pan, $location) {
$(':input[name]', $location).val(function () {
return $(':input[name=' + this.name + ']', $pan).val();
});
}
$('#pan').on('click', function () {
copyForms($('#pan'), $('#location'));
});
});
</script>
</head>
<body style="background-color: #0979ad; ">
<br><br>
<center>
<div>
<select id="selector" onchange="yesnoCheck(this);">
<option value="select">__Select__</option>
<option value="single">Single</option>
<option value="multiple">Multiple</option>
</select>
</div>
</center>
<br><br>
<center>
<div id="first" style="display: none;">
<table id="tbl" style="background-color: #225670ad;">
<tr>
<td>Location
<input id="t1" type="text">
</td>
<td>P1
<input id="t2" type="text">
</td>
</tr>
<tr>
<td>P2
<input id="t3" type="text">
</td>
<td>P3
<input id="t4" type="text">
</td>
</tr>
<tr>
<td>Sometime
<input id="t5" type="text">
</td>
<td>Full day
<input id="t6" type="text">
</td>
</tr>
</table>
</div>
</center>
<center>
<div id="second" style="display:none;">
<label>Location</label>
<input type="text" id="pan" name="pan">
<button type="button" id="formButton">+</button>// when click on this button
</div>
</center>
<br><br><br>
<center id="dynamic-forms">
</center> <br><br>
</body>
</html>
Hello,I am new in coding and this is my code i want to change my table color repeatedly on click function
when i click on dropdown then select multiple after that i have show same table repeatedly, But i want to show that table with different colors.
