Clash Royale CLAN TAG

Hide dropdown when adding new row in JQuery

In my Application, I can add a new row by clicking on the '+' sign.
When clicked on '+' sign new row got created but I want some particular field to be hidden when clicking on '+' sign and those hidden fields will be shown by satisfying some conditions. How can I achieve this feature when creating the new row?

Code for adding new row:

$("#addRow").click(function() {
openSearchdiv = true;
$("#searchTable").append('
<tr>
<td>
<select class="lovs" id="field" >
<option value="select"></option>
<option value="rowid_system">Source System Name</option>
<option value="rule_num">Rule No</option>
</select>
</td>
<td>
<select class="lovs" id="operator">
<option value="EQUAL">EQUAL</option>
<option value="NOT EQUAL">NOT EQUAL</option>
</select>
</td>
<td></td>
<td>
<select class="lovs" id="function">
<option value="AND">AND</option>
</select>
</td>
<td align="center"><img alt="" title="Delete" id="deleteRow" src="/MatchMergeAPI_POC/img/minus.png" style="height:15px;width:15px;"></td>
</tr>');
});


When the table first loaded I am hiding the value drop down. And it is visible by clicking on the field name. So I want this behavior to be the same when clicked on '+' sign. Presently I am just putting as blank when appending the table row.

Populating Dropdown values:

$("#searchTable").on('click','#field',function(){
//alert('hi');
//var showSpan = false;
var showHide = false;
var showRule = false;
var srcNameInd = false;
var src=null;

$("#searchTable tbody >tr").each(function()
{
$("td > *",this).each(function()
{
if (this.nodeName == "SELECT") {
if ($(this).attr("id") == "field") {

field = $(this).val();

if(field=="rowid_system" )
{
showHide=true;

console.log('rowid_system');

//populate value for source name
//$("#field").on('click',function(){
//alert('ajax call');
$.ajax({
url: contextPath+"/getSourceName/ORG",
datatype: "JSON",
type: "Get",
contentType : "application/json; charset=utf-8",
success: function(data)
{
srcName.populateSrcName(
data,
$('#srcName')

);
}

});


1 Answer
1

You could hide the select of the last row you've added to the table after the append line, like :

$("#searchTable tr:last select").hide();


Or you could add inline style while appending like :

$("#searchTable").append('<tr><td><select style="display:none" class="lovs" id="fi...');


You could also add a class that hides the field then remove it when you want to show it again :

.hide{
display: none;
}

$("#searchTable").append('<tr><td><select class="lovs hide" id="fi...');


And try to use event delegation on the click like :

$('body').on('click', '#addRow', function() {
//Your flow here
});


+

#addRow

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.