Question

Javascript功能：

下面发布的我的JS函数是遍历第二个参数中定义的列索引，同时循环也是第三个参数中定义的给定元素id。这将根据单击行的列值填充文本框，单选按钮和下拉字段。

从下面的示例用法中，单击表时，列索引1（价格）中的值将显示在价格文本框中。

样本用法：

<table id="tblPrice" onclick="gettabledata('tblPrice', '0,1,2,3', 'PriceId,Price,strtDt,endDt')">

问题：

表的第二列（隐藏第一列）具有单选按钮和标签的组合，单击该行时，Price文本框的值如下所示：

<input type="radio" name="rbDefaultPrice" class="radio" value=""> <label style="font-size: 1em" class="price" for="lblPriceRbtn">5</label>

我只需要在Price文本框中显示值5，所以我需要对显示的元素标签进行三角化。除了具有radiobutton和label组合的单元格外，所有其他仅包含文本（无单选按钮）的单元格都会正确复制到相应的文本框中。负责此的代码是：

document.getElementById(fieldId[i]).value = rowSelected.cells[colIndex[i]].innerHTML.trim();

innerHTML.trim()仅在获取单元格值时删除空格。

JavaScript（转到注释：Problem以查看有问题的代码）：

function gettabledata(tableId, colIndexes, fieldIds) {

    var table = document.getElementById(tableId); //Get table id to evaluate
    var cells = table.getElementsByTagName('td'); //Get all table cells per column

    //Get field Ids set in parameter
    var fieldId = fieldIds.split(","); 
    var colIndex = colIndexes.split(",");

    for (var i = 0; i < cells.length; i++) {
        var cell = cells[i];

        //Get column data on clicked row
        cell.onclick = function () {
            var rowId = this.parentNode.rowIndex;
            var rowsNotSelected = table.getElementsByTagName('tr');

            var rowSelected = table.getElementsByTagName('tr')[rowId]; //Get selected row

            //Get number of items in array and loop (NOTE: colIndex is an array parameter defined in called javascript from View)
            for (i = 0; i < fieldId.length; i++) {

                var elmntTag = document.getElementById(fieldId[i]).tagName; //Get element tag name of each filedId item (SELECT, INPUT)
                var elmntType = document.getElementById(fieldId[i]).getAttribute("type"); //Get element type of each filedId item (text, radio)

                //Check field if dropdown or input (text or radio)
                if (elmntTag == "INPUT") {

                    //Populate field depending on input type
                    if (elmntType == "text" || elmntType == "hidden") {

                        //PROBLEM
                        document.getElementById(fieldId[i]).value = rowSelected.cells[colIndex[i]].innerHTML.trim(); //Populate value of textbox id defined in the parameter
                    } else if (elmntType == "radio") {

                        //Populate value of radiobutton id defined in the parameter
                        var status = rowSelected.cells[colIndex[i]].innerHTML.trim();
                        var name = document.getElementById(fieldId[i]).getAttribute("name");

                        if (status == "Active") {
                            $('input[name=' + name + '][value="Active"]').prop('checked', true);
                        } else if (status == "Inactive") {
                            $('input[name=' + name + '][value="Inactive"]').prop('checked', true);
                        }
                    }
                //Check field if dropdown or input (text or radio)
                } else if (elmntTag == "SELECT") {
                    var dropdown = document.getElementById(fieldId[i]);
                    dropdown.value = rowSelected.cells[colIndex[i]].innerHTML.trim();
                }
            }
        }
    }
    $('#btnUpdate').show();
    $('#btnSave').hide();
}

HTML：

<table id="template" style="display:none;">
    <tr>
        <td class="hidden"></td>
        <td>
            <input type="radio" name="rbDefaultPrice" class="radio" />
            <label style="font-size: 1em" class="price"></label>
        </td>
        <td class="startdate"></td>
        <td class="enddate"></td>
    </tr>
</table>

Answer 1

在查看了几个论坛之后，我想出了一个答案：

我替换了我的代码：

document.getElementById(fieldId[i]).value = rowSelected.cells[colIndex[i]].innerHTML.trim();

对此：

document.getElementById(fieldId[i]).value = rowSelected.cells[colIndex[i]].textContent.trim();

使用单选按钮和标签组合修剪表格单元格的HTML标记

1 个答案: