Question

我正在创建一个表值，该值将通过使用jquery的id应用程序更改，而我对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”

Answer 1

尝试一下：：

<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>

Answer 2

我建议您要按特定ID在表中查找一行并更改第二或第三列，不是吗？

您需要遍历每一行，从第一个单元格获取文本，如果此文本等于所需的值，则必须更改其他单元格中的值。

您可以使用以下代码来做到这一点：

$('button[name=butonbu]').click(function () {
    var id = $('#text1').val();
    var newText = $('#text2').val();
    $('table tr').each(function (index, el) {
        var $el = $(el);
        if ($el.find('td:first').text() === id) {        
            $el.find('td:nth-child(2)').text(newText);
        }
    });
});

https://jsfiddle.net/js7yg631/7/

Answer 3

我用普通的javascript做试试这个

    <table>
    <tr id="tr-0">
        <th>İçerik</th>
        <th>Tür</th>
        <th>Dil</th>
    </tr>
    <tr id="tr-1">
        <td>1</td>
        <td>DENEXAMPLE</td>
        <td>YineEXAMPLE</td>
    </tr>
    <tr id="tr-2">
        <td>2</td>
        <td>DENEXAMPLE2</td>
        <td>YineEXAMPLE2</td>
    </tr>
    <tr id="tr-3">
        <td>3</td>
        <td>DENEXAMPLE3</td>
        <td>YineEXAMPLE3</td>
    </tr>
    <tr id="tr-4">
        <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">
<input type="text" id="text3" name="text2" placeholder="text">
<button type="button" id="submit" name="butonbu">Change it</button>
<script>
    const input1 = document.getElementById('text1')
    const input2 = document.getElementById('text2')
    const input3 = document.getElementById('text3')
    document.getElementById('submit').addEventListener('click', changetarget)

    function changetarget() {
        if (input1.value != '' || input2.value != '' || input3.value != '') {
            let parentTr = document.getElementById('tr-' + input1.value);
            parentTr.children[1].innerHTML = input2.value;
            parentTr.children[2].innerHTML = input3.value;
        }
    }
</script>

Answer 4

$(function(){
    $('button[name=butonbu]').on("click", function(){
        var id = $("#text1").val();
        var replace_with = $("#text2").val();

        $( "tr" ).each( function( index ) {
            if(index !== 0){
                var col_val = $(this).children("td").html();
                if( col_val == id ){
                    $(this).children("td:nth-child(2)").html(replace_with);
                }
            }                       
        });
    });
});

通过ID在表格内更改值

4 个答案: