如何获取文本框 html 行，select 框值已更改

Question

我有一个在 HTML table 中有多行的网络表单。当我单击提交时，它正在更新所有行（将所有行的输入值传递给存储过程参数）。我只想传递和更新那些输入值发生变化的行。

我的 HTMl 来源：

<html>


<head>
<title> Dashboard:</title>
<script language="JavaScript">
 var gAutoPrint = true; // Tells whether to automatically call the print function
 function printSpecial()
  {
   if (document.getElementById != null)
    {
    var html = '<HTML>\n<HEAD>\n';
    if (document.getElementsByTagName != null)
     {
     var headTags = document.getElementsByTagName("head");
     if (headTags.length > 0)
      html += headTags[0].innerHTML;
     }

     html += '\n</HE>\n<BODY>\n';

    var printReadyElem = document.getElementById("printReady");

    if (printReadyElem != null)
     {
      html += printReadyElem.innerHTML;
     }
    else
     {
      alert("Could not find the printReady function");
      return;
     }
    html += '\n</BO>\n</HT>';

    var printWin = window.open("","printSpecial");
    printWin.document.open();
    printWin.document.write(html);
    printWin.document.close();
    if (gAutoPrint)
     printWin.print();
    }
   else
    {
     alert("The print ready feature is only available if you are using an browser. Please update your browswer.");
    }
  }
  
  function validate()
  {
      //alert('here');
      var elements = document.getElementById("frmDtls").elements ;
      var val = [] ;
      var flag = true;
      var x = -1;
      var y = 0;
        
      if(flag == true)
      {
          document.frmDtls.hfrom.value = 'Updt' ;
          document.frmDtls.method = "post" ;
        document.frmDtls.action = "samepage.asp" ;
          document.frmDtls.submit();
         // alert("Record has been Updated Successfully!");
           //window.location.href = window.location.href;
         // location.reload();
       
                             
      }
//      alert(flag);
  }  
</script>

</head>

<body background="Images/Notebook.jpg">


<div align="center">
  <center>


<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111">
  <tr>
    <td width="100%" align="center">
    <img border="0" src="Axalta Coating Systems Logo.jpg" width="1200" height="60"></td>
  </tr>
</table>





<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
  <tr>
    <td width="100%" bgcolor="#C0C0C0" align="center"><b>
    <font face="Times New Roman" size="4"> CYCLE TIMES and UNITS for UPDATING </font></b>&nbsp;
     </TD>
  </tr>
</table>
<div id="printReady">
<div align="center" id="formdiv"><center>
<form id="frmDtls" name="frmDtls">
<!--<form id="frmDtls" name="frmDtls" target="MyFrame">-->
<iframe id="MyFrame" name="MyFrame" style="display:none;"></iframe>
<input type="hidden" name="hfrom" value = "">

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
  <tr>
    <td width="70%" bgcolor="#C0C0C0" align="center"><b>
  <font face="Times New Roman" size="5">SELECTED DUAL CODE DETAILS  </font></b>&nbsp;</td>
 <td width="13%" align="Middle" valign = "Middle" bgcolor="#FFFF00">
  <input type="button" name='update' value = 'Update' onclick='validate();'>
 </TD>
 <td width="17%" bgcolor="#C0C0C0" align="Center">
  <b><font face="Times New Roman" size="2"> 
    LATEST POSTING DATE / TIME 2/13/2019 7:09:20 AM</font></b>&nbsp;     
 </TD> 
  </tr>
</table>


<table BORDER="1" CELLSPACING="1" CELLPADDING="1"
style="font-weight: normal; letter-spacing: normal; text-align: left; width:100%;">
  <tr align="center">
    <th><small><small><span style="color:darkgreen;font-weight:bold">Profile ID</small></small></th>
    <th><WIDTH="200"><small><small><span style="color:green;font-weight:bold">DUAL CODE</small></small></th> 
 <th><small><span style="color:darkgreen;font-weight:bold">Description</small></th>
 <th><small><span style="color:darkgreen;font-weight:bold">R/D Material?</small></th>
 <th><small><small><span style="color:darkgreen;font-weight:bold">Process Step Name</small></small></th>
 <th><small><small><span style="color:darkgreen;font-weight:bold">Process Step Sequence</small></small></th>
 <th><small><small><span style="color:darkgreen;font-weight:bold">FROM Event Status</small></small></th>
 <th><small><small><span style="color:darkgreen;font-weight:bold">TO Event Status</small></small></th>
 <th><small><small><span style="color:darkblue;font-weight:bold">Current CYCLE TIME</small></small></th>
 <th><small><small><span style="color:darkred;font-weight:bold">Updated CYCLE TIME</small></small></th> 
 <th><small><small><span style="color:darkblue;font-weight:bold">Cycle Time Units</small></small></th>

 <th><small><small><span style="color:darkred;font-weight:bold">Updated Units</small></small></th>

 <th><small><small><span style="color:darkblue;font-weight:bold">Comments</small></small></th>
   </tr>
   <tr>
   <td><input type="Hidden" name="l_enteredpartialdualcode"   value=""  > </td>
 <td><input type="Hidden" name="l_selecteddualcodes"   value="1026-FD195, 1143-01427"  > </td>
 <td><input type="Hidden" name="l_selectedprocessstepnames"   value=""  > </td>
 <td><input type="Hidden" name="l_selectedgbtindicato"   value="Both"  > </td>
 <td><input type="Hidden" name="l_multipledualcodess"   value=""  > </td>
  </tr> 
<TR align=center><TD Width=90 Height=3 nowrap ><B>1</B></TD><TD Width=90 Height=3 nowrap ><B>1026-FD195</B></TD><TD WIDTH=200 Height=3><small><small><B>1026-FD195 E500546 DARK GRAY WBPR</B></small></small></TD><TD WIDTH=30 Height=3><small><small><B></B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>Load_Cycle</B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>2</B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>LDGS      </B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>LDGC      </B></small></small></TD><TD WIDTH=70 Height=3><B>6</B></TD><TD WIDTH=70 Height=3><small><small><B><Select name = 'DDSQ_1_2' font-size=1><option value = '1' >1</option><option value = '2' >2</option><option value = '3' >3</option><option value = '4' >4</option><option value = '5' >5</option><option value = '6' selected>6</option><option value = '7' >7</option><option value = '8' >8</option><option value = '9' >9</option><option value = '10' >10</option><option value = '11' >11</option><option value = '12' >12</option><option value = '13' >13</option><option value = '14' >14</option><option value = '15' >15</option><option value = '16' >16</option><option value = '17' >17</option><option value = '18' >18</option><option value = '19' >19</option><option value = '20' >20</option><option value = '21' >21</option><option value = '22' >22</option><option value = '23' >23</option><option value = '24' >24</option><option value = '-1' >Clear</option></Select></B></small></small></TD>
  <TD WIDTH=70 Height=3 nowrap><small><small><B>
Hours     </B></small></small></TD><TD WIDTH=70 Height=3><small><small><B></B></small></small></TD>
            <td WIDTH=100 Height=3><small><small><B><input type="text" name="txt_1_2" value="test1" >
   </B></small></small></TD>
   
<TR align=center><TD Width=90 Height=3 nowrap ><B>1</B></TD><TD Width=90 Height=3 nowrap ><B>1026-FD195</B></TD><TD WIDTH=200 Height=3><small><small><B>1026-FD195 E500546 DARK GRAY WBPR</B></small></small></TD><TD WIDTH=30 Height=3><small><small><B></B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>Test_Cycle</B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>4</B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>TSTS      </B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>TSTC      </B></small></small></TD><TD WIDTH=70 Height=3><B>6</B></TD><TD WIDTH=70 Height=3><small><small><B><Select name = 'DDSQ_1_4' font-size=1><option value = '1' >1</option><option value = '2' >2</option><option value = '3' >3</option><option value = '4' >4</option><option value = '5' >5</option><option value = '6' selected>6</option><option value = '7' >7</option><option value = '8' >8</option><option value = '9' >9</option><option value = '10' >10</option><option value = '11' >11</option><option value = '12' >12</option><option value = '13' >13</option><option value = '14' >14</option><option value = '15' >15</option><option value = '16' >16</option><option value = '17' >17</option><option value = '18' >18</option><option value = '19' >19</option><option value = '20' >20</option><option value = '21' >21</option><option value = '22' >22</option><option value = '23' >23</option><option value = '24' >24</option><option value = '-1' >Clear</option></Select></B></small></small></TD>
  <TD WIDTH=70 Height=3 nowrap><small><small><B>
Hours     </B></small></small></TD><TD WIDTH=70 Height=3><small><small><B></B></small></small></TD>
            <td WIDTH=100 Height=3><small><small><B><input type="text" name="txt_1_4" value="" >
   </B></small></small></TD>
   
<TR align=center><TD Width=90 Height=3 nowrap ><B>1</B></TD><TD Width=90 Height=3 nowrap ><B>1026-FD195</B></TD><TD WIDTH=200 Height=3><small><small><B>1026-FD195 E500546 DARK GRAY WBPR</B></small></small></TD><TD WIDTH=30 Height=3><small><small><B></B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>FILL_Cycle</B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>6</B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>FLGS      </B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>FLGC      </B></small></small></TD><TD WIDTH=70 Height=3><B>4</B></TD><TD WIDTH=70 Height=3><small><small><B><Select name = 'DDSQ_1_6' font-size=1><option value = '1' >1</option><option value = '2' >2</option><option value = '3' >3</option><option value = '4' selected>4</option><option value = '5' >5</option><option value = '6' >6</option><option value = '7' >7</option><option value = '8' >8</option><option value = '9' >9</option><option value = '10' >10</option><option value = '11' >11</option><option value = '12' >12</option><option value = '13' >13</option><option value = '14' >14</option><option value = '15' >15</option><option value = '16' >16</option><option value = '17' >17</option><option value = '18' >18</option><option value = '19' >19</option><option value = '20' >20</option><option value = '21' >21</option><option value = '22' >22</option><option value = '23' >23</option><option value = '24' >24</option><option value = '-1' >Clear</option></Select></B></small></small></TD>
  <TD WIDTH=70 Height=3 nowrap><small><small><B>
Hours     </B></small></small></TD><TD WIDTH=70 Height=3><small><small><B></B></small></small></TD>
            <td WIDTH=100 Height=3><small><small><B><input type="text" name="txt_1_6" value="test1" >
   </B></small></small></TD>
   
<TR align=center><TD Width=90 Height=3 nowrap ><B>2</B></TD><TD Width=90 Height=3 nowrap ><B>1143-01427</B></TD><TD WIDTH=200 Height=3><small><small><B>1143-01427 E450552 TITANIUM SBPR</B></small></small></TD><TD WIDTH=30 Height=3><small><small><B></B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>Load_Cycle</B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>2</B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>LDGS      </B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>LDGC      </B></small></small></TD><TD WIDTH=70 Height=3><B>3</B></TD><TD WIDTH=70 Height=3><small><small><B><Select name = 'DDSQ_2_2' font-size=1><option value = '1' >1</option><option value = '2' >2</option><option value = '3' selected>3</option><option value = '4' >4</option><option value = '5' >5</option><option value = '6' >6</option><option value = '7' >7</option><option value = '8' >8</option><option value = '9' >9</option><option value = '10' >10</option><option value = '11' >11</option><option value = '12' >12</option><option value = '13' >13</option><option value = '14' >14</option><option value = '15' >15</option><option value = '16' >16</option><option value = '17' >17</option><option value = '18' >18</option><option value = '19' >19</option><option value = '20' >20</option><option value = '21' >21</option><option value = '22' >22</option><option value = '23' >23</option><option value = '24' >24</option><option value = '-1' >Clear</option></Select></B></small></small></TD>
  <TD WIDTH=70 Height=3 nowrap><small><small><B>
Hours     </B></small></small></TD><TD WIDTH=70 Height=3><small><small><B></B></small></small></TD>
            <td WIDTH=100 Height=3><small><small><B><input type="text" name="txt_2_2" value="" >
   </B></small></small></TD>
   
<TR align=center><TD Width=90 Height=3 nowrap ><B>2</B></TD><TD Width=90 Height=3 nowrap ><B>1143-01427</B></TD><TD WIDTH=200 Height=3><small><small><B>1143-01427 E450552 TITANIUM SBPR</B></small></small></TD><TD WIDTH=30 Height=3><small><small><B></B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>Test_Cycle</B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>4</B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>TSTS      </B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>TSTC      </B></small></small></TD><TD WIDTH=70 Height=3><B>6</B></TD><TD WIDTH=70 Height=3><small><small><B><Select name = 'DDSQ_2_4' font-size=1><option value = '1' >1</option><option value = '2' >2</option><option value = '3' >3</option><option value = '4' >4</option><option value = '5' >5</option><option value = '6' selected>6</option><option value = '7' >7</option><option value = '8' >8</option><option value = '9' >9</option><option value = '10' >10</option><option value = '11' >11</option><option value = '12' >12</option><option value = '13' >13</option><option value = '14' >14</option><option value = '15' >15</option><option value = '16' >16</option><option value = '17' >17</option><option value = '18' >18</option><option value = '19' >19</option><option value = '20' >20</option><option value = '21' >21</option><option value = '22' >22</option><option value = '23' >23</option><option value = '24' >24</option><option value = '-1' >Clear</option></Select></B></small></small></TD>
  <TD WIDTH=70 Height=3 nowrap><small><small><B>
Hours     </B></small></small></TD><TD WIDTH=70 Height=3><small><small><B></B></small></small></TD>
            <td WIDTH=100 Height=3><small><small><B><input type="text" name="txt_2_4" value="test" >
   </B></small></small></TD>
   
<TR align=center><TD Width=90 Height=3 nowrap ><B>2</B></TD><TD Width=90 Height=3 nowrap ><B>1143-01427</B></TD><TD WIDTH=200 Height=3><small><small><B>1143-01427 E450552 TITANIUM SBPR</B></small></small></TD><TD WIDTH=30 Height=3><small><small><B></B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>FILL_Cycle</B></small></small></TD><TD WIDTH=100 Height=3><small><small><B>6</B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>FLGS      </B></small></small></TD><TD WIDTH=90 Height=3><small><small><B>FLGC      </B></small></small></TD><TD WIDTH=70 Height=3><B>6</B></TD><TD WIDTH=70 Height=3><small><small><B><Select name = 'DDSQ_2_6' font-size=1><option value = '1' >1</option><option value = '2' >2</option><option value = '3' >3</option><option value = '4' >4</option><option value = '5' >5</option><option value = '6' selected>6</option><option value = '7' >7</option><option value = '8' >8</option><option value = '9' >9</option><option value = '10' >10</option><option value = '11' >11</option><option value = '12' >12</option><option value = '13' >13</option><option value = '14' >14</option><option value = '15' >15</option><option value = '16' >16</option><option value = '17' >17</option><option value = '18' >18</option><option value = '19' >19</option><option value = '20' >20</option><option value = '21' >21</option><option value = '22' >22</option><option value = '23' >23</option><option value = '24' >24</option><option value = '-1' >Clear</option></Select></B></small></small></TD>
  <TD WIDTH=70 Height=3 nowrap><small><small><B>
Hours     </B></small></small></TD><TD WIDTH=70 Height=3><small><small><B></B></small></small></TD>
            <td WIDTH=100 Height=3><small><small><B><input type="text" name="txt_2_6" value="test2" >
   </B></small></small></TD>
   


</table>
</form>
</center>

</div>
</div>


<p><small><small><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
End of Report.</strong></small></small></p>

<p align="center"><strong><big><big>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</big></big></strong></p>


</body>
</html>
 Run code snippetExpand snippet

模板在这里：Web Page Template

目前我正在尝试为所有行 ID 附加“;”在 javascript 中的文本框 OnChange 事件上分开并将其存储在变量中，然后仅将这些 ID 传递给我的 sql 查询，但我不知道该怎么做。

你们有什么办法可以帮助我吗？

我的 HTML :

<input type="text" name="txt_<%=l_profileid %>_<%=l_processstepsequence%>" value="<%= l_comments%>" onfocus="this.oldvalue = this.value;" onchange="onChangeTest(this);this.oldvalue = this.value;" >

function onChangeTest(textbox){
    alert("Value is " + textbox.value + "\n" + "Old Value is " + textbox.oldvalue  + "\n" + "Name is " + textbox.name);
}

Answer 1

也许这个

$( "input" ).change(function() { 
   //Set flag on input 
   $(this).addClass("changed");
});

有了这个，您可以获得所有包含名为 "changed" 的 class 的行....

Answer 2

如果我答对了你的问题，我认为这应该可行。但是如果你可以添加一些代码，或者解释你想用行 ID 做什么，我可以提供更多帮助

function submitTable(){
    var rows_ids = [];
    $('#content-table .new-value').each(function(){
        var old_value = parseInt($(this).parent().find('.old-value').text());
        var new_value = parseInt($(this).find('input.desired-input').val());
        if(old_value !== new_value){
            rows_ids.push($(this).parent().attr('id'));
            // use this as you want, it containes the id for the changed rows.
            // you have the changes value in new_value, so you also can use it.
        }
    });
    console.log(rows_ids);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="content-table">
    <tr id="1">
        <td>STG</td>
        <td class="old-value">4</td>
        <td class="new-value"><input type="text" name="txt_1_2" value="4" class="desired-input"></td>
    </tr>
    <tr id="2">
        <td>LDG</td>
        <td class="old-value">3</td>
        <td class="new-value"><input type="text" name="txt_2_5" value="3" class="desired-input"></td>
    </tr>
    <tr id="3">
        <td>FLG</td>
        <td class="old-value">6</td>
        <td class="new-value"><input type="text" name="txt_3_6" value="6" class="desired-input"></td>
    </tr>
    <tr id="4">
        <td>FLG</td>
        <td class="old-value">7</td>
        <td class="new-value"><input type="text" name="txt_4_3" value="7" class="desired-input"></td>
    </tr>
</table>
<button type="button" name="button" onclick="submitTable()">Submit</button>

编辑： 如果你的意思是你想在同一个输入中存储旧值，你可以使用 data- 属性来这样做......那么代码应该是这样的

function submitTable(){
    var rows_ids = [];
    $('#content-table .desired-input').each(function(){
        var old_value = parseInt($(this).data('old-value'));
        var new_value = parseInt($(this).val());
        if(old_value !== new_value){
            rows_ids.push($(this).closest('tr').attr('id'));
            // use this as you want, it containes the id for the changed rows.
            // you have the changes value in new_value, so you also can use it.
        }
    });
    console.log(rows_ids);
}

并且您需要将 data-old-value="..." 添加到您的输入中

<input type="text" name="" value="7" class="desired-input" data-old-value="7">

EDIT2: 根据您的评论，您可以使用 .split 在 _ 上拆分名称，然后获取您想要的 ID，因为你提到的名称格式应该在索引1处，js代码应该像

function submitTable(){
    var ids = [];
    $('#content-table .desired-input').each(function(){
        var old_value = parseInt($(this).data('old-value'));
        var new_value = parseInt($(this).val());
        if(old_value !== new_value){
            ids.push($(this).attr('name').split('_')[1]);
        }
    });
    console.log(ids);
}

如何获取文本框 html 行，select 框值已更改

How to get html rows where text boxes , select boxes values have been changed

javascript

jquery

html-table

asp-classic