Question

我试图通过循环每一行将值分配给表中的下拉列表。我在一些tr循环不正确的地方被击中。有些事情如$("#myTable tr").each(function()任何帮助都会受到高度赞赏。

我正在努力实现这一目标：

用逗号分割字符串。循环遍历表行
在=之前指定左值以下拉值
在=之后将正确的值分配给文本框

HTML：

<table width="100%" class="tblQueryBuilder">
<tbody>
    <tr>
        <th></th>
        <th>Field</th>
        <th>Operator</th>
        <th>Value</th>
        <th></th>
        <th></th>
    </tr>
    <tr class="tr_clone">
        <td><div id="cItem" style="width: 14px; height: 14px; float: left;" class="unchkd"></div></td>
        <td>
            <select style="width: 150px;" class="selField">
                 <option value="Title" selected="selected">Title</option>
                 <option value="ProjectStatus" selected="selected">Project Status</option>
                 <option value="Tags">Tags</option>
            </select>
        </td>
        <td>
            <select style="width: 150px;" class="selOperator">
                <option>=</option>
                <option>&lt;&gt;</option>
                <option>in</option>
            </select>
        </td>
        <td><input type="text" style="width: 150px; height: 25px;" class="selValue"></td>
        <td>X </td>
        <td>= </td>
    </tr>
    <tr class="tr_clone">
        <td><div id="cItem" style="width: 14px; height: 14px; float: left;" class="unchkd"></div></td>
        <td>
            <select style="width: 150px;" class="selField">
                <option value="Title">Title</option>
                <option value="ProjectStatus">Project Status</option>
                <option value="Tags">Tags</option>
            </select>
        </td>
        <td>
            <select style="width: 150px;" class="selOperator">
                <option>=</option>
                <option>&lt;&gt;</option>
                <option>in</option>
            </select>
        </td>
        <td><input type="text" style="width: 150px; height: 25px;" class="selValue"></td>
        <td>X </td>
        <td>= </td>
    </tr>
    <tr class="tr_clone">
        <td><div id="cItem" style="width: 14px; height: 14px; float: left;" class="unchkd"></div></td>
        <td>
            <select style="width: 150px;" class="selField">
                <option value="Title">Title</option>
                <option value="Tags">Tags</option>
                <option value="ProjectStatus">Project Status</option>
            </select>
        </td>
        <td>
            <select style="width: 150px;" class="selOperator">
                <option>=</option>
                <option>&lt;&gt;</option>
                <option>in</option>
            </select>
        </td>
        <td><input type="text" style="width: 150px; height: 25px;" class="selValue"></td>
        <td>X </td>
        <td>= </td>
    </tr>
</tbody>
</table>

的Javascript

var qry = 'Title=new project,Project Status=0,Tags=a';
        var qryRowCount = qry.split(',').length;

for (i = 0; i < qryRowCount; i++) {
    var fieldVal = qry.split(',')[i].split('=')[0];
    var displayVal = qry.split(',')[i].split('=')[0];

    $('.selField').val(fieldVal);
    $('.selValue').val(displayVal);
}

Answer 1

<input type="button" onclick="setValues()" value="click"/>
<script>
function setValues(){
    $(".tblQueryBuilder tr").each(function(index, elem) {
        if (index == 0) return;

        var qry = $("input", this.cells[3]).val();
        var qryRowCount = qry.split(',').length;

        for (i = 0; i < qryRowCount; i++) {

            var fieldVal = qry.split(',')[i].split('=')[0];
            var displayVal = qry.split(',')[i].split('=')[0];

            $('.selField', this).append("<option value=" + fieldVal + ">" + displayVal + "</option>");
        }
    });
}
</script>

通过将其添加到您的代码中，它将添加到select中。这就是你需要的吗？

Answer 2

我已将每个下拉列表及其相应的文本字段标记为f1到f3和d1到d3，以便在循环遍历表时可以唯一标识这些行。

JS CODE：

  var qry = 'Title=new project,ProjectStatus=0,Tags=a';
  var qryStr = qry.split(',');
  var qryRowCount = qryStr.length;

for (i = 0; i < qryRowCount; i++) {
   var fieldVal = qryStr[i].split('=')[0];
   var displayVal = qryStr[i].split('=')[1];
   var fieldId = "#f" + (i + 1);
   var displayId = "#d" + (i + 1);
   $(fieldId).val(fieldVal);
   $(displayId).val(displayVal);
}

JSFIDDLE： http://jsfiddle.net/232HA/19/

我已经调整了你的代码，希望这能解决你的问题。

快乐编码：）

jQuery将值分配给表中的下拉列表

2 个答案: