显示/隐藏表值

Question

我正在使用datatable.js。我在表中列出了json数据。根据列表的true和false值​​，输入将是可见和不可见的。例如，如果tur = true，则第3列显示，第1列和第2列隐藏。如果tur = false，则第1列和第2列应显示为第3个隐藏。我不能运行它。你能帮我一下吗？

testdata = [{
    "id": "58",
    "country_code": "UK",
    "title": "",
    "pubdate": "",
    "url": "",
    "tur": true
}, {
    "id": "59",
    "country_code": "UK",
    "title": "",
    "pubdate": "",
    "url": "",
    "tur": false
}];

$('#test').dataTable({
    "aaData": testdata,
        "aoColumns": [{
        "mDataProp": "id"
    }, {
        "mDataProp": "country_code"         
    }, {
        "mDataProp": "title",
        "render": function (mDataProp, type, row,meta){
            var giris = '';

            giris = '<input class="input1" type="text" ></input>';
            return giris;

          }
    }, {
        "mDataProp": "pubdate",
        "render": function (mDataProp, type, row,meta){
            var giris = '';

            giris = '<input class="input2" type="text" ></input>';
            return giris;

          }
    }, {
        "mDataProp": "url",
        "render": function (mDataProp, type, row,meta){
            var giris = '';

            giris = '<input class="input3" type="text" ></input>';
            return giris;

          }
    },{
        "mDataProp": "tur",
        "render": function (mDataProp, type, row, meta) {
                var result = '';
                  //result = '<span class="center-block padding-5 label label-success">' + metin + '</span>';                  
                  result='<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span> EKLE</button>'                

                  if(row.tur){ 
                    $('.input1').show();
                    $('.input2').hide();
                    $('.input3').hide();                    
                    console.log("true "+ row.id);
                  } 
                  else if(!row.tur){
                    $('.input2').show();
                    $('.input3').show();      
                    $('.input1').hide();   
                    console.log("false " + row.id);    
                  }
                  return result;

            }
    }]
});

http://jsfiddle.net/s8JmF/837/

Answer 1

这里的问题是，当您运行$('.input2').hide();时，脚本使用类input2遍历所有的DOM元素并隐藏它们。这就是为什么，如果最后一个调用是.hide()，那么表中包含该类的所有输入都将被隐藏。

有不同的方法可以防止它。一种方法是为每个输入分配唯一的类。例如：

//...
"render": function (mDataProp, type, row,meta){
    var giris = '';
    giris = '<input class="input2-'+row.id+'"" type="text" ></input>';
    return giris;
}
//...
// then show or hide
$('.input2-' + row.id).hide();
//...

在这里，我将table元素的id添加到类名中。因为类名现在变成了类似input2-58的名称，所以它只对该行是唯一的。因此，显示或隐藏它不会影响文档中的其他输入域。

如果您的row.id不是唯一的，您可以使用其他一些唯一的标识来附加到类名。如果您需要CSS的类名，并且不想更改它们，那么您可以向<input>标记添加一个唯一的id或添加另一个类。好吧，你明白我的意思了。基本上，使DOM元素选择是惟一的，这样它们就不会影响其他输入字段。