function disableField() { var Count = $('#dataTable tr').length; if (Count == 2){ $("input").not('.DeleteButton').prop('disabled', false); }else{ $("input").prop('disabled', false); } } //-------------------------------------------------- var regex = /^([a-zA-Z0-9 _-] )$/; var cindex = 0; var quicklink = '' ; $(document).on('click','.Buttons', function(addrow) { var count = $('table tr:last input:text').filter((_,el) ={amp}gt; el.value.trim() == "").length; if(count || !$('.id_100 option[value=code]').attr('selected','selected')){ alert("Please fill the current row"); return false; } var $tr = $('#dataTable tbody tr:last'); var $clone = $tr.clone(true); cindex  ; $clone.find(':input').not('select').not('.DeleteButton').val('').attr('disabled', true); $clone.attr('id', 'id' (cindex) ); //update row id if required //update ids of elements in row $clone.find("*").each(function() { var id = this.id || ""; if(id != ""){ var match = id.match(regex) || []; if (match.length == 2) { this.id = this.name   (cindex); } } }); $tr.after($clone); }); 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;table cellspacing="0" cellpadding="0" border="0" id="mainbox" class="mainbox"{amp}gt;{amp}lt;tr{amp}gt;{amp}lt;td{amp}gt; {amp}lt;div class="toppanel"{amp}gt;{amp}lt;ul{amp}gt;{amp}lt;li{amp}gt;{amp}lt;/li{amp}gt;{amp}lt;/ul{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="abcd"{amp}gt; {amp}lt;!--mainbox middlepanel start--{amp}gt; {amp}lt;table cellspacing="0" cellpadding="0" border="0" id="maintable" class="maintable"{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td valign="top"{amp}gt; {amp}lt;div id="pageheadingpanel"{amp}gt; {amp}lt;div id="pageheading"{amp}gt;Quick Link Widget Configuration{amp}lt;/div{amp}gt; {amp}lt;div id="pageheadingdate"{amp}gt;{amp}lt;xsl:call-template name="formatted_date"/{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td height="100%" valign="top"{amp}gt; {amp}lt;div class="y_scroll" id="contentarea"{amp}gt; {amp}lt;div class="contentarea"{amp}gt;{amp}lt;!--contentarea start--{amp}gt; {amp}lt;span id="box" class="box"{amp}gt; {amp}lt;!--rounded curve/border start--{amp}gt; {amp}lt;div class="middlepanel"{amp}gt; {amp}lt;!--contentarea box middlepanel start--{amp}gt; {amp}lt;div style="display:block" id="textBox1" {amp}gt; {amp}lt;span id="box1" class="box"{amp}gt; {amp}lt;div class="toppanel"{amp}gt;{amp}lt;ul{amp}gt;{amp}lt;li{amp}gt;{amp}lt;/li{amp}gt;{amp}lt;/ul{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="middlepanel"{amp}gt; {amp}lt;table border="0" cellspacing="1" cellpadding="1" id="dataTable" name="dataTable" class="graphtable"{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td class="headingalign" width="16%"{amp}gt;Links{amp}lt;/td{amp}gt; {amp}lt;td class="headingalign" width="32%"{amp}gt;Desciption{amp}lt;/td{amp}gt; {amp}lt;td class="headingalign" width="16%"{amp}gt;Image{amp}lt;/td{amp}gt; {amp}lt;td class="headingalign" width="16%"{amp}gt;URL{amp}lt;/td{amp}gt; {amp}lt;td class="headingalign" width="05%"{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody{amp}gt; {amp}lt;tr id="id0" class="vals" name="id0"{amp}gt; {amp}lt;td{amp}gt; {amp}lt;div class="id_100"{amp}gt; {amp}lt;select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()" {amp}gt; {amp}lt;option value=""{amp}gt;Select{amp}lt;/option{amp}gt; {amp}lt;xsl:for-each select="values from local db"{amp}gt; {amp}lt;xsl:sort order="ascending" select="description"/{amp}gt; {amp}lt;option value="{description}"{amp}gt; {amp}lt;xsl:value-of select="description"/{amp}gt; {amp}lt;/option{amp}gt; {amp}lt;/xsl:for-each{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; {amp}lt;input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext1" size="85" value="{//RESPONSE}" /{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; {amp}lt;input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext2" size="35" value="{//RESPONSE}" /{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; {amp}lt;input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext3" size="35" value="{//RESPONSE}" /{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; {amp}lt;input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton" type="button" /{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/tbody{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;div class="buttonarea"{amp}gt; {amp}lt;ul{amp}gt; {amp}lt;li{amp}gt;{amp}lt;input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;/div{amp}gt; 

У меня есть таблица с раскрывающимся столбцом. Всякий раз, когда я изменяю значения раскрывающегося списка, включаются соответствующие поля. Проблема, которую я получаю, состоит в том, что, если я изменю значения моего раскрывающегося списка предыдущей строки, столбцы текущей строки также будут включены. Любая помощь будет оценена. Благодарю. Изменить: Я добавил функцию «Добавить строку» тоже в моем коде.

Я добавил некоторые изменения в вашу функцию disableField . Передайте параметр (this) disableField (this) в эту функцию в событии chnage.

 function disableField(elem) { var Count = $('#dataTable tr').length; if (Count == 2){ $(elem).closest('tr').find("input").not('.DeleteButton').prop('disabled', false); } else{ $(elem).closest('tr').find("input").prop('disabled', false); }} //-------------------------------------------------- var regex = /^([a-zA-Z0-9 _-] )$/; var cindex = 0; var quicklink = '' ; $(document).on('click','.Buttons', function(addrow) { var count = $('table tr:last input:text').filter((_,el) ={amp}gt; el.value.trim() == "").length; if(count || !$('.id_100 option[value=code]').attr('selected','selected')){ alert("Please fill the current row"); return false; } var $tr = $('#dataTable tbody tr:last'); var $clone = $tr.clone(true); cindex  ; $clone.find(':input').not('select').attr('disabled', true); $clone.attr('id', 'id' (cindex) ); //update row id if required //update ids of elements in row $clone.find("*").each(function() { var id = this.id || ""; if(id != ""){ var match = id.match(regex) || []; if (match.length == 2) { this.id = this.name   (cindex); } } }); $tr.after($clone); }); 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;table cellspacing="0" cellpadding="0" border="0" id="mainbox" class="mainbox"{amp}gt;{amp}lt;tr{amp}gt;{amp}lt;td{amp}gt; {amp}lt;div class="toppanel"{amp}gt;{amp}lt;ul{amp}gt;{amp}lt;li{amp}gt;{amp}lt;/li{amp}gt;{amp}lt;/ul{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="abcd"{amp}gt; {amp}lt;!--mainbox middlepanel start--{amp}gt; {amp}lt;table cellspacing="0" cellpadding="0" border="0" id="maintable" class="maintable"{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td valign="top"{amp}gt; {amp}lt;div id="pageheadingpanel"{amp}gt; {amp}lt;div id="pageheading"{amp}gt;Quick Link Widget Configuration{amp}lt;/div{amp}gt; {amp}lt;div id="pageheadingdate"{amp}gt;{amp}lt;xsl:call-template name="formatted_date"/{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td height="100%" valign="top"{amp}gt; {amp}lt;div class="y_scroll" id="contentarea"{amp}gt; {amp}lt;div class="contentarea"{amp}gt;{amp}lt;!--contentarea start--{amp}gt; {amp}lt;span id="box" class="box"{amp}gt; {amp}lt;!--rounded curve/border start--{amp}gt; {amp}lt;div class="middlepanel"{amp}gt; {amp}lt;!--contentarea box middlepanel start--{amp}gt; {amp}lt;div style="display:block" id="textBox1" {amp}gt; {amp}lt;span id="box1" class="box"{amp}gt; {amp}lt;div class="toppanel"{amp}gt;{amp}lt;ul{amp}gt;{amp}lt;li{amp}gt;{amp}lt;/li{amp}gt;{amp}lt;/ul{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="middlepanel"{amp}gt; {amp}lt;table border="0" cellspacing="1" cellpadding="1" id="dataTable" name="dataTable" class="graphtable"{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td class="headingalign" width="16%"{amp}gt;Links{amp}lt;/td{amp}gt; {amp}lt;td class="headingalign" width="32%"{amp}gt;Desciption{amp}lt;/td{amp}gt; {amp}lt;td class="headingalign" width="16%"{amp}gt;Image{amp}lt;/td{amp}gt; {amp}lt;td class="headingalign" width="16%"{amp}gt;URL{amp}lt;/td{amp}gt; {amp}lt;td class="headingalign" width="05%"{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody{amp}gt; {amp}lt;tr id="id0" class="vals" name="id0"{amp}gt; {amp}lt;td{amp}gt; {amp}lt;div class="id_100"{amp}gt; {amp}lt;select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField(this)" {amp}gt; {amp}lt;option value=""{amp}gt;Select{amp}lt;/option{amp}gt; {amp}lt;xsl:for-each select="values from local db"{amp}gt; {amp}lt;xsl:sort order="ascending" select="description"/{amp}gt; {amp}lt;option value="{description}"{amp}gt; {amp}lt;xsl:value-of select="description"/{amp}gt; {amp}lt;/option{amp}gt; {amp}lt;/xsl:for-each{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; {amp}lt;input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext1" size="85" value="{//RESPONSE}" /{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; {amp}lt;input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext2" size="35" value="{//RESPONSE}" /{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; {amp}lt;input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext3" size="35" value="{//RESPONSE}" /{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; {amp}lt;input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton" type="button" /{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/tbody{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;div class="buttonarea"{amp}gt; {amp}lt;ul{amp}gt; {amp}lt;li{amp}gt;{amp}lt;input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;/div{amp}gt; 

В целом существует много постороннего кода, поэтому следующий ответ имеет другой код, но может быть применен к неуклюжему коду, представленному в вопросе. Я рекомендую, чтобы ваш код был более упорядоченным, как показано в следующем ответе.

Вот несколько предложений:

  • Если вы используете несколько элементов управления формой (например, {amp}lt;button{amp}gt; , {amp}lt;input{amp}gt; , {amp}lt;textarea{amp}gt; , {amp}lt;select{amp}gt; и т. Д.), Оберните все в {amp}lt;form{amp}gt;

  • Если у вас есть несколько тегов (или элементов), которые пользователь может click , submit , reset , change , input и т. Д. Зарегистрировать события в {amp}lt;form{amp}gt;

  • Чтобы найти точный элемент управления формы, который был нажат, изменен и т. Д., Используйте свойство Event.target чтобы найти его или this ключевое слово, и параметр Event.data .

     $('form selector').on('event type', Event.data, callback function) 
  • Атрибуты #id и [name] не нужны, если вы не используете определенные веб-API, такие как HTMLFormControlsCollection или HTMLFormElement

  • Никогда не используйте атрибуты события (ex onchange="callback()" ) при использовании jQuery. Используйте правильный метод jQuery или метод .on() .

     // jQuery method $(selector).click(callback) // .on() method $(selector).on('click', callback) 

Незначительные детали:

  • Атрибут [type] не применяется к тегу {amp}lt;select{amp}gt; .

  • Используйте {amp}lt;th{amp}gt; вместо {amp}lt;td{amp}gt; в {amp}lt;thead{amp}gt;

  • [maxlength] 500 смешно. Используйте {amp}lt;textarea{amp}gt; вместо {amp}lt;input{amp}gt;


Подробности прокомментированы в демоверсии

 /* Register form.io to the 'submit', 'click', and 'change' events Note the callback function does not have `()` suffixed because it would be interpreted as: "run function now" The callback function doesn't run immediately it runs when a registered event is triggered. */ $('.io').on('submit click change', eventHandler); // Define the counter let counter = 0; // Always pass the Event Object when defining a callback function function eventHandler(event) { // The Event Object has several properties... // Get the type of event triggered (ie submit, change, or click) let eType = event.type; /* Get the origin element of event if 'submit' target will be {amp}lt;form{amp}gt; if 'click' target will be {amp}lt;button{amp}gt; if 'change' target will be {amp}lt;select{amp}gt; */ let eNode = event.target; // Pass the event type through a switch() function... switch (eType) { // if type is 'submit'... case 'submit': // Create a deep clone of the first row let clone = $('.grid tr:first-child').clone(true, true); // Add clone as the last child of the {amp}lt;tbody{amp}gt; $('.grid').append(clone); // On .each() elment with class '.data' found within the clone... clone.find('.data').each(function(i) { // disable it this.disabled = true; // remove its value this.value = ''; }); // Increment the counter by 1 counter  ; // Dereference the clone and assign id as row counter clone[0].id = `row${counter}`; /* Prevent default behavior: Reset {amp}lt;form{amp}gt; Send data to a server */ event.preventDefault(); // Stop event from bubbling any further up the event chain event.stopPropagation(); // ...otherwise skip this case and continue onto the next case break; // if type is 'click'... case 'click': // if the clicked element (ie {amp}lt;button{amp}gt;) has class: '.del'... if ($(eNode).hasClass('del')) { // Get the clicked {amp}lt;button{amp}gt;'s ancestor {amp}lt;tr{amp}gt; let row = $(eNode).closest('tr'); // if that {amp}lt;tr{amp}gt; is NOT the first {amp}lt;tr{amp}gt;... if (row.index() !== 0) { // remove the {amp}lt;tr{amp}gt; row.remove(); } } event.stopPropagation(); break; // if type is 'change'... case 'change': // if changed element (ie {amp}lt;select{amp}gt;) class is '.type'... if ($(eNode).hasClass('type')) { // Get the changed {amp}lt;select{amp}gt;'s ancestor {amp}lt;tr{amp}gt; let row = $(eNode).closest('tr'); // if changed {amp}lt;select{amp}gt;'s value is NOT "X" return true otherwise return false let pick = eNode.value !== "X" ? true : false; /* On .each() element with class .data within the {amp}lt;tr{amp}gt; disable the .data if {amp}lt;select{amp}gt;'s value is "X" Otherwise enable the .data and then remove the .data value */ row.find('.data').each(function(i) { this.disabled = !pick; this.value = ''; }); } event.stopPropagation(); break; default: event.stopPropagation(); break; } } 
 :root { font: 400 3vw/1.2 Arial } form { width: max-content; margin: 10px auto } table { table-layout: fixed; border-collapse: separate; border-spacing: 4px; width: 90vw } th:first-of-type { width: 20% } th:nth-of-type(2) { width: 35% } th:nth-of-type(3) { width: 35% } th:last-of-type { width: 10% } td { padding: 0 8px } select, textarea, button { display: block; min-width: 97%; min-height: 1.2rem; font-size: initial; } select { padding: 2px 0 2px 2px } textarea { resize: vertical; overflow-y: auto; overflow-x: hidden } 
 {amp}lt;form class='io'{amp}gt; {amp}lt;table{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;Type{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Desciption{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Image/URL{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;{amp}lt;button{amp}gt;➕{amp}lt;/button{amp}gt;{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody class='grid'{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt; {amp}lt;select class='type'{amp}gt; {amp}lt;option value="X" default{amp}gt;{amp}lt;/option{amp}gt; {amp}lt;option value="GDS"{amp}gt;Guides{amp}lt;/option{amp}gt; {amp}lt;option value="PRO"{amp}gt;Promos{amp}lt;/option{amp}gt; {amp}lt;option value="TEM"{amp}gt;Templates{amp}lt;/option{amp}gt; {amp}lt;option value="VID"{amp}gt;Videos{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;textarea class='desc data' rows='1' cols='20' disabled{amp}gt;{amp}lt;/textarea{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;textarea class='urls data' rows='1' cols='20' disabled{amp}gt;{amp}lt;/textarea{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;button class='del' type='button'{amp}gt;❌{amp}lt;/button{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/tbody{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; Дайте {amp}lt;form class='io'{amp}gt; {amp}lt;table{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;Type{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Desciption{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Image/URL{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;{amp}lt;button{amp}gt;➕{amp}lt;/button{amp}gt;{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody class='grid'{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt; {amp}lt;select class='type'{amp}gt; {amp}lt;option value="X" default{amp}gt;{amp}lt;/option{amp}gt; {amp}lt;option value="GDS"{amp}gt;Guides{amp}lt;/option{amp}gt; {amp}lt;option value="PRO"{amp}gt;Promos{amp}lt;/option{amp}gt; {amp}lt;option value="TEM"{amp}gt;Templates{amp}lt;/option{amp}gt; {amp}lt;option value="VID"{amp}gt;Videos{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;textarea class='desc data' rows='1' cols='20' disabled{amp}gt;{amp}lt;/textarea{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;textarea class='urls data' rows='1' cols='20' disabled{amp}gt;{amp}lt;/textarea{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;button class='del' type='button'{amp}gt;❌{amp}lt;/button{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/tbody{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt;