首页 > 解决方案 > 通过 id 更改表内的值

问题描述

我正在创建一个通过 id 应用程序使用 jquery 更改的表值,我不太了解 jquery 如何从使用 jquery 的输入中通过 id 更改表行

注意:我从另一个页面测试了以下代码,但代码是这样的

 `<script>
     $('#dicerik').html(icerik).find("#tablo2"); 
 </script>`

我已经尝试过这样的事情,但我无法确定这改变其他行的真正方式

<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>

<table>
  <tr>
    <th>İçerik</th>
    <th>Tür</th>
    <th>Dil</th>
  </tr>
  <tr>
    <td>1</td>
    <td>DENEXAMPLE</td>
    <td>YineEXAMPLE</td>
  </tr>
  <tr>
    <td>2</td>
    <td>DENEXAMPLE2</td>
    <td>YineEXAMPLE2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>DENEXAMPLE3</td>
    <td>YineEXAMPLE3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>DENEXAMPLE4</td>
    <td>YineEXAMPLE4</td>
  </tr>
</table>
<input type="text" id="text1" name="text1" placeholder="id">
<input type="text" id="text2" name="text2" placeholder="text">
<button type="button" name="butonbu">Change it</button>

行示例 1 的第一个输入 id 及其第二个文本 YineEXAMPLE

预期结果是 id 1 行,第二个文本应该是“dene”

标签: javascriptjqueryhtml

解决方案


尝试这个::

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>

<table>
  <tr>
    <th>İçerik</th>
    <th>Tür</th>
    <th>Dil</th>
  </tr>
  <tr>
    <td>1</td>
    <td>DENEXAMPLE</td>
    <td>YineEXAMPLE</td>
  </tr>
  <tr>
    <td>2</td>
    <td>DENEXAMPLE2</td>
    <td>YineEXAMPLE2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>DENEXAMPLE3</td>
    <td>YineEXAMPLE3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>DENEXAMPLE4</td>
    <td>YineEXAMPLE4</td>
  </tr>
</table>
<input type="text" id="text1" name="text1" placeholder="id">
<input type="text" id="text2" name="text2" placeholder="text">
<button type="button" name="butonbu" onClick="changeIt()">Change it</button>

<script>
function changeIt()
{
  $("table tr").each(function(index)
  {
     if (index != 0) {
     $row = $(this);

     var id = $row.find("td:first").text();
     var searchID=$("#text1").val();
     
     if(id==searchID)
     {
         $row.find("td:nth-child(2)").html($("#text2").val())
     }
  }

})
}

</script>


推荐阅读