Javascript在表格单元格中查找选择元素

时间:2017-05-30 12:26:09

标签: javascript jquery

我有一个带有选择和文本值单元格的表格列,如下所示:

<tr>
   <td data-key="data1">some text data</td>
</tr>
<tr>
   <td data-key="data2">
      <select>
        <option>1_option</option>
        <option>2_option</option>
      </select>
   </td>
</tr>

我需要根据单元格中的数据类型获取数据。我是这样做的:

var obj = $('#myTable tbody tr').map(function() {
            var $row = $(this);
            var localobj = {};
            var cell = $row.find(':nth-child(1)');
            dataattr = cell[0].getAttribute('data-key');
            var selectObject = cell.find("select");
            console.log(selectObject);
            if(selectObject){ // always true here, but I need false if there is no select in the cell
                localobj[dataattr] = selectObject.val();
            }else{
                localobj[dataattr] = cell.text();
            }
            return localobj;
        }).get();

它正确地抓取选定的值但无法获取文本值,因为它总是在我的if评估中返回true。任何想法如何解决它?

谢谢

4 个答案:

答案 0 :(得分:1)

jQuery将所有内容包装在其自己的对象容器中,因此selectObject始终评估为true,因为它是一个未定义或为null的对象。

您只需检查以确保该对象通过

至少包含1个元素
if (selectObject.length > 0) { ... }

答案 1 :(得分:0)

试试这个

var tbl = $('#tblHours');

tbl.find('tr').each(function(){
   $(this).find('td').each(function(){
       alert($(this).find('select :selected').val());
   });
});

答案 2 :(得分:0)

作为 正如@Arvind Audacious所解释的,jQuery总是返回一个容器。您不能假设查询的结果为NULL。相反,您需要检查其长度,以验证它是否实际检索了任何元素。请参阅下面的代码,例如:

    $('#myTable tbody tr td').each(function(){
           var selectObject = $(this).find('select');
           if(selectObject.length == 0) {
             console.log($(this).text())
             } else {
             console.log(selectObject);
             }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

答案 3 :(得分:0)

检查jQuery选择器对象将不起作用,因为它将始终为true。检查选择器返回的长度是最好的方法。请检查小提琴 - https://jsfiddle.net/nsjithin/r43dqqdy/1/

var obj = $('#myTable tbody tr').map(function() {
var $row = $(this);
var localobj = {};

var td = $row.find('td').first();

var dataattr = td.attr('data-key');

var select = td.find('select');
if(select.length > 0){
    console.log(select);
    if(select.find('option:selected').length > 0){
        localobj[dataattr] = select.val();
    }
    else{
        // If not selected. What to do here??
    }
}
else{
  localobj[dataattr] = td.text();
}
return localobj;
}).get();
console.log(obj);