循环遍历数组以检查输入值的列是否为空

Looping through an array to check if a column is empty for an input value

本文关键字:是否 输入 遍历 数组 检查 循环      更新时间:2023-09-26

我又卡住了,我不知道如何继续,因为我已经把自己的jQuery函数蒙蔽了。

我想要的是将主表的列保存到一个数组中,在那里我可以检查哪个是空的。然后我想把值发送到表中。(第三个函数).

请帮忙!我卡住了-_-

JQUERY

//function to save input value below the textbox in a "list" of columns.
$('#SaveButtonId').click(function () {
    $('.table2 tr .table2td').text($('input[type="text"]').val());
    $('input[type="text"]').val('');
});
//function to iterate through .mytd columns and put them in an array.
var columns = [];
$('.table').each(function() {
    $(this).find('.mytd:text').each(function() {
        columns.push($(this).val());
    });
});
//function to send value to empty column
$('#ActivateButton').click(function() {
    $('.table tr .mytd').text($('.table2td').val());
});

<div id="table-columns">
                <table class="table">
                    <thead>
                        <tr class ="tr-table">
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                        </tr>
                        <tr>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                        </tr>
                        <tr>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                        </tr>
                        <tr>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                        </tr>

                        <tr>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                        </tr>
                        <tr>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                        </tr>
                    </thead>
                </table>
            </div>
     <div class="row">
                    <div class="span2">
                    </div>
                    <div class="span8">
                        <div>
                            <table class="table table-bordered table-condensed" data-bind="visible: items().length > 0">
                                <thead>
                                    <tr>
                                        <th>Items</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input id="Information"type="text"name="Information"/>
                                        </td>
                                        <td>
                                            <input id="SaveButtonId" type="submit" value="Save">
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <table class="table2" style="border: 0;">
                                <thead>
                                <tr>
                                    <td class="table2td" style=" width: 100%"></td>
                                    <td id="Inputs"><input id="ActivateButton"          type="submit" value="Activate &#8679;" /><input id="DeleteButton" type="submit" value="Delete &#10092;" /></td>
                                </tr>
                            </table>

下面是代码的部分。

//function to save input value below the textbox in a "list" of columns.
$('#SaveButtonId').click(function () {
    $('.table2 tr .table2td').text($('input[type="text"]').val());
    $('input[type="text"]').val('');
});
//function to iterate through .mytd columns and put them in an array.
var columns = [];
$('.table').each(function() {
    $(this).find('.mytd:text').each(function() {
        columns.push($(this).val());
    });
});
//function to send value to empty column
$('#ActivateButton').click(function() {
    $('.table tr .mytd').text($('.table2td').val());
});
HTML
<div id="table-columns">
                <table class="table">
                    <thead>
                        <tr class ="tr-table">
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                        </tr>
                        <tr>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                        </tr>
                        <tr>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                        </tr>
                        <tr>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                        </tr>

                        <tr>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                        </tr>
                        <tr>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                            <td class="mytd" style="border-top: groove;"></td>
                        </tr>
                    </thead>
                </table>
            </div>
     <div class="row">
                    <div class="span2">
                    </div>
                    <div class="span8">
                        <div>
                            <table class="table table-bordered table-condensed" data-bind="visible: items().length > 0">
                                <thead>
                                    <tr>
                                        <th>Items</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input id="Information"type="text"name="Information"/>
                                        </td>
                                        <td>
                                            <input id="SaveButtonId" type="submit" value="Save">
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <table class="table2" style="border: 0;">
                                <thead>
                                <tr>
                                    <td class="table2td" style=" width: 100%"></td>
                                    <td id="Inputs"><input id="ActivateButton"          type="submit" value="Activate &#8679;" /><input id="DeleteButton" type="submit" value="Delete &#10092;" /></td>
                                </tr>
                            </table>

也许你正在寻找这样的东西来循环元素?

$("#table-columns tr td").each(function() { 
   var content = $(this).html(); 
});