Jquery Tabelle TH on Klick

[StandBy1]

Hallo Leute,

ich habe eine einfache Tabelle:

[src=html4strict]
<table id="tblData">
<tr>
<th class="hidden">ID</th>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td class="hidden">ID</td>
<td>Maria Anders</td>
<td>30</td>
<td>Germany</td>
</tr>
<tr>
<td class="hidden">1</td>
<td contenteditable="false" onBlur="saveToDatabase(this);">Francisco Chang</td>
<td>24</td>
<td>Mexico</td>
</tr>
<tr>
<td class="hidden">2</td>
<td>Roland Mendel</td>
<td>100</td>
<td>Austria</td>
</tr>
<tr>
<td class="hidden">3</td>
<td contenteditable="true" onBlur="saveToDatabase(this);">Helen Bennett</td>
<td contenteditable="true" onBlur="saveToDatabase(this);">28</td>
<td contenteditable="true" onBlur="saveToDatabase(this);">UK</td>
</tr>
<tr>
<td class="hidden">4</td>
<td>Yoshi Tannamuri</td>
<td>35</td>
<td>Canada</td>
</tr>
<tr>
<td class="hidden">5</td>
<td>Giovanni Rovelli</td>
<td>46</td>
<td>Italy</td>
</tr>
<tr>
<td class="hidden">6</td>
<td>Alex Smith</td>
<td>59</td>
<td>USA</td>
</tr>
</table>
[/src]

mit diesem Script komme ich nach einem Klick an die Daten der Zelle und ihrer ID:

[src=javascript]
function saveToDatabase(editableObj)
{
if ($(editableObj).closest("td").attr('contenteditable') == 'true')
{
console.log($( editableObj ).text());

console.log($(editableObj).siblings(":first").text());

console.log(Name des TH von der Zelle) <-- das suche ich
}
};
[/src]

was ich suche und nicht hinbekomme ist das ich auch noch console.log(Zellen Head bekomme).

also das TH was zu der gedrückten Zelle gehört.

Kann mir wer sagen wie das geht?

 

[Dr. M.]

Sowas:
[src=javascript]let td = $(editableObj).closest("td");
// Numerischer Index
console.log(td.index());
// Header
console.log($("th", td.closest("table"))[td.index()].innerText);[/src]
Insgesamt ist das aber recht fehleranfaellig, den Titel aus dem Tabellenheader zureuckzulesen.
Mindestens serverseitig musst du das noch einmal ueberpruefen.

 

[StandBy1]

Danke für deine Lösung.

Geprüft wird es sicherlich auf Serverseite.
Danke auch für den hinweiss.

Für alle die das mal finden, meine komplett Lösung:

[src=javascript]
$('tr td').each(function()
{
if ($(this).closest("td").attr('contenteditable') == 'true')
{
$(this).mouseover(function()
{
$(this).css("cursor", "pointer");
})

$(this).blur(function()
{
var id = $(this).closest('tr').find('td').eq(0).text();
var data = $(this).closest("td").text();
var head = $(this).closest('table').find('th').eq($(this).index()).text();

$.ajax
({
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
type: 'POST',
url: 'index.php?GOTO=Controller_AJAX/mach_was/',
dataType: 'json',
data: {ID: id, HEADER: head, DATEN:data},
encode: true,
success: function (data)
{
if (data.ID === true)
{
//alert('Alles OK');
}
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
alert("Status: " + textStatus); alert("Error: " + errorThrown);
}
})
})
}
})
[/src]

Ob das die Beste oder eine saubere Lösung ist kann ich nicht sagen.
Aber es geht :-)