从表内的datalist访问值

时间:2017-03-28 12:14:01

标签: javascript html

我试图从表格单元格中获取Datalist的值。我有一个函数循环遍历表的每个单元格以获取值:

function getTableContents() {
    //gets table
    var oTable = document.getElementById('projectsTable');
    var projectNames = [];
    //gets rows of table
    var rowLength = oTable.rows.length;

    //loops through rows    
    for (i = 1; i < rowLength; i++){
        //gets cells of current row  
        var oCells = oTable.rows.item(i).cells;

        //gets amount of cells of current row
        var cellLength = oCells.length;
        //Push the html content of each cell into an array
        projectNames.push(oCells.item(0).innerHTML);
    }
    //Loop through each stored cell and check whether that project exists in the database
    for( i = 0; i < projectNames.length; i++){
        checkUser(projectNames[i]);
    }
}

获取单元格值的行返回datalist的html但不返回实际值。我可以使用以下方式获得价值:

document.getElementById("listOfProjects").value;

然而,这是不可取的,因为该表可能包含使用相同datalist id的多个datalist字段。我需要一些方法来为包含数据列表的每个单元格在单个单元格中获取datalist的值。任何帮助都赞赏欢呼。

编辑:

我首先定义datalist:

$('.AddNew').click(function(){
    "use strict";
    $('#projectsTable tbody').append("<tr class='child'> \
    <td><input type='text' id='listOfProjects' list='projectNames' placeholder='e.g. Project Name'> \
        <datalist id='projectNames'> \
        </datalist></td> \
    <td> <input type='button' class='RemoveRow' value='Remove Item'> </td></tr>");

我用内容更新datalist:

function getProjectNames(){
    //Ensure function is only ran once. Otherwise it causes duplicates in the datalist
    if(!projectNamesRetrieved){
        var dataList = document.getElementById('projectNames');
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                yourval = JSON.parse(this.responseText);
                document.getElementById("projectsresults").innerHTML = yourval;
                for(var i = 0; i < yourval.length; i++) {
                    var carsOption = "<option value=\"" + yourval[i].Name + "\">" + yourval[i].Name + "</option>";
                    $('#projectNames').append(carsOption);
                }
            }
        };
        xmlhttp.open("GET","getProjectNames.php",true);
        xmlhttp.setRequestHeader("Content-Type", "application/json");
        xmlhttp.send(null);

        projectNamesRetrieved = true;
    }
}

1 个答案:

答案 0 :(得分:0)

如果您可以发布样本表数据,这将有所帮助。因为,通常.innerHTML应该用于提取单元格的值。但是,如果它不起作用,那么你可以尝试使用

projectNames.push(oCells.item(0).innerText);

即使这没有帮助,请发布测试数据,以便我们可以看到您要查找的内容。