显示/隐藏表格值答案

【问题标题】：Show / Hide table values显示/隐藏表格值
【发布时间】：2018-01-23 20:46:48
【问题描述】：

我正在使用 datatable.js。我在指法上列出了 json 数据。输入将根据列表的真假值可见和不可见。例如，如果 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/

【问题讨论】：

标签： javascript json datatables

【解决方案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();
//...

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

如果您的row.id 不是唯一的，您可以使用其他一些唯一标识附加到类名。如果您需要 CSS 的类名，并且不想更改它们，则可以将唯一的 id 添加到 <input> 标记或添加另一个类。反正你懂这个意思。基本上，使 DOM 元素选择唯一，因此它们不会影响其他输入字段。

【讨论】：