使用javascript遍历表以与行值进行比较_Javascript_Jquery_Html

使用javascript遍历表以与行值进行比较

javascript jquery html

使用javascript遍历表以与行值进行比较,javascript,jquery,html,Javascript,Jquery,Html,我的桌子看起来像这样 <body> <table class="tblTest"> <tr> <td> <label>wer</label></td> <td> <label>ur4</label></td> <td> <

我的桌子看起来像这样

<body>
<table class="tblTest">
    <tr>
        <td>
            <label>wer</label></td>
        <td>
            <label>ur4</label></td>
        <td>
            <label>ksdj</label></td>
    </tr>
    <tr>
        <td>
            <label>eiejr</label></td>
        <td>
            <label>ur4</label></td>
        <td>
            <label>yutu56</label></td>
    </tr>
    <tr>
        <td>
            <input type="text" /></td>
        <td>
            <input type="text" /></td>
        <td>
            <input type="text" />
        </td>
    </tr>
    <tr>
        <td>
            <label>jweee</label>
        </td>
        <td>
            <label>male</label>
        </td>
        <td>
            <label>ur4</label>
        </td>
    </tr>
    <tr>
        <td>
            <label>ssssss</label>
        </td>
        <td>
            <label>male</label>
        </td>
        <td>
            <label>ur4s</label></td>
    </tr>
    <tr>
        <td>
            <input type="text" /></td>
        <td>
            <input type="radio" name="gender" value="male" />Male
            <br />
            <input type="radio" name="gender" value="female" />Female
        </td>
        <td>
            <select name="cars" style="width: 128px">
                <option selected="selected" value="Select">Select</option>
                <option value="saab">BMW</option>
                <option value="fiat">Fiat</option>
                <option value="audi">Audi</option>
            </select>
        </td>
    </tr>

</table> <br />
<button type="button" onclick="function1()">Submit</button>

我想要一个Java脚本/jQuery，它将检查这两个标签，如果不匹配，它将使文本框变为红色，如果不匹配，则变为绿色。我不能对标签使用getElementById，只是我必须遍历它，获取td索引并执行任务。我不知道如何获取prev和最近的元素。请帮我做这个。我正在尝试的功能是

function function1() {
        var inputcontrols = document.getElementsByTagName('input');
        for (var i = 0; i < inputcontrols.length; ++i)
        {
            var element = inputcontrols[i];
            //element.style.background = "#90EE90"; by default making it green
            var ind = $(this).closest('td').prev('td').text();
            alert(ind);
        }

试图在ind中获取td文本，但返回空。

首先获取所有输入，然后使用each循环迭代这些输入。并通过使用索引获得合适的标签文本

文本不适合您的原因是，您试图从td元素获取文本。这是空的，因为它只包含HtmleElement标签。查看jQuery规范以了解和之间的区别

我看到的第一个问题是使用$this，这就是在jQuery中链接函数作用域的方式。例如：

$('a').each(function() {
    // 'this' scopes to the current 'a' element inside the 'each' loop
    $(this).css('color', '#FF0000');
});

因为您已经找到了输入控件并将它们存储在var元素中，所以需要将该元素传递到jQuery中，以便它知道您在寻找什么

var element = inputcontrols[i];
$(element).closest('td').prev('td').text();

接下来，如果要将文本字段与上一个标签进行比较，则需要将遍历步骤修改为：

从文本字段找到其父tr而不是td，转到该行找到上一个tr返回一行查找其子标签向下钻取到上一行从标签中获取文本

假设您只有两个表行，您可以尝试这样做-

function function1() {
    var inputs = $('.tblTest input');
    var tr1 = $('.tblTest tr:nth(0)');
    var tr2 = $('.tblTest tr:nth(1)');
    for (var i = 0; i < inputs.length; ++i)
    {
        var element = inputcontrols[i];
        if(tr1.find('td:nth('+ i +') label').html().trim() == tr2.find('td:nth('+ i +') label').html().trim()) {
            element.style.background = "green";
        }
        else {
            element.style.background = "red";
        }
    }
}

要检查哪两个标签？文本框在哪里？@user2181397一行是wer和eiejr，第二行是ur4和ur4。只要在任何编辑器中使用该代码，就可以看到表视图。@Soviut请查看函数，我已经更新了它。我无法在'ind'中获取td文本。您使用的是一种非常奇怪的原始javascript和jQuery的混合体。如果您已经在使用jQuery，那么使用它的选择器和遍历函数将比混合使用两者容易得多。是哪一个？谢谢你的解释。我不熟悉javascript和jQuery，因此无法正确地进行遍历。只知道如何按id名称进行操作。无论如何，谢谢你的帮助。谢谢它工作正常，但我不能使用表id，因为它会自动生成，我不知道id。所以我必须找到文本框索引，从该索引中我必须获得相应的td值并进行比较。Hello@PierreDuc我需要更多的帮助。我添加了另外3行，但它只适用于前3行。现在请看桌子的设计。谢谢。嘿，谢谢你的编辑。但对于下面的行，它仍然不起作用。你能再查一下吗。它改变了前3个文本框的颜色。我修改了一个小东西。但这不可能是问题所在。我制作了一个plnkr，它在那里工作：我在plnkr中检查了它，它使下面的所有文本框变为绿色，即使LBL不同。

function function1() {
    var inputs = $('.tblTest input');
    var tr1 = $('.tblTest tr:nth(0)');
    var tr2 = $('.tblTest tr:nth(1)');
    for (var i = 0; i < inputs.length; ++i)
    {
        var element = inputcontrols[i];
        if(tr1.find('td:nth('+ i +') label').html().trim() == tr2.find('td:nth('+ i +') label').html().trim()) {
            element.style.background = "green";
        }
        else {
            element.style.background = "red";
        }
    }
}