单击按钮时，关闭表中整行的“禁用”

时间：2018-09-20 11:35:46

标签： javascript jquery html-table

我正在研究如何制作一个动态编辑按钮，而无需所有这些重复的代码，而只是更改选择器。我在想，有没有一种方法可以关闭放置编辑按钮的整个行中的禁用编辑类？ JSFIDDLE：https://jsfiddle.net/Lv1a39rk/15/ 

<!DOCTYPE html>
<html>
<head>
<script
              src="https://code.jquery.com/jquery-3.3.1.js"
              integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
              crossorigin="anonymous"></script>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
</head>
<body>
<script>
$( document ).ready(function() {
    $('table tr td input').prop('disabled', true);
});
</script>
<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Settings</th>
  </tr>
  <tr>
    <td>TestData</td>
    <td><input = "text"></td>
    <td><input = "text"></td>
    <td><button id = "edit">Edit</button></td>
  </tr>
  <tr>
    <td>TestData</td>
    <td><input type= "text"></td>
    <td><input type= "text"></td>
    <td><button id = "edit">Edit</button></td>
  </tr>
  <tr>
    <td>TestData</td>
    <td><input type= "text"></td>
    <td><input type= "text"></td>
    <td><button id = "edit">Edit</button></td>
  </tr>
  <tr>
    <td>TestData</td>
    <td><input type= "text"></td>
    <td><input type= "text"></td>
    <td><button id = "edit">Edit</button></td>
  </tr>
  <tr>
    <td>TestData</td>
    <td><input type= "text"></td>
    <td><input type= "text"></td>
    <td><button id = "edit">Edit</button></td>
  </tr>
  <tr>
    <td>TestData</td>
    <td><input type= "text"></td>
    <td><input type= "text"></td>
    <td><button id = "edit">Edit</button></td>
  </tr>
</table>


</body>
</html>

我想到的是这个，但是我只是重复代码并更改选择器，是否有一种简单的方法并且代码更少？ JSFIDDLE：https://jsfiddle.net/Lv1a39rk/18/ 

<!DOCTYPE html>
<html>
<head>
<script
              src="https://code.jquery.com/jquery-3.3.1.js"
              integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
              crossorigin="anonymous"></script>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Settings</th>
  </tr>
  <tr>
    <td>testdata</td>
    <td><input = "text"></td>
    <td><input = "text"></td>
    <td><button id = "edit_1">Edit</button></td>
  </tr>
  <tr>
    <td>testdata</td>
    <td><input type= "text"></td>
    <td><input type= "text"></td>
    <td><button id = "edit_2">Edit</button></td>
  </tr>
  <tr>
    <td>testdata</td>
    <td><input type= "text"></td>
    <td><input type= "text"></td>
    <td><button id = "edit_3">Edit</button></td>
  </tr>
  <tr>
    <td>testdata</td>
    <td><input type= "text"></td>
    <td><input type= "text"></td>
    <td><button id = "edit_4">Edit</button></td>
  </tr>
  <tr>
    <td>testdata</td>
    <td><input type= "text"></td>
    <td><input type= "text"></td>
    <td><button id = "edit_5">Edit</button></td>
  </tr>
  <tr>
    <td>testdata</td>
    <td><input type= "text"></td>
    <td><input type= "text"></td>
    <td><button id = "edit_6">Edit</button></td>
  </tr>
</table>

<script>
$( document ).ready(function() {
    $('table tr td input').prop('disabled', true);
    $( "td:eq( 2 )" ).css( "color", "red" );

    $('#edit_1'). click(function (){
        $("tr:nth-child(2) td:eq(1) input").prop( "disabled", false );
        $("tr:nth-child(2) td:eq(2) input").prop( "disabled", false );
    });

    $('#edit_2').click(function (){
        $("tr:nth-child(3) td:eq(1) input").prop( "disabled", false );
        $("tr:nth-child(3) td:eq(2) input").prop( "disabled", false );
    });
});
</script>
</body>
</html>

6 个答案:

答案 0 :(得分：2)

这样做：

<!DOCTYPE html>
<html>
<head>
<script
			  src="https://code.jquery.com/jquery-3.3.1.js"
			  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
			  crossorigin="anonymous"></script>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Settings</th>
  </tr>
  <tr>
    <td>testdata</td>
    <td><input = "text"></td>
    <td><input = "text"></td>
    <td><button id = "edit_1">Edit</button></td>
  </tr>
  <tr>
    <td>testdata</td>
    <td><input type= "text"></td>
    <td><input type= "text"></td>
    <td><button id = "edit_2">Edit</button></td>
  </tr>
  <tr>
    <td>testdata</td>
    <td><input type= "text"></td>
    <td><input type= "text"></td>
    <td><button id = "edit_3">Edit</button></td>
  </tr>
  <tr>
    <td>testdata</td>
    <td><input type= "text"></td>
    <td><input type= "text"></td>
    <td><button id = "edit_4">Edit</button></td>
  </tr>
  <tr>
    <td>testdata</td>
    <td><input type= "text"></td>
    <td><input type= "text"></td>
    <td><button id = "edit_5">Edit</button></td>
  </tr>
  <tr>
    <td>testdata</td>
    <td><input type= "text"></td>
    <td><input type= "text"></td>
    <td><button id = "edit_6">Edit</button></td>
  </tr>
</table>

<script>

$( document ).ready(function() {
    $('table tr td input').prop('disabled', true);
    $( "td:eq( 2 )" ).css( "color", "red" );

    $('button'). click(function (){
        $(this).closest("tr").find("input").prop('disabled', false);
    });
    
    
});
</script>
</body>
</html>

答案 1 :(得分：1)

$('button').click(function (){
        $(this).parents('tr').find('input').prop( "disabled", false );
});

答案 2 :(得分：0)

所有按钮基本上都执行相同的操作，因此您不想单独访问所有按钮。您可能想要像这样：

<tr id="row-1">
  <td>testdata</td>
  <td><input type= "text"></td>
  <td><input type= "text"></td>
  <td><button class="edit-button" data-row-id="row-1">Edit</button></td>
</tr>

如果这样做，足以使JavaScipt事件看起来像这样：

$(".edit-button").click(function () {
  $("#" + $(this).data("row-id") + " input").prop( "disabled", false );
});

不想更改您的JS？按照建议的其他答案进行操作：

$('button').click(function (){
        $(this).closest('tr').find('input').prop( "disabled", false );
});

答案 3 :(得分：0)

HTML的问题是您为所有按钮赋予了相同的ID，而ID在整个HTML页面中应该是唯一的。但是然后您也可以在script标签中使用以下代码来获取所需的输出-

$( document ).ready(function() {
    $('table tr td input').prop('disabled', true);
    $('button').click(function(e){
        $(this).parents('tr').find('input').prop('disabled', false);
    });
});

详细的代码段如下-

<!DOCTYPE html>
<html>
<head>
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
	integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
	crossorigin="anonymous">
</script>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
</head>
<body>
<script>
$( document ).ready(function() {
    $('table tr td input').prop('disabled', true);
    $('button').click(function(e){
		$(this).parents('tr').find('input').prop('disabled', false);
	});
});
</script>
<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Settings</th>
  </tr>
  <tr>
    <td>TestData</td>
    <td><input = "text"></td>
    <td><input = "text"></td>
    <td><button id = "edit">Edit</button></td>
  </tr>
  <tr>
    <td>TestData</td>
    <td><input type= "text"></td>
    <td><input type= "text"></td>
    <td><button id = "edit">Edit</button></td>
  </tr>
  <tr>
    <td>TestData</td>
    <td><input type= "text"></td>
    <td><input type= "text"></td>
    <td><button id = "edit">Edit</button></td>
  </tr>
  <tr>
    <td>TestData</td>
    <td><input type= "text"></td>
    <td><input type= "text"></td>
    <td><button id = "edit">Edit</button></td>
  </tr>
  <tr>
    <td>TestData</td>
    <td><input type= "text"></td>
    <td><input type= "text"></td>
    <td><button id = "edit">Edit</button></td>
  </tr>
  <tr>
    <td>TestData</td>
    <td><input type= "text"></td>
    <td><input type= "text"></td>
    <td><button id = "edit">Edit</button></td>
  </tr>
</table>


</body>
</html>

答案 4 :(得分：0)

您可以创建自己的。试试下面的代码

var data = [
  {
    company: 'One',
    contact: 'Yes',
    country: 'India'
  }, {
    company: 'Two',
    contact: 'No',
    country: 'US'
  }, {
    company: 'Three',
    contact: 'Yes',
    country: 'UK'
  }
]
$(document).ready(function(){
  appendDataToTable();
  $('#table-container tbody').on('click', 'button', function() {
    editClickBtn($(this));
  })
})

function appendDataToTable() {
  data.map(function(eachData) {
    var row = '<tr class="disabled">'
    row += '<td>'+eachData.company+'</td>'
    row += '<td><input type="text" disabled /></td>'
    row += '<td><input type="text" disabled /></td>'
    row += '<td><button>Edit</button></td>'
    row += '</tr>';
    $('#table-container tbody').append(row);
  })
}

function editClickBtn(that) {
  $(that).closest('tr').removeClass('disabled');
  $(that).closest('tr').find('input').removeAttr('disabled');
}
body {
  padding: 0;
  margin: 0;
}
table {
  width: 100%;
  border-collapse: collapse;
}
tbody tr:nth-child(odd) {
  background-color: #dddddd;
}
td, th {
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='table-container'>
  <thead>
    <tr>
      <td>Company</td>
      <td>Contact</td>
      <td>Country</td>
      <td>Country</td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

答案 5 :(得分：0)

您可以同时启用和禁用，为此，我添加了一个“保存”按钮以在完成编辑后再次禁用它，并说明了如何执行此操作。

对按钮使用类，并将该事件处理程序钩到表上，以避免出现表单提交按钮或页面上其他按钮之类的问题。

注意：您还可以找到所有“其他编辑”按钮，并在编辑一行时将其禁用。为此，您可以将其添加到点击处理程序中

let editbutton = row.find('.edit'); // not this row
$('#myedittable').find('.edit').not(editbutton).prop('disabled', true);

并保存

$('#myedittable').find('.edit').prop('disabled', false);

示例：

$(function() {
  $('#myedittable').find('input[type="text"]').add('.save').prop('disabled', true);
});
$('#myedittable').on('click', '.edit', function() {
  let row = $(this).closest('tr');
  let savebutton = row.find('.save');
  row.find('input[type=text]').add(savebutton).prop('disabled', false);
});
$('#myedittable').on('click', '.save', function() {
  let row = $(this).closest('tr');
  let savebutton = row.find('.save');
  row.find('input[type="text"]').add(savebutton).prop('disabled', true);
});
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<h2>HTML Table</h2>
<table id="myedittable">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Settings</th>
  </tr>
  <tr>
    <td>TestData</td>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
    <td><button class="edit">Edit</button></td>
    <td><button class="save">Save</button></td>
  </tr>
  <tr>
    <td>TestData</td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><button class="edit">Edit</button></td>
    <td><button class="save">Save</button></td>
  </tr>
  <tr>
    <td>TestData</td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><button class="edit">Edit</button></td>
    <td><button class="save">Save</button></td>
  </tr>
  <tr>
    <td>TestData</td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><button class="edit">Edit</button></td>
    <td><button class="save">Save</button></td>
  </tr>
  <tr>
    <td>TestData</td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><button class="edit">Edit</button></td>
    <td><button class="save">Save</button></td>
  </tr>
  <tr>
    <td>TestData</td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><button class="edit">Edit</button></td>
    <td><button class="save">Save</button></td>
  </tr>
</table>

相关问题
最新问题