英文:
I can't set text after modifying the text
问题
在以下代码中，如果您单击任何表格行，信息将被写入文本区域，如果您单击temizle（En："clean"）按钮，则所有文本区域都将被清除。但是，如果您在文本中更改了内容后，不能设置或清除文本区域。
我尚未修复此错误。我正在使用jQuery进行选择，我认为这可能是问题的原因？
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$("#hastaliklar tr").click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
var ad = $(this).find('td:eq(1)').html();
var tanim = $(this).find('td:eq(2)').html();
var belirti = $(this).find('td:eq(3)').html();
var yap = $(this).find('td:eq(4)').html();
var yapma = $(this).find('td:eq(5)').html();
$("#adtxt").text(ad);
$("#tanimtxt").text(tanim);
$("#belirtitxt").text(belirti);
$("#yaptxt").text(yap);
$("#yapmatxt").text(yapma);
$("#kaydetbtn").addClass("unvisible");
$("#kaydetbtn").prop('readonly', true);
$("#guncellebtn").removeClass("unvisible");
});
$("#temizle").click(function() {
$("#adtxt").text("");
$("#tanimtxt").text("");
$("#belirtitxt").text("");
$("#yaptxt").text("");
$("#yapmatxt").text("");
$("#guncellebtn").addClass("unvisible");
$("#guncellebtn").prop('readonly', true);
$("#kaydetbtn").removeClass("unvisible");
});
$(document).ready(function() {
$('#hastaliklar').DataTable();
});
<!-- language: lang-css -->
.table-container {
overflow: hidden;
}
.table-container table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
}
.table-container td {
max-width: 300px;
min-height: 40px;
max-height: 80px;
white-space: normal;
text-overflow: ellipsis;
}
.unvisible {
background: transparent;
border: none !important;
font-size: 0;
}
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
<form>
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">Adı</span>
<textarea class="form-control" id="adtxt" aria-label="With textarea"></textarea>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">Tanımı</span>
<textarea class="form-control" id="tanimtxt" aria-label="With textarea"></textarea>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">Belirtileri</span>
<textarea class="form-control" id="belirtitxt" aria-label="With textarea"></textarea>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">Yapılması Gerekenler</span>
<textarea class="form-control" id="yaptxt" aria-label="With textarea"></textarea>
</div>
<div class="input-group mb-3">
<details>
<summary>英文:</summary>
In the below code, if you click any table row the information will be written to textareas, and if you click on the *temizle* (*En*: "clean") button all textareas are going to be cleared. But, you can't set or clear the textarea after you change something in the text.
I didn't fix this bug yet. I'm using jQuery for selecting, and I think maybe this could be the problem?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$("#hastaliklar tr").click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
var ad = $(this).find('td:eq(1)').html();
var tanim = $(this).find('td:eq(2)').html();
var belirti = $(this).find('td:eq(3)').html();
var yap = $(this).find('td:eq(4)').html();
var yapma = $(this).find('td:eq(5)').html();
$("#adtxt").text(ad);
$("#tanimtxt").text(tanim);
$("#belirtitxt").text(belirti);
$("#yaptxt").text(yap);
$("#yapmatxt").text(yapma);
$("#kaydetbtn").addClass("unvisible");
$("#kaydetbtn").prop('readonly', true);
$("#guncellebtn").removeClass("unvisible");
});
$("#temizle").click(function() {
$("#adtxt").text("");
$("#tanimtxt").text("");
$("#belirtitxt").text("");
$("#yaptxt").text("");
$("#yapmatxt").text("");
$("#guncellebtn").addClass("unvisible");
$("#guncellebtn").prop('readonly', true);
$("#kaydetbtn").removeClass("unvisible");
});
$(document).ready(function() {
$('#hastaliklar').DataTable();
});
<!-- language: lang-css -->
.table-container {
overflow: hidden;
}
.table-container table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
}
.table-container td {
max-width: 300px;
min-height: 40px;
max-height: 80px;
white-space: normal;
text-overflow: ellipsis;
}
.unvisible {
background: transparent;
border: none !important;
font-size: 0;
}
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
<form>
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">Adı</span>
<textarea class="form-control" id="adtxt" aria-label="With textarea"></textarea>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">Tanımı</span>
<textarea class="form-control" id="tanimtxt" aria-label="With textarea"></textarea>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">Belirtileri</span>
<textarea class="form-control" id="belirtitxt" aria-label="With textarea"></textarea>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">Yapılması Gerekenler</span>
<textarea class="form-control" id="yaptxt" aria-label="With textarea"></textarea>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">Yapılmaması Gerekenler</span>
<textarea class="form-control" id="yapmatxt" aria-label="With textarea"></textarea>
</div>
<div class="input-group mb-3">
<button id="kaydetbtn" class="btn btn-success me-3 " type="button">Kaydet</button>
<button id="guncellebtn" class="btn btn-warning me-3" type="button">Güncelle</button>
<button class="btn btn-danger" id="temizle" type="button">Temizle</button>
</div>
</form>
<table id="hastaliklar" class=" table table-bordered table-primary" style="overflow: auto; height: 400px; display: block; ">
<thead>
<tr>
<th>Güncelle</th>
<th>Hastalık Adı</th>
<th>Tanımı</th>
<th>Belirtileri</th>
<th>Yapılması Gerekenler</th>
<th>Yapılmaması Gerekenler</th>
</tr>
</thead>
<tbody>
<tr>
<td><button type="button" onclick="veri_cek(1)" class="btn btn-primary"><i class="bi bi-x-circle-fill"></i></button></td>
<td>Demans</td>
<td>Yaşlılık</td>
<td>BelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileri</td>
<td>Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler
Yapılması gerekenler Yapılması gerekenler </td>
<td>Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler </td>
</tr>
<tr>
<td><button type="button" onclick="veri_cek(1)" class="btn btn-primary"><i class="bi bi-x-circle-fill"></i></button></td>
<td>Demans</td>
<td>Yaşlılık</td>
<td>BelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileri</td>
<td>Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler
Yapılması gerekenler Yapılması gerekenler </td>
<td>Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler </td>
</tr>
<tr>
<td><button type="button" onclick="veri_cek(1)" class="btn btn-primary"><i class="bi bi-x-circle-fill"></i></button></td>
<td>Demans</td>
<td>Yaşlılık</td>
<td>BelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileriBelirtileri</td>
<td>Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler Yapılması gerekenler
Yapılması gerekenler Yapılması gerekenler </td>
<td>Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler Yapılmaması Gerekenler </td>
</tr>
</tbody>
</table>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
<!-- end snippet -->
</details>
# 答案1
**得分**: 1
我认为代码的问题在于你尝试使用.text()方法来更改文本区域的内容，而正确的方法是.val()。.text()方法用于设置或返回所选元素的文本内容，而.val()用于获取匹配元素集合中第一个元素的当前值，或设置每个匹配元素的值。
请尝试这样做，然后告诉我们是否能够解决这个问题：
```javascript
$("#hastaliklar tr").click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
var ad = $(this).find('td:eq(1)').html();
var tanim = $(this).find('td:eq(2)').html();
var belirti = $(this).find('td:eq(3)').html();
var yap = $(this).find('td:eq(4)').html();
var yapma = $(this).find('td:eq(5)').html();
$("#adtxt").val(ad);
$("#tanimtxt").val(tanim);
$("#belirtitxt").val(belirti);
$("#yaptxt").val(yap);
$("#yapmatxt").val(yapma);
$("#kaydetbtn").addClass("unvisible");
$("#kaydetbtn").prop('readonly', true);
$("#guncellebtn").removeClass("unvisible");
});
$("#temizle").click(function() {
$("#adtxt").val("");
$("#tanimtxt").val("");
$("#belirtitxt").val("");
$("#yaptxt").val("");
$("#yapmatxt").val("");
$("#guncellebtn").addClass("unvisible");
$("#guncellebtn").prop('readonly', true);
$("#kaydetbtn").removeClass("unvisible");
});
$(document).ready(function() {
$('#hastaliklar').DataTable();
});
希望这对你有帮助。
英文:
I think the issue with the code is that you are trying to change the content of a textarea with the .text() method, while the correct method is .val(). The .text() method is used to set or return the text content of selected elements, while .val() is used to get the current value of the first element in the set of matched elements or set the value of every matched element.
Please try this and let us know if you are able to solve this issue:
$("#hastaliklar tr").click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
var ad = $(this).find('td:eq(1)').html();
var tanim = $(this).find('td:eq(2)').html();
var belirti = $(this).find('td:eq(3)').html();
var yap = $(this).find('td:eq(4)').html();
var yapma = $(this).find('td:eq(5)').html();
$("#adtxt").val(ad);
$("#tanimtxt").val(tanim);
$("#belirtitxt").val(belirti);
$("#yaptxt").val(yap);
$("#yapmatxt").val(yapma);
$("#kaydetbtn").addClass("unvisible");
$("#kaydetbtn").prop('readonly', true);
$("#guncellebtn").removeClass("unvisible");
});
$("#temizle").click(function() {
$("#adtxt").val("");
$("#tanimtxt").val("");
$("#belirtitxt").val("");
$("#yaptxt").val("");
$("#yapmatxt").val("");
$("#guncellebtn").addClass("unvisible");
$("#guncellebtn").prop('readonly', true);
$("#kaydetbtn").removeClass("unvisible");
});
$(document).ready(function() {
$('#hastaliklar').DataTable();
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论