Выключить Отключено во всей строке таблицы при нажатии кнопки - PullRequest
0 голосов
/ 20 сентября 2018

Я изучаю, как сделать кнопку динамического редактирования без всех этих повторяющихся кодов и просто изменить селектор.Я думаю, есть ли способ с одним классом редактирования отключить отключенный во всей строке, где находится кнопка редактирования?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 голосов
/ 20 сентября 2018

Вы можете включать и отключать, для этого я добавил кнопку «Сохранить», чтобы снова отключить после завершения редактирования, и показал, как это сделать.

Используйте классы для кнопки и перехватите этот обработчик событийк таблице, чтобы избежать проблем, таких как кнопка отправки формы или другие кнопки на вашей странице.

Примечание: вы также можете найти все ДРУГИЕ кнопки редактирования и отключить их при редактировании одной строки.Для этого вам нужно добавить это в обработчики кликов

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

и в save

$('#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>
0 голосов
/ 20 сентября 2018
$('button').click(function (){
        $(this).parents('tr').find('input').prop( "disabled", false );
});
0 голосов
/ 20 сентября 2018

Вы можете создать свой собственный.Попробуйте следующий код

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>
0 голосов
/ 20 сентября 2018

сделать так:

<!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>
0 голосов
/ 20 сентября 2018

Проблема с вашим HTML в том, что вы дали одинаковый идентификатор всем кнопкам, в то время как идентификатор должен быть уникальным на всей странице HTML.Но также вы можете использовать приведенный ниже код в теге скрипта, чтобы получить желаемый результат -

$( 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>
0 голосов
/ 20 сентября 2018

Все ваши кнопки в основном делают одно и то же, поэтому вы не хотите получать доступ ко всем из них по отдельности.Возможно, вы захотите сделать это так:

<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 );
});
...